Фермент не работает должным образом с реакции 16 (реагировать создать приложение) - PullRequest
Новая
       32

Фермент не работает должным образом с реакции 16 (реагировать создать приложение)

0 голосов
/ 12 декабря 2018

Я пытаюсь написать некоторые базовые тесты, но, похоже, функции поиска, ближайших и других функций обхода не работают
Моя установка - реакция 16 (создание-реакция-приложение) и 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 не работает ни с именами классов, ни с divs, то же самое для ближайших
содержит и дочерних работ
вот мой 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>

1 Ответ

0 голосов
/ 12 декабря 2018

Фермент не вернет true, если вы запустите .contains для корневого компонента, который вы отрендерили (в данном случае, Overview).На дочернем компоненте он будет работать нормально.

Это поведение прекрасно с точки зрения энзима - не должно быть необходимости утверждать, что корень отрисован, поскольку вы явно его отрендерили.

Я предполагаю, что это единственная проблема, так как это может привести к тому, что ваш тест не пройдёт до того, как он запустится .closest('div').

Вот краткий пример прохождения теста: 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
  });
});
...