React Enzyme Jest test component with className

Question

I am Following both the Enzyme examples for .find() and this GitHub enzyme-example-jest example to get a basic component to test and verify the outer-most element className exists, I do not understand why this does not pass:

// REACT COMPONENT

class VisitorShortcut extends Component {
//all the props & lifecycle hooks here
render() {
        return (
            <div className="visitor-shortcuts"> // <-- this className is being tested
                <div
                    onClick={e => e.stopPropagation()}
                    className="dropdown open"
                >
                    <ul
                        style={style}
                        ref="shortcutContainer"
                        className={"dropdown-menu "}
                    >
                        {results}
                    </ul>
                </div>
            </div>
        );
    }
}

// TEST FILE

import React from "react";
import { shallow, mount } from "enzyme";
import VisitorShortcut from "../VisitorShortcut";

describe("Shortcuts", () => {
  test("The main Class exists", () => {
    expect(
        (<VisitorShortcut />).find(".visitor-shortcuts").length
    ).toBe(1);
  });
});

// OUTPUT

Expected value to be (using ===):
  1
Received:
  0

if I switch to expect(wrapper.find('div.some-class')).to.have.length(3); as per Enzyme docs, the output is TypeError: Cannot read property 'have' of undefined

I am fairly sure I do not need to use the mount API instead of shallow

Thanks for helping to clarify this. It seems so basic...

Helicopter

Answer 1

The below code worked for me

import React from "react";
import { shallow, mount } from "enzyme";
import { assert } from 'chai';
import VisitorShortcut from "../VisitorShortcut";    


describe("Shortcuts", () => {
  test("The main Class exists", () => {
    const wrapper = shallow(<VisitorShortcut />);
    const visitorShortcutsWrapper = wrapper.find('.visitor-shortcuts');
    assert.equal(visitorShortcutsWrapper.length, 1);
  });
});

By the ways, I am using assert from chai package.

Posen

When I console.log(wrapper.find(".visitor-shortcuts")); the length = 0 – Helicopter

What was the solution to this? I am getting the same @PhilLucks – Litigation

I have since stopped using Enzyme – Helicopter

Answer 2

as per Enzyme doc you can do as below:

const wrapper = shallow(<VisitorShortcut />);
expect(wrapper.find("div.visitor-shortcuts").length).toBe(1)

Deweydewhirst

Answer 3

I use chai, it works.

import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import App from './App';

describe('<App />', () => {
  const wrapper = shallow(<App />);

  it('should have an App class', () => {
    expect(wrapper.find('.App')).to.have.length(1);
  });
});

Vaios

Answer 4

This works for checking whether there are two sub-elements of an element in Jest

expect(wrapper.find('.parent-class').getElements().length).toEqual(2)

Fantasm

Answer 5

For a more "complex" scenario, where your component is using multiple instances of another component (internally) and you want to check if those exist -

The below test checks there are only 2 instances of Foo component with the class name foo:

Component (to test)

export const Foo = ({className}) => <div className={className}></div>;

export const Comp = () => (
  <>
    <div className='foo'/>
    <Foo/>
    <Foo className='foo'/>
    <Foo className='foo'/>
  </>
)

Test file

import {mount} from "enzyme"
import {Comp, Foo} from "../Comp";   

describe("Comp", () => {
  it("Should have 2 Foo components with `.foo` class", () => {
    const wrapper = mount(<Comp/>);
    expect(wrapper.find(Foo).filter('.foo')).toHaveLength(2);
  })
})

The combination of find & filter allows to use the real component reference find(Foo) and not assumed displayName "Foo", which is prone to changes. This approach less coupled and I believe to be less error-prone.

Volpe