Блог

Я пытаюсь использовать jest со стилизованными компонентами для тестирования стилей компонента, и у меня возникает ошибка:

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

Мой компонент представляет собой простую ссылку со стилизованными компонентами:

 import styled from 'styled-components'

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

Мой тест:

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

Я запускаю тест npm react-scripts.

Я попытался импортировать ‘jest-styled-components’ и ‘@testing-library / jest-dom’

Вероятно, это связано @testing-library/jest-dom с используемой вами версией пакета.

Для версии 4.2.4, toHaveStyle (css: string), как вы можете видеть, сопоставитель поддерживает только string параметр. Поэтому вам следует использовать

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

Он поддерживает параметр объекта JS начиная с версии 5.1.0