4

Enzymeの浅いレンダリングと、テストごとに浅いレンダリングを再実行する時間について、作業中です。メソッド、クリック、セレクターの長さなど、テストを実行する前にコンポーネントを 1 回浅くレンダリングすると、毎回ではなく、テストがより速く実行される可能性があることをお勧めします。

どちらの方法がより速く、どちらの方法にも落とし穴があるかどうかを指摘できる専門家はいますか? これらの例では、AVAランナーを使用しています (そして、議論のために少し工夫されています)。

たとえば、ここに 1 つの方法 ( 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);
});

そして、これがもう1つ（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 では、props 以外は基本的に何も変更されていない場合に、各テストに新しい浅いラッパーがあることに注意してください。

100 回のテストの過程で、完了までの時間の差はどの程度になると予想されますか?

また、より高いスコープでの浅いレンダリング (テスト A) がテスト状態を汚染する可能性はありますか?

4

2 に答える 2

3

浅いレンダラーは、単一のコンポーネントのみをレンダリングするため、高速になるように設計されています。したがって、通常、テストごとに新しいコンポーネントを作成しても、パフォーマンスの問題は発生しません。

TagBoxまた、コンポーネントに内部状態がある場合、例 A が正しく機能しない可能性があります。それが、例 B がテストを作成するためのより好ましい方法である理由ではありません。

于 2016-08-22T10:05:43.077 に答える