Jest-styled-components: Snapshot returns undefined:10:121: missing '{' when props are used in keyframes

[mealeyst]

First off, just wanted to say I love the library and appreciate all the effort that have been put into this!

So I was getting underway writing tests for my company's pattern library and I was writing a test for a component and I was getting the following error message:
undefined:10:121: missing '{'

I had gotten the same issue when not using the css template literal elsewhere in the styled components however I managed to track down the issue to my keyframes declaration. I am using props in the keyframes to animate width and stroke, but it appears that there might be a possible issue trying to use props in the keyframes template literal.

The Code:

// Checkmark.js
import React from 'react'
import PropTypes from 'prop-types'
import styled, { keyframes } from 'styled-components'

import theme from '../theme/theme'

const UnstyledCheckmark = (props) => {
  return (
    <svg {...props} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.5 26.5'>
      <polyline points='7,14 11,17.7 18.6,9.5'  />
    </svg>
  )
}

const animateCheckmarkIn = (props) => keyframes`
  0% {
    width: 0;
    stroke-dashoffset: 15;
    stroke: transparent;
  }
  50% {
    width ${props => props.width};
    stroke-dashoffset: 15;
    stroke: ${props => props.stroke};
  }
  100% {
    width ${props => props.width};
    transform: scaleX(1);
    stroke-dashoffset: 0;
  }
`

const Checkmark = styled(UnstyledCheckmark)`
  ${props => props.width ? `width: ${props.width};` : ''}
  fill: none;
  stroke: ${props => props.stroke};
  stroke-width: 2;
  > polyline {
    stroke-linecap: round;
    stroke-dasharray: 16;
    stroke-dashoffset: 0;
    animation-name: ${props => animateCheckmarkIn};
    animation-duration: 0.5s
  }
`

Checkmark.propTypes = {
  stroke: PropTypes.string,
  width: PropTypes.string
}

Checkmark.defaultProps = {
  width: '2.6rem',
  stroke: theme.colors.white
}

/** @component */
export default Checkmark

// Checkmark.test.js
import React from 'react'
import { shallow } from 'enzyme'
import { css, keyframes } from 'styled-components'
import 'jest-styled-components'

import { theme } from '../theme'
import Checkmark from './Checkmark'

describe('(Base Component) UnstyledCheckmark', () => {
  test('matching the snapshot', () => {
    const component = shallow(<Checkmark theme={theme} />)
    expect(component).toMatchSnapshot()
  })
})

Removing: animation-name: ${props => animateCheckmarkIn}; appears to fix the error I am getting.

[mealeyst]

UPDATE:

So of course I happen to get things working a few minutes AFTER submitting this issue! I managed to get the test to pass by doing the following:

const animateCheckmarkIn = (props) => {
  return keyframes`
    0% {
      width: 0;
      stroke-dashoffset: 15;
      stroke: transparent;
    }
    50% {
      width: ${props.width};
      stroke-dashoffset: 15;
      stroke: ${props.stroke};
    }
    100% {
      width: ${props.width};
      transform: scaleX(1);
      stroke-dashoffset: 0;
    }
  `
}

I hope this saves someone else the headache that I was suffering trying to figure out why my snapshot tests were failing! 😉

I will see if I can actually figure out why the error was being tossed to begin with.