Jest with Styled Components error: Syntax error parsing expected css: missing '}'

Question

I'm trying to use jest with styled components to test a component's styles, and I'm having the error:

Syntax error parsing expected css: missing '}' here
Failing css:
[object Object]

My component is a simple link with styled-components:

import styled from 'styled-components'

export const Link = styled.a`
  color: #fff;
`

My test:

describe('Link', () => {
  it('should display color on the link', () => {
    render(<Link href="/x">Test</Link>)
  }

  expect(screen.getByRole('link', { name: /test/i })).toHaveStyle({ color: '#fff' })
}

I'm running the npm react-scripts test.

I've tried to import 'jest-styled-components' and '@testing-library/jest-dom'

slideshowp2 slideshowp2 · Accepted Answer · 2020-11-25T03:57:45

It is probably because of the version of @testing-library/jest-dom package you are using.

For v4.2.4, toHaveStyle(css: string), as you can see, the matcher only support string parameter. Therefore, you should use

expect(link).toHaveStyle(`color: #fff`);

It supports JS object parameter since v5.1.0

Jest with Styled Components error: Syntax error parsing expected css: missing '}'

1 Answers