0

On updating @testing-library/jest-dom version from 4.0.0 to 4.2.0 react test cases which are used to check styles by using toHaveStyles are failing. Test using react-testing-library:

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

});

the above test is failing and it's throwing an error as follows:

 ● 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)

Does anyone know the fix to this issue?

El Aoutar Hamza
  • 3,878
  • 2
  • 10
  • 19
Swetha D
  • 103
  • 1
  • 9
  • Hint: you are matching style `justifyContent` with prop `justify` which dont match. – Rikin Oct 29 '19 at 11:44
  • I handled that in Temp component I gave styles based on justify prop ( styles:{ justifyContent: props => (props.justify ? props.justify : 'start')}) That is not the reason for failing test. – Swetha D Oct 29 '19 at 11:52

1 Answers1

2

toHaveStyle works with the rendered style, so your test needs to be:

expect(getByTestId('temp')).toHaveStyle('justify-content: end')
El Aoutar Hamza
  • 3,878
  • 2
  • 10
  • 19