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.

Not yet. Tried different approaches but the fact that it is a pseudo selector makes it gnarlier — cuadraman
– cuadraman, Commented Mar 10, 2015 at 18:56
Could you post the actual code that you are writing this test for? — alengel
– alengel, Commented Apr 16, 2015 at 3:08

creimers · Accepted Answer · 2018-10-24 08:37:28Z

21

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

answered Oct 24, 2018 at 8:37

creimers

5,3474 gold badges36 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sebastianf182 · Accepted Answer · 2017-12-29 04:58:25Z

6

To anyone finding this thread, Jest Enzyme now has a assert to test Styles: toHaveStyle: https://github.com/blainekasten/enzyme-matchers/blob/master/README.md#tohavestylestylekeystring-stylevalueany

The problem for me was that from seeing the code, is only testing objects and I have many styles which are arrays (I am using React Native BTW) so it was not working for me.

I am doing this method to test for a particular style:

const render = wrapper.dive();
expect(render.find("[testID='bannerStamp']").get(0).props.style[0].right).toBe(7);

answered Dec 29, 2017 at 4:58

sebastianf182

9,9783 gold badges38 silver badges67 bronze badges

Comments

Patrick Burtchaell · Accepted Answer · 2017-01-04 04:43:59Z

2

You could test styles though snapshot tests, but Jest does not support evaluating component styles through assertions—that is to say through expect.

In order to do this, you need to combine Jest with enzyme, chai, and chai-enzyme.

This combination will allow you to write tests like this simple example:

it('should render style', () => {
  chai.expect(shallow(
    <div
      style={{
        left: '4rem'
      }}
    />
  )).to.have.style('left', '4rem');
});

First, create a setup file and add it to the the jest.setupFiles array in package.json. See the Jest documentation for an overview of this option.

This is my setup file:

// test/setup.js
import React from 'react';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
import { shallow, render, mount } from 'enzyme';

// Add commonly used methods and objects as globals
global.chai = chai;
global.mount = mount;
global.React = React;
global.render = render;
global.shallow = shallow;

chai.use(chaiEnzyme());

This is my package.json:

{
  "jest": {
    "setupFiles": [
      "./test/setup.js"
    ]
  }
}

Now, when necessary, you are able to access the Chai assertions API through chai.expect and the Jest assertions API through expect.

answered Jan 4, 2017 at 4:43

Patrick Burtchaell

4,1321 gold badge17 silver badges25 bronze badges

1 Comment

Vadorequest Over a year ago

There is a new way using ./src/setupTests.js file with Jest. It basically does what you did, but it's automatic and the only way to make a setup file if you're using something like create-react-app. github.com/facebookincubator/create-react-app/issues/545

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related