Question

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

我的仪表板使用了我的可重用仓库中的许多组件，但是我对仪表板仓库进行了一项无法通过的测试。

可重用组件存储库具有以下版本，所有测试都通过：

"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

如您在下面看到的，我们有一个有时会为

样式返回布尔值的组件。

props.mode === 'boxed'是错误的。

当我们更改为三元运算符以确保始终返回字符串时，它将再次起作用。不幸的是，测试套件引发的错误没有用，因此要花很多时间来挖掘在实际测试的视图中使用的所有依赖项组件。

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
    `)
    : ''
  }
`);

React，Emotion和Jest快照：错误：属性缺少“：”

1 个答案: