酶促浅层渲染子组件,在包升级时更改行为

时间:2019-07-03 18:54:23

标签: reactjs jestjs enzyme

我目前正在努力为我拥有的项目升级npm依赖关系,并且由于组件的浅层渲染行为已更改,因此遇到了许多损坏的测试用例。

我已经从中迁移了react / enzyme / jest依赖项

"react": "15.6.1",
"enzyme": "3.3.0",
"enzyme-adapter-react-15": "1.0.5",
"jest": "23.6.0",

"react": "16.8.6",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0"
"jest": "24.8.0",

在先前的组合中,以下测试成功:

describe("TpidTenantList", () => {
    it("test components", () => {
        const Foo = props => <div className="Foo" />;
        const Bar = props => (
            <div className="Bar">
                <Foo />
                <Foo />
            </div>
        );

        const wrapper = shallow(<Bar />);
        expect(wrapper.find(Foo).length).toBe(2);
    });
});

但是,对于新的组合,此测试失败。查看包装器的渲染html,我可以看到浅层实际上已经渲染了Foo子组件,产生了

<div class="Bar">
    <div class="Foo"></div>
    <div class="Foo"></div>
</div>

如果我改为将测试更改为.find(".Foo"),则测试通过,但是,某些要测试的组件包含HighChart和其他渲染困难的库。

我尝试包装被测组件,并为浅层组件提供disableLifecycleMethods选项,但是完整的组件树似乎正在呈现。

理想情况下,我想将行为强制为旧组合库的行为,或者,如果有首选模式,我很乐意采用这种行为。

0 个答案:

没有答案