0

我正在尝试编写一些基本测试，但发现，最接近和其他遍历功能似乎不起作用
我的设置是 react 16 (create-react-app) 和 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 似乎既不适用于类名也不适用于 div，对于最接近的
包含和子项也是如此，
这里是我的 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>
4

1 回答 1

1

.contains如果您在浅渲染的根组件（在本例中为）上运行， Enzyme 不会返回 true Overview。它可以在子组件上正常工作。

从 Enzyme 的角度来看，这种行为很好 - 不需要断言根已被渲染，因为您已经明确地渲染了它。

我认为这是唯一的问题，因为这会使您的测试在运行之前就失败.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
  });
});

于 2018-12-12T13:47:19.707 回答