LoginSignup
0
0

More than 5 years have passed since last update.

mountしたcomponentの子孫ノードでイベントをsimulateしても結果が反映されない(と勘違いした)

Last updated at Posted at 2018-06-18

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");
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0