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 Sankhla, Feb 14 '18 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, Feb 14 '18 at 18:21

score 2 · Answer 1 · answered Feb 12 '18 at 22:07

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/>.

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! — Kevin Danikowski, Feb 12 '18 at 22:50
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. — wgoodall01, Feb 12 '18 at 22:55
`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 — Kevin Danikowski, Feb 12 '18 at 23:04

Testing for className's CSS using Enzyme/React

1 Answers1