Question

我正在尝试编写一些基本测试，但是查找，最接近和其他遍历功能似乎不起作用
我的设置是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);
    });

});

查找似乎不适用于类名或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>

Answer 1

如果在浅层渲染的根组件（在这种情况下为.contains）上运行Overview，酶将不会返回true。它将在子组件上正常工作。

从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
  });
});

酶无法与React 16正常工作（React Create App）

1 个答案: