带有样式化组件的Jest错误：语法错误分析预期css:缺少“}”

Question

我试图使用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反应脚本测试。

我已尝试导入“jest样式的组件”和“@testing library/jest dom”

Answer 1

可能是因为你使用的@testing-base/jest-dom包的版本。

对于v4.2.4，toHaveStyle（css： string），如您所见，匹配器只支持string参数。因此，你应该使用

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

从v5.1.0开始支持JS对象参数