Reactで開発中、こんなテストを書いたところ、どうしてもGreenにならない・・・
なぜだ!?
import React from 'react';
import { mount } from 'enzyme';
import AnyComponent from './any_component';
it('changes the value of input') () => {
const wrapper = mount(<AnyComponent />);
const node_input = wrapper.find('input');
node_input.simulate("keyDown", { key: "z", keyCode: 90, which: 90});
wrapper.update();
expect(node_input.prop('value')).toEqual("z");
};
上のコード、問題を発見した時のコードからシンプルな内容に書き換えたつもりが・・・今回のお題を解決しても、そもそもGreenにならんやつですね・・・
Enzymeの仕組み的に、keyDownのシミュレーションでchangeのイベントは発火しなさそうです・・・
ってことで・・・
- node_input.simulate("keyDown", { key: "z", keyCode: 90, which: 90});
- wrapper.update();
+ node_input.simulate("change", {target: {value: "z"}});
で、本題ですが・・・
find関数が返すオブジェクトは、その時点でのSnapshotで、その後の変更は影響しないんですね。気づいてみれば、「そりゃそうだわな・・・」なんですが、気付くまでは、とても悩みましたw
- expect(node_input.prop('value')).toEqual("z");
+ expect(wrapper.find('input').prop('value')).toEqual("z");