How to unit test a style of a React Component using Jest.js?

Question

I'm building unit tests with JestJS (npm jest-cli) and need to validate that a ReactJS element contains the CSS styles that I'm looking for.

I tried to check

it('should highlight the selected option in the drop-down list', function() {
    var iconTriangleDown = TestUtils.findRenderedDOMComponentWithClass(dropList, 'icon-triangle-down');

    var iconHeight = window.getComputedStyle(iconTriangleDown.getDOMNode(), null).height;

    expect(iconHeight).notToEqual(''); 
});

That results in iconHeight === '' instead of a value of pixels.

I wonder if window is being mocked by Jest. Or if window isn't supported.

Answer 1

This is fairly easy using jest-dom and react-testing-library.

Tiny example:

component.js

const Component = () => <div style={{left: '4rem'}}>Left component</div>;

component.test.js

test("left shoud be 4rem", () => {
    const { getByText } = render(<Component />);
    expect(getByText(/left component/i).parentElement).toHaveStyle(`left: 4rem`);
})