reactjs - Jest-dom 给出错误 "TypeError: expect(...).toHaveStyle is not a function"

Question

我正在尝试使用 jest-dom 来测试组件的样式，但出现错误:

"TypeError: expect(...).toHaveStyle is not a function"

我的组件是一个带有样式组件的简单链接:

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

我创建了一个设置文件(jest.config.js):

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.jest/setup.js'],
}

在项目的根目录下，我创建了 .jest/setup.js 文件并导入了 js-dom:

import '@testing-library/jest-dom'

Answer 1

你可以试试这个:

import { toHaveStyle } from '@testing-library/jest-dom'
expect.extend({ toHaveStyle })

这个对我有用。