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

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

Solution

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