Jest-dom выдает ошибку TypeError: expect().toHaveStyle не является функцией

Я пытаюсь использовать 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'

reactjs jestjs react-testing-library styled-components jest-dom
person Julio    schedule 24.11.2020    source источник

Ответы (4)


arrow_upward
1
arrow_downward

вы можете попробовать это:

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

меня устраивает.

person c denny    schedule 25.11.2020
comment
Я получаю: TypeError: Object.defineProperty вызывается для не-объекта в Function.defineProperty (‹anonymous›) - person bluprince13; 24.07.2021

arrow_upward
0
arrow_downward

Начиная с @testing-library/dom v5.0.0, есть некоторые критические изменения сравнить/v4.2.4...v5.0.0

До v5.0.0 вы должны использовать import '@testing-library/jest-dom/extend-expect';

Начиная с версии 5.0.0, вы должны использовать import '@testing-library/jest-dom';

Вы неправильно добавили сопоставители для expect. Вот почему вы получаете ошибку.

person slideshowp2    schedule 25.11.2020

arrow_upward
0
arrow_downward

Используйте в своем пакете следующие версии:

"dependencies": {
 "@types/styled-components": "5.9.1",
 "styled-components": "^5.2.0"

},

и импортируйте этот пакет в свой тестовый файл:

import '@testing-library/jest-dom/extend-expect'

person Amanda Hoffmann    schedule 23.03.2021

arrow_upward
0
arrow_downward

Из https://testing-library.com/docs/svelte-testing-library/setup/

6.2 Добавьте следующее в конфигурацию Jest в package.json

{
  "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
}

Вы можете добавить его в свой jest.config.js, поскольку он у вас уже есть, а не package.json.

person bluprince13    schedule 24.07.2021