reactjs Jest-dom给予错误“类型错误:expect(...).toHaveStyle不是函数”

c6ubokkw  于 2023-01-08  发布在  React
关注(0)|答案(6)|浏览(173)

我尝试使用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'
bd1hkmkf

bd1hkmkf1#

你可以试试这个:

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

对我很有效。

axzmvihb

axzmvihb2#

https://testing-library.com/docs/svelte-testing-library/setup/开始
6.2将以下内容添加到package.json中的Jest配置中

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

您可以将它添加到您的jest.config.js,因为您已经有了它,而不是package.json

4smxwvx5

4smxwvx53#

@testing-library/dom v5.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的匹配器,这就是您得到错误的原因。

oxf4rvwz

oxf4rvwz4#

在您的软件包中使用以下版本:

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

},
并将此包导入到测试文件中:
第一个月

uurv41yg

uurv41yg5#

我从这个link中找到了答案
简而言之:
1.运行:x1月1x
1.将:import '@testing-library/jest-native/extend-expect'添加到测试文件
1.加:import { toHaveStyle } from '@testing-library/jest-native/dist/to-have-style'
1.加:expect.extend({toHaveStyle})
1.最后,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'
    })
});
ohtdti5x

ohtdti5x6#

安装笑话样式组件

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

相关问题