reactjs - React、Emotion 和 Jest 快照 : Error: property missing ':'

Question

我有一个可重用的 React 组件库和仪表板库。

我的仪表板使用了我的可重用存储库中的许多组件，但我无法通过仪表板存储库中的一项测试。

可重用组件 repo 有这些版本，所有测试通过:

"emotion": "9.1.0",
"react-emotion": "9.1.0",
"jest-emotion": "^9.0.0",
"react-test-renderer": "16.6.3",

仪表板存储库有这些版本，只有一个测试失败:

"emotion": "9.2.11",
"react-emotion": "9.2.11",
"jest-emotion": "9.2.11",
"react-test-renderer": "16.6.3",

被破坏的测试使用react-test-renderer 制作组件的快照。正在测试的组件之一如下所示:

import styled from 'react-emotion';
import { Column } from '@commons/components';

export const StyledButtonContainer = styled('div')`
  margin-top: 20px;
  display: flex;
  button {
    flex: 1;
    margin-right: 15px;

    &:last-child {
     margin-right: 0;
    }
  }
`;

错误堆栈:

console.error node_modules/jest-emotion/dist/index.js:260
      { 
        Error: undefined:1:627: property missing ':'
          at error (/Users/path/to/my/node_modules/css/lib/parse/index.js:62:15)
          at declaration (/Users/path/to/my/node_modules/css/lib/parse/index.js:224:33)
          at declarations (/Users/path/to/my/node_modules/css/lib/parse/index.js:253:19)
          at rule (/Users/path/to/my/node_modules/css/lib/parse/index.js:561:21)
          at rules (/Users/path/to/my/node_modules/css/lib/parse/index.js:118:70)
          at stylesheet (/Users/path/to/my/node_modules/css/lib/parse/index.js:81:21)
          at Object.<anonymous>.module.exports [as parse] (/Users/path/to/my/node_modules/css/lib/parse/index.js:565:20)
          at getStylesFromClassNames (/Users/path/to/my/node_modules/jest-emotion/dist/index.js:258:40)
          at Object.print (/Users/path/to/my/node_modules/jest-emotion/dist/index.js:226:18)
          at printPlugin (/Users/path/to/my/node_modules/pretty-format/build/index.js:287:16)
          at prettyFormat (/Users/path/to/my/node_modules/pretty-format/build/index.js:485:16)
          at Object.<anonymous>.exports.serialize.data (/Users/path/to/my/node_modules/jest-snapshot/build/utils.js:172:34)
          at SnapshotState.match (/Users/path/to/my/node_modules/jest-snapshot/build/State.js:153:53)
          at _toMatchSnapshot (/Users/path/to/my/node_modules/jest-snapshot/build/index.js:197:32)
          at Object.toMatchSnapshot (/Users/path/to/my/node_modules/jest-snapshot/build/index.js:95:10)
          at Object.throwingMatcher (/Users/path/to/my/node_modules/jest-cli/node_modules/expect/build/index.js:320:33)
          at Object.toMatchSnapshot (/Users/path/to/my/__tests__/components/filter-drawer/filter-drawer.test.js:26:18)
          at Object.asyncJestTest (/Users/path/to/my/node_modules/jest-cli/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/Users/path/to/my/node_modules/jest-cli/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/Users/path/to/my/node_modules/jest-cli/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/Users/path/to/my/node_modules/jest-cli/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at <anonymous>
          at process._tickCallback (internal/process/next_tick.js:188:7)
        reason: 'property missing \':\'',
        filename: undefined,
        line: 1,
        column: 627,
        source: ';}.css-1odnewp{margin-top:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-1odnewp button{-webkit-flex:1;-ms-flex:1;flex:1;margin-right:15px;}.css-1odnewp button:last-child{margin-right:0;}' 
      }

Jest 抛出的错误，它提到了所有它有问题的样式:

There was an error parsing css in jest-emotion: ".css-8buf5s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:32px;border-right:#DDD solid 1px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-8buf5s.light{background-color:white;}.css-8buf5s.dark{background-color:#F7F7F7;}.css-8buf5s:last-child:not(:first-child){border-right:none;}.css-1udpy4x{min-width:100%!important;}.css-1ywpeb7{-webkit-transition:width 0.25s ease;transition:width 0.25s ease;padding:0;width:0;}.css-1oux30j{max-height:100%;overflow:auto;margin:15px 20px;}.css-1oux30j div[class*="MuiFormControl"]{margin-bottom:20px;}.css-kt535y{false;}.css-1odnewp{margin-top:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-1odnewp button{-webkit-flex:1;-ms-flex:1;flex:1;margin-right:15px;}.css-1odnewp button:last-child{margin-right:0;}"

Answer 1

正如您在下面看到的，我们有一个组件有时会为样式返回一个 bool 值 if

props.mode === 'boxed' 为 false。

当我们更改为三元运算符以确保始终返回字符串时，它又可以工作了。不幸的是，测试套件抛出的错误没有用，因此围绕实际被测试的 View 中使用的所有依赖组件进行了大量挖掘。

import styled from 'react-emotion';
import TextField from '../some/path';

// bad code
const StyledTextField = styled(TextField)(props => `
  ${props.mode === 'boxed' && (` 
    // some styles here
  `)}
`);

// fix
const StyledTextField = styled(TextField)(props => `
  ${props.mode === 'boxed' 
    ? (` 
      // some styles here
    `)
    : ''
  }
`);