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'

Lin Du · Accepted Answer · 2020-11-25 03:57:45Z

2

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

answered Nov 25, 2020 at 3:57

Lin Du

104k139 gold badges341 silver badges575 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related