将@testing-library/jest-dom 版本从 4.0.0 更新到 4.2.0 时反应测试用例失败

Question

将@testing-library/jest-dom 版本从 4.0.0 更新到 4.2.0 时，用于通过使用 toHaveStyles 检查样式的反应测试用例失败。使用 react-testing-library 进行测试：

test('renders component', () => {
const { getByTestId } = render(<Temp labels={labels} justify="end" />);
expect(getByTestId('temp')).toHaveStyle('justifyContent: end');

});

上述测试失败并抛出如下错误：

 ● Temp › renders component

expect(element).toHaveStyle()

- Expected

- justifyContent: end;
+ 

  24 |   test('renders component', () => {
  25 |     const { getByTestId } = render(<Temp labels={labels} justify="end" />);
> 26 |     expect(getByTestId('temp')).toHaveStyle('justifyContent: end');
     |                                   ^
  27 |   });
  28 | });
  29 | 

  at Object.toHaveStyle (src/components/Temp/tests/Temp.test.js:26:35)

有人知道这个问题的解决方法吗？

Answer 1

toHaveStyle 使用 rendered 样式，因此您的测试需要：

expect(getByTestId('temp')).toHaveStyle('justify-content: end')

将@testing-library/jest-dom 版本从 4.0.0 更新到 4.2.0 时反应测试用例失败

On updating @testing-library/jest-dom version from 4.0.0 to 4.2.0 react test case is failing

reactjs

jestjs

material-ui

react-testing-library