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

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

Поскольку @testing-library/domv5.0.0, есть критические изменения. compare / v4.2.4...v5.0.0

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

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

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

Answer 2

Из 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.

Answer 3

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

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

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

Answer 4

установить компоненты в стиле шутки

      npm i -D install jest-styled-components

затем используйте.toHaveStyleRule

Пример:

      import React from 'react';
import { render } from 'react-testing-library';
import Button from '../Button';

import 'jest-styled-components';

describe('<Button />', () => {
  it('should render text', () => {
    const { getByText } = render(<Button text="Button" />);
    expect(getByText('Button')).not.toBeNull();
  });

  it('should have correct style with background color', () => {
    const { getByText } = render(<Button text="Button" color="#fff" />);
    expect(getByText('Button')).toHaveStyleRule('background', '#fff');
  });
});

Answer 5

Я нашел ответ по этой ссылке

Если быть кратким:

1. Бегать:npm install --save-dev @testing-library/jest-native
2. Добавлять:import '@testing-library/jest-native/extend-expect'в ваш тестовый файл
3. Добавлять:import { toHaveStyle } from '@testing-library/jest-native/dist/to-have-style'
4. Добавлять:expect.extend({toHaveStyle})
5. Наконец, у вас естьtoHaveStyleдля вашего ожидания

Образец кода:

      /**
 * @format
 */

import 'react-native';
import '@testing-library/jest-native/extend-expect';
import React from 'react';
import App from '../App';

import {render, screen} from '@testing-library/react-native';
import { toHaveStyle } from '@testing-library/jest-native/dist/to-have-style';

expect.extend({toHaveStyle})

it('renders correctly', () => {
    render(<App/>);

    const text = screen.getByTestId('Sample Text')
    expect(text).not.toBeNull();

    const button = screen.getByTestId('Sample Button')
    expect(button).not.toBeNull();
    expect(button).toHaveStyle({
        backgroundColor: 'transparent'
    })
});

Answer 6

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

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

},

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

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