Testing for className's CSS using Enzyme/React

Question

I can't find how to check the CSS of a div in my react component.

You can check inline styles (How can I test React component's style with Jest + Enzyme?) But this doesn't let me check my className='App-header' of my component.

I have successfully added chai-jquery, however I don't know how to get my component to fully load, I only get <body></body returned.

Answering 1 of 3 will solve my problem:

1. How can I test/check the class CSS of my div that I find using expect(wrapper.find('#id'))... without having the <div>'s CSS as an inline style.

2. How can I make sure my full component renders because right now jquery only returns <body></body>, but my chai/enzyme returns my full component by using shallow(<App />)?

3. Is there a way to test CSS style sheets? MAybe this is a workaround.

.

it('should have a header with display: block', (done)=>{
        const wrapper = shallow(<App />);

        const body = $('body')
        console.log(body) // Returns <body></body>
        expect(body).exist; // Returns true
        expect(body).to.have.css('display', 'block'); //nothing in body, doesn't work

        expect(wrapper.find('#body').get(0).props).to.have.property({display: 'block'}) //not in the props because CSS comes from className 

        done()
    })

References:

Failed attempt using assert (how to test showing an element after a click?)

Great Ideas but require inline styles (How to test style for a React component attribute with Enzyme)

do you want to check that body has a class App-header and this class contains display: block as style in it ? — Hemant
– Hemant, Commented Feb 14, 2018 at 12:47
basically. I would like to just see if the body which has App-header class has anywhere in it a display: block, but I can also double check the class. But if I do this I may as well just make sure the class is present since I will know the CSS for that class. If there are other classes though, I want the test to look at those classes that the body has too — Kevin Danikowski
– Kevin Danikowski, Commented Feb 14, 2018 at 18:21

wgoodall01 · Accepted Answer · 2018-02-12 22:07:44Z

2

In order to render the whole component into a DOM, you need to call enzyme.mount(<Component/>). When a global.document and a global.window are defined (like from jsdom), Enzyme can render your component into a mocked DOM. You can then call wrapper.getDOMNode() to get a wrapper's underlying DOM element. For example:

import jsdom from "jsdom";
import {mount} from "enzyme";

const dom = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.document = dom;
global.window = dom.defaultView;

it('should have a header with display: block', (done)=>{
    const wrapper = mount(<App />); // note `mount()`, not `shallow()`. 

    expect(wrapper.find('#body').get(0).getDOMNode().getComputedStyle()).to.have.property({display: 'block'})  

    done()
})

However, as it currently stands, jsdom will not pull in external stylesheets---although support for <style/> tags was recently added, but instead of testing for styles, it might make more sense to check for a specific element, like a <h1/> or a <h2/>.

answered Feb 12, 2018 at 22:07

wgoodall01

1,90814 silver badges21 bronze badges

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

3 Comments

Kevin Danikowski Over a year ago

Thank you, I have heard from a few people maybe testing for styles doesn't make sense. Although I will try getDOMNode() and getComputedStyle(), thank you!

wgoodall01 Over a year ago

Also, another useful technique is snapshot testing -- basically diffing the output of a component with the last version. It helps to avoid writing finicky test cases checking for individual elements and the like that have to be updated every version.

Kevin Danikowski Over a year ago

getDOMNode was not a function, any idea why? Also, is it necessary to specify your jsdom like that, I had mine set to jsdom.jsdom('') but changed it when I saw yours

Collectives™ on Stack Overflow

Testing for className's CSS using Enzyme/React

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related