什么时候应该在 Enzyme/React 测试中使用渲染和浅层? [英] When should you use render and shallow in Enzyme / React tests?

问题描述

在发布这个问题之前，我尝试在 sqa stackexchange 中搜索，但我没有找到关于浅层和渲染的帖子，所以我希望有人能在这里帮助我.

prior to posting this question, I tried to search in sqa stackexchange but I found no post about shallow and render there, so I hope someone can help me out here.

我什么时候应该在测试 React 组件时使用浅层和渲染?根据airbnb的文档，我对两者的区别发表了一些意见:

When should I use shallow and render in testing react components? Based on the airbnb docs, I've made some opinions on the difference of the two:

1. 因为shallow 是将组件作为一个单元进行测试，所以它应该用于父"组件.(例如表格、包装器等)

1. Since shallow is testing components as a unit, so it should be used for 'parent' components. (ex. Tables, Wrappers, etc.)

渲染用于子组件.

我问这个问题的原因是我很难弄清楚我应该使用哪个(尽管文档说它们非常相似)

The reason I asked this question, is that I'm having a hard time to figure out which one I should use (though the docs say that they're very similar)

那么，我如何知道在特定场景中使用哪个?

So, how do I know which one to use in a specific scenario?

推荐答案

根据 Enzyme 文档:

As per the Enzyme docs:

mount(<Component/>) 用于完整 DOM 渲染非常适用于您的组件可能与 DOM api 交互的用例，或者可能需要完整的生命周期以进行全面测试组件(即 componentDidMount 等)

mount(<Component />) for Full DOM rendering is ideal for use cases where you have components that may interact with DOM apis, or may require the full lifecycle in order to fully test the component (ie, componentDidMount etc.)

对比

shallow(<Component/>) 用于浅层渲染有助于限制您将组件作为一个单元进行测试，并确保您的测试不会间接断言子组件的行为组件.

shallow(<Component />) for Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components.

对比

render 用于将 React 组件渲染为静态 HTML 并分析生成的 HTML 结构.

render which is used to render react components to static HTML and analyze the resulting HTML structure.

您仍然可以在浅层渲染中看到底层的节点"，例如，您可以使用 AVA 作为规范执行者:

You can still see the underlying "nodes" in a shallow render, so for example, you can do something like this (slightly contrived) example using AVA as the spec runner:

let wrapper = shallow(<TagBox />);

const props = {
    toggleValue: sinon.spy()
};

test('it should render two top level nodes', t => {
    t.is(wrapper.children().length, 2);
});

test('it should safely set all props and still render two nodes', t => {
    wrapper.setProps({...props});
    t.is(wrapper.children().length, 2);
});

test('it should call toggleValue when an x class is clicked', t => {
    wrapper.setProps({...props});
    wrapper.find('.x').last().simulate('click');
    t.true(props.toggleValue.calledWith(3));
});

注意渲染、设置道具和查找选择器甚至合成事件都支持浅层渲染，所以大多数时候你可以直接使用它.

Notice that rendering, setting props and finding selectors and even synthetic events are all supported by shallow rendering, so most times you can just use that.

但是，您将无法获得组件的完整生命周期，因此如果您希望在 componentDidMount 中发生某些事情，您应该使用 mount();

But, you won't be able to get the full lifecycle of the component, so if you expect things to happen in componentDidMount, you should use mount(<Component />);

此测试使用 Sinon 来监视组件的 componentDidMount

This test uses Sinon to spy on the component's componentDidMount

test.only('mount calls componentDidMount', t => {

    class Test extends Component {
        constructor (props) {
            super(props);
        }
        componentDidMount() {
            console.log('componentDidMount!');
        }
        render () {
            return (
                <div />
            );
        }
    };

    const componentDidMount = sinon.spy(Test.prototype, 'componentDidMount');
    const wrapper = mount(<Test />);

    t.true(componentDidMount.calledOnce);

    componentDidMount.restore();
});

以上不会通过浅渲染或渲染

render 只会给你提供 html，所以你仍然可以做这样的事情:

render will provide you with the html only, so you can still do stuff like this:

test.only('render works', t => {

    // insert Test component here...

    const rendered = render(<Test />);
    const len = rendered.find('div').length;
    t.is(len, 1);
});

希望这有帮助！

这篇关于什么时候应该在 Enzyme/React 测试中使用渲染和浅层?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！