How to Test CSS Properties for a React Component Using React-Testing-Library

React testing library: Test styles (specifically background image)

getByText won't find the image or its CSS. What it does is to look for a DOM node with the text you specified.

In your case, I would add a data-testid parameter to your background (<div data-testid="background">) and find the component using getByTestId.

After that you can test like this:

expect(getByTestId('background')).toHaveStyle(`background-image: url(${props.image})`)

Make sure you install @testing-library/jest-dom in order to have toHaveStyle.

React testing library only works for inline styles

You may try to use window.getComputedStyle, see also @testing-library/dom window.getComputedStyle "Not implemented" error even after setting computedStyleSupportsPseudoElements: true

Get list of styles in React Testing Library

I am not sure because you didn't attach the classes css styling but I can see you are accessing firstElementChild which in the example you provided is a span with no classes. I assume that this span doesn't have any styling but on the page it looks like it has the background color you are trying to assert while in fact it's the parent element who is styled with that color so what you get is empty strings because there is no background color on the child element itself.

Generally it is not recommended to write tests for styling but if you find yourself doing that a lot, I would recommend adding jest-dom which has many useful assertions like toHaveClass or toHaveStyle which would make your tests more concise and more readable.

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

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.

---

Related Topics