3

反応コンポーネントをテストするために酵素/モカを使用しています。

テストしている親コンポーネントがあります。

let wrapper = mount(<Parent />);

この親には、レンダリング関数に子コンポーネントがあります

render: function() {
    <Child onChange={this.foo} />
},
foo: function() {
    console.log("I was called");
}

親の foo 関数をテストできるように、子の onChange 関数を起動したいと思います。

これまでのところ、私はこれを行う方法を見つけていません.sinonとスタブについて読んだことがありますが、それは主に関数をインターセプトし、それらを起動しないことに関するものです.

次のテスト

shallow(<Parent />).instance().foo();

子と親を接続するコード行をテストしないため、弱いテストです。また、子の単体テストを作成していない場合は、子の onChange 機能もテストしません。IMHO - コンポーネントを親/子に分割することでテスト容易性が低下する場合、このフレームワークに何か問題があります

どんな助けでも感謝します、ありがとう

4

2 に答える 2

0

テストをパーツに分割してみてください。例えば...

まず、予想される関数が子コンポーネントに渡されたことをテストします。

import { shallow } from 'enzyme';

const actual = shallow(<Parent />);
const expected = <Child onChange={actual.instance().foo} />

expect(actual.matchesElement(expected)).true;

matchesElementテストしているコンポーネントでほとんどレンダリングされていない場合は、上記の単純なアプローチを使用するのが好きですが、findセレクターを使用してChildインスタンスを見つけてテストすることもできます。

次に、foo 関数を個別にテストします。

import { shallow } from 'enzyme';

const actual = shallow(<Parent />).instance().foo();
const expected = 'expected return of foo'

expect(actual).equals(expected);

Childコンポーネントを個別にテストし、それがそのonChange小道具をどのように処理するかをテストできます。

ここで使用されている酵素 API の一部:

また見てください：

于 2016-07-12T06:13:34.620 に答える