React, Emotion, and Jest Snapshots: Error: property missing ':'
React, Emotion, and Jest Snapshots: Error: property missing ':'
我有一个可重用的 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;}"
正如您在下面看到的,如果
,我们有一个有时会为样式返回布尔值的组件
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 组件库和仪表板库。
我的仪表板使用了我的可重用存储库中的许多组件,但我对仪表板存储库进行了一项测试,但我无法通过。
可重用组件 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;}"
正如您在下面看到的,如果
,我们有一个有时会为样式返回布尔值的组件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
`)
: ''
}
`);