React, Emotion, and Jest Snapshots: Error: property missing ':'

Question

I have a reusable react components repo and dashboard repo.

My dashboard uses many of the components from my reusables repo, but I have one test on the dashboard repo that I cannot get to pass.

The reusable components repo has these versions, all test pass:

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

The dashboard repo has these versions, and only one test is broken:

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

The broken test uses react-test-renderer to make the snapshot of the component. One of the components being tested looks like such:

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;
    }
  }
`;

The error stack:

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;}' 
      }

Error that is thrown by Jest where it mentions all the styles it had issues with:

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

I spent quite some time facing the same issue. I am using styled components library and issue occurred due to invalid css property in one of the style files. Unfortunately, React doesn't capture this issue on rendering.

The issue in my component style:

background -color: red;

I fixed the above by updating the style to (remove whitespace):

background-color: red;

Highly recommend to check the index of your style file in case you are using styled components library.

Answer 2

As you can see below, we had a component that sometimes returned a boolean for the style if

props.mode === 'boxed' was false.

When we changed to a ternary operator to ensure a string is always returned, then it works again. Unfortunately, the error being thrown by the test suite was not useful, so it took a lot of digging around all the dependency components that were used in the view actually being tested.

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