☰

Jestでボタンクリックをシミュレートする 質問する

tag-icon • tag-icon javascript reactjs testing jestjs enzyme
Jestでボタンクリックをシミュレートする 質問する

ボタンのクリックをシミュレートするのは非常に簡単/標準的な操作のように思えます。しかし、Jest.js テストでは動作させることができません。

これは私が試したことですが（jQuery を使用しても）、何もトリガーされなかったようです。

import { mount } from 'enzyme';

page = <MyCoolPage />;
pageMounted = mount(page);

const button = pageMounted.find('#some_button');
expect(button.length).toBe(1); // It finds it alright
button.simulate('click'); // Nothing happens

ベストアンサー1

#1 Jestの使用

これは、Jest モック コールバック関数を使用してクリック イベントをテストする方法です。

import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('Test Button component', () => {
  it('Test click event', () => {
    const mockCallBack = jest.fn();

    const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));
    button.find('button').simulate('click');
    expect(mockCallBack.mock.calls.length).toEqual(1);
  });
});

私はまた、というモジュールを使用しています酵素Enzymeは、Reactコンポーネントのアサートと選択を容易にするテストユーティリティです。

#2 シノンを使う

また、別のモジュールを使用することもできます。シノンこれは、JavaScript 用のスタンドアロンのテスト スパイ、スタブ、モックです。次のようになります。

import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import Button from './Button';

describe('Test Button component', () => {
  it('simulates click events', () => {
    const mockCallBack = sinon.spy();
    const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));

    button.find('button').simulate('click');
    expect(mockCallBack).toHaveProperty('callCount', 1);
  });
});

#3 独自のスパイを使用する

最後に、独自の素朴なスパイを作成することもできます (正当な理由がない限り、このアプローチはお勧めしません)。

function MySpy() {
  this.calls = 0;
}

MySpy.prototype.fn = function () {
  return () => this.calls++;
}

it('Test Button component', () => {
  const mySpy = new MySpy();
  const mockCallBack = mySpy.fn();

  const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));

  button.find('button').simulate('click');
  expect(mySpy.calls).toEqual(1);
});

おすすめ記事