Reactjs 酶/酶是否昂贵？

我们正在工作中讨论酶和每次测试重新运行的时间。无论是方法、单击、选择器长度等，我建议如果我们在测试运行之前对组件进行一次浅层渲染，那么我们的测试可能会运行得更快

有没有专家能指出哪种方法更快，哪种方法都有缺陷？这些示例使用的是runner（为了便于讨论，有些做作）

例如，这里有一种方法（A）

从“../TagBox”导入标记框；
const props={toggleValue:sinon.spy（）}；
让包装器={}；
test.before（t=>{
包装器=浅（）；
});
test（'它应该有两个子项'，t=>{
t、 是（wrapper.children（）.length，2）；
});
测试（'它应该安全地设置道具'，t=>{
setProps（{…props}）；
t、 是（wrapper.children（）.length，2）；
});
test（'单击时应调用'，t=>{
setProps（{…props}）；
find（{tagX:true}）.last（）.simulate（'click'）；
t、 true（props.toggleValue.calledOnce）；
});

这是另一个（B）

从“../TagBox”导入标记框；
test（'它将值设置为null…'，t=>{
const props={multiple:false}；
常量包装器=浅（）；
t、 是（wrapper.state（'currentValue'），null）；
});
测试（'如果有多个，则将值设置为[]'，t=>{
const props={multiple:true}；
常量包装器=浅（）；
t、 deepEqual（wrapper.state（'currentValue'），[]）；
});
test（'如果…，则不使用值），t=>{
constprops=={value:3}；
常量包装器=浅（）；
t、 是（wrapper.state（'currentValue'），null）；
});
//等等等等。

请注意，在测试B中，每个测试都有一个新的浅包装器，而实际上除了道具之外什么都没有改变

在100次测试的过程中，您预计完成时间的差异是什么

---

在更高范围内进行一次浅层渲染（测试A）是否有可能会污染测试状态？

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

---

此外，如果

TagBox

组件具有内部状态，则示例A可能无法正常工作。这就是为什么示例B是更可取的编写测试的方法。

浅层可能不是您的问题，因为它的设计目的是在不层叠所有子级渲染的情况下以最快的方式渲染组件

你可以考虑改变你的测试运行引擎，那么，AVA与JEJT相比有点慢。我在一年前做了这个改变，速度要快得多。Jest还在它的基本工具包中提供了更多有用的东西，比如模拟示例函数

详情如下：

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

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.