Enzyme not working properly with react 16 (react create app)

Question

I am trying to write some basic tests, but find, closest and other traversing functions seem not to work
My setup is react 16 (create-react-app) and jest

import React from 'react';
import Overview from './Overview';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

describe('Overview Page', () => {
    it('renders header', () => {
        const wrapper = shallow(<Overview />);
        expect(wrapper).toHaveLength(1);
        expect(wrapper.contains(<Overview />)).toBe(true);
        expect(wrapper.closest('div')).toHaveLength(1);
        console.log(wrapper.html());
        console.log('------------');
        console.log(wrapper.children().html());
        console.log('------------');
        //console.log(wrapper.find('.container').render());
        console.log(wrapper.html());
        //expect(wrapper.find(Overview)).to.have.lengthOf(3);
    });

});

find seems not to work neither with classnames nor with divs, same for closest
contains and children works
here is my html (console.log(wrapper.html());)

<h1 class="u-hd">My Area</h1><header class="header"><div class="header__elem header__elem--nav"><div class="header__col header__col--brand"><a href="/" class="logo"><img src="logo.svg" alt="Wee"/></a></div><nav class="header__col header__col--nav nav"><h2 class="u-hd">Main Navigation</h2><a class="nav__item" href="/">Reisen &amp; Freizeit</a><a class="nav__item" href="/">Wohnen &amp; Technik</a><a class="nav__item" href="/">Mode &amp; Buty</a><a class="nav__item" href="/">Dienstleistungen</a><a class="nav__item" href="/">Sonstige</a><a class="nav__item" href="/">Alle Shops</a></nav><div class="header__col header__col--menu menu-bar"><div class="menu-bar__elem"><span class="menu-bar__item lang"><span>ENG</span></span></div><div class="menu-bar__elem"><div class="menu-bar__item notification"><span class="ico ico--md ico--notification"></span><span class="notification__count">2</span></div></div><div class="menu-bar__elem"><span class="menu-bar__item avatar"><span class="avatar__elem"></span></span><div class="menu-bar__item menu-bar__item--user"><span>Constantin F.</span></div></div></div></div><div class="header__elem"><nav class="header__col nav nav--sub"><h2 class="u-hd">My Wee Navigation</h2><a class="nav__item" href="/"><span class="ico ico--md ico--home"></span>Übersicht</a><a class="nav__item" href="/"><span class="ico ico--md ico--cashback"></span>Mein Cashback</a><a class="nav__item" href="/"><span class="ico ico--md ico--money"></span>Auszahlungen</a><a class="nav__item" href="/"><span class="ico ico--md ico--settings"></span>Einstellungen</a><a class="nav__item" href="/"><span class="ico ico--md ico--envelop"></span>Nachrichten</a></nav></div></header><main class="main"><div class="container"><span>Hallo, Constantin Finkbeiner (User)</span></div></main>

Answer 1

Enzyme won't return true if you run .contains on the root component that you shallow rendered (in this case, Overview). It would work fine on a child component.

This behavior is fine from Enzyme's perspective - there shouldn't be any need to assert that the root is rendered since you have explicitly rendered it.

I assume that's the only problem, as that would make your test fail before it even gets to running .closest('div').

Here's a quick example of a passing test: https://codesandbox.io/s/k0m65o467o

describe("Overview Page", () => {
  it("renders header", () => {
    const wrapper = shallow(<Overview />);
    expect(wrapper).toHaveLength(1);
    expect(wrapper.contains(<Overview />)).toBe(false); // .contains won't return true for the root of the shallow render
    expect(wrapper.contains(<Child />)).toBe(true); // but works fine on children
    expect(wrapper.closest("div")).toHaveLength(1); // works as expected
  });
});