Enzyme / React浅层渲染是否昂贵?

时间:2016-08-03 16:29:47

标签: reactjs enzyme ava

我们正在讨论关于酶shallow renders的工作以及每次测试的重新运行时间。无论是方法,点击次数,选择器长度等,我建议我们的测试可能会运行得更快,如果我们在测试运行之前对组件进行浅层渲染,而每个

是否有专家可以指出哪种方式会更快,哪种方式存在任何陷阱?这些例子使用的是AVA跑步者(为了讨论而略显设计)。

例如,这是一种方式( A )...

import TagBox from '../TagBox';
const props = { toggleValue: sinon.spy() };
let wrapper = {};

test.before(t => {
    wrapper = shallow(<TagBox />);
});

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

test('it should safely set props', t => {
    wrapper.setProps({...props});
    t.is(wrapper.children().length, 2);
});

test('it should call when clicked', t => {
    wrapper.setProps({...props});
    wrapper.find({tagX : true}).last().simulate('click');
    t.true(props.toggleValue.calledOnce);
});

另一个( B )......

import TagBox from '../TagBox';

test('it sets value to null ...', t => {
    const props = {multiple: false};
    const wrapper = shallow(<TagBox {...props} />);
    t.is(wrapper.state('currentValue'), null);
});

test('it sets value to [] if multiple', t => {
    const props = {multiple: true};
    const wrapper = shallow(<TagBox {...props} />);
    t.deepEqual(wrapper.state('currentValue'), []);
});

test('it does not use value if ...', t => {
    const props = = {value: 3};
    const wrapper = shallow(<TagBox {...props} />);
    t.is(wrapper.state('currentValue'), null);
});

// etc. etc.

请注意,在测试B中,每个测试都有一个新的浅包装器,基本上什么都没有改变但是道具。

在100次测试过程中,您认为完成时间的差异是什么?

也有可能在较高范围内进行一次浅层渲染(测试A)会污染测试状态吗?

2 个答案:

答案 0 :(得分:3)

浅层渲染器设计得很快,因为它只渲染单个组件。因此,当您为每个测试创建新组件时,通常不会遇到任何性能问题。

此外,如果TagBox组件具有内部状态,则示例A可能无法正常工作。这就是为什么示例B更适合编写测试的方法。

答案 1 :(得分:1)

shallow可能不是你的问题,因为它被设计为渲染组件的最快方式,而不会级联所有它的子渲染。

你可以考虑更改你的测试运行引擎然后,例如,与Jest相比,AVA有点慢。我在一年前做了这个改变,而且速度快了很多。 Jest还在其基础套件中提供了更多有用的东西,比如示例的模拟函数。

更多信息:https://facebook.github.io/jest/