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


83

ボタンクリックのシミュレーションは、非常に簡単で標準的な操作のようです。それでも、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

何もしなかったことをどうやって知っていますか?次に、ボタンのクリックが発生したかどうかを確認するために何をチェックしていますか?
トビー2017年

良い質問。エラーフィールドが表示されることを期待しています:const field = pageMounted.find( '#notification'); expect(field.length).toBe(1);
foob​​ar 2017年

うーん。console.warnonClickを実行する関数にを追加して、Jestコンソールで起動するかどうかを確認しましたか?
トビー2017年

MyCoolPage コンポーネントのコードを追加していただけませんか。そうしないと、実際の問題が何であるかを理解するのが困難になります。
アンドレアスKöberle

1
ヒントをありがとう。あなたの質問のおかげで、私は私の問題を見つけました。私は基本的に単純なボタンで小さなテストを行い、それは機能しました:MyCoolPage =(<button type = "submit" id = "cool_button" onClick = {()=> {console.warn( 'I was clicked');}>クールボタン</ button>); 次に、ボタンがreduxフォームに属していることに気付き、onClickはなく、代わりにonSubmitがあったので、button.simulate( 'submit');を追加しました。問題を解決しました。フィードバックをありがとうございます!
foob​​ar 2017年

回答:


134

#1Jestの使用

これは、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コンポーネントのアサートと選択を容易にするテストユーティリティです。

#2Sinonの使用

また、JavaScriptのスタンドアロンのテストスパイ、スタブ、モックであるSinonと呼ばれる別のモジュールを使用することもできます。これはそれがどのように見えるかです:

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);
});

1
詳細な回答をありがとうサマン!これは、onClickメソッドをテストしているコンポーネントに直接渡すことができる場合に非常に便利です。コードをその参照として使用します:)。私の例では、onClickを実際に渡すことができず、ボタンがクリックされたことを知るために他の手がかりに頼らなければならなかったと思います。
foob​​ar 2017

最初の例の裏側で、入力要素の属性に一致するonChange関数のテストを作成する方法の例を挙げていただけますか?ありがとう!valuevalue
空白文字2018年

7
しかし、これは実際に何をテストしますか?
Omortis

1
クリックするとhandleClickメソッドを呼び出すボタンがあります。handleClickボタンがクリックされたときに実際に呼び出されたものをテストするにはどうすればよいですか?
ジェレミー・モリッツ

Reactの質問には答えますが、この答えのほとんどは、ボタンのクリックをシミュレートすることよりも、モックに関連しています。
ブレイディダウリング

19

承認された回答のソリューションは非推奨になりました

#4プロップを直接呼び出す

酵素シミュレーションはバージョン4で削除される予定です。メインメンテナは、シミュレーションが内部で行うことであるprop関数を直接呼び出すことを提案しています。1つの解決策は、これらの小道具を呼び出すことが正しいことを行うことを直接テストすることです。または、インスタンスメソッドをモックアウトし、prop関数がそれらを呼び出すことをテストし、インスタンスメソッドを単体テストすることができます。

たとえば、クリックを呼び出すことができます。

wrapper.find('Button').prop('onClick')() 

または

wrapper.find('Button').props().onClick() 

非推奨に関する情報:.simulate()#2173の非推奨


以前の答えはどれですか?それとも複数ですか(どれですか?)?
ピーターモーテンセン

@PeterMortensen答えを明確にしました。受け入れられた答えは酵素シミュレーションを使用することですが、これは非推奨になります。

wrapper.update()酵素は変化が起こったことに気付かないかもしれないので、これらのいずれかの後に電話する必要があるかもしれません。
ヒンリッヒ

12

Jestを使用すると、次のように実行できます。

test('it calls start logout on button click', () => {
    const mockLogout = jest.fn();
    const wrapper = shallow(<Component startLogout={mockLogout}/>);
    wrapper.find('button').at(0).simulate('click');
    expect(mockLogout).toHaveBeenCalled();
});

7
クリックしたときにモックコールバックを使用してテスト内に完全なボタンを作成し、テストでそのボタンをクリックすることの価値は何ですか?私が見たほとんどのテスト例のように、これを行うとき、実際のコードの1行もテストしていません。
ジェレミー・モリッツ

1
@JeremyMoritzだから、ユニットテストのポイントやロジックがわかりません。
user3808307

0

次のようなものを使用して、クリックで記述されたハンドラーを呼び出すことができます。

import { shallow } from 'enzyme'; // Mount is not required

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

// The below line will execute your click function
pageMounted.instance().yourOnClickFunction();

0

兄弟のコメントで提案された解決策に加えて、テストアプローチを少し変更して、ページ全体を一度にテストするのではなく(深い子コンポーネントツリーを使用して)、分離されたコンポーネントテストを実行できます。これによりonClick()、同様のイベントのテストが簡素化されます(以下の例を参照)。

アイデアは、一度に1つのコンポーネントのみをテストし、すべてを一緒にテストすることではありません。この場合、すべての子コンポーネントはjest.mock()関数を使用してモックされます。

これは、Jestreact-test-rendererを使用onClick()して、分離されたSearchFormコンポーネントでイベントをテストする方法の例です。

import React from 'react';
import renderer from 'react-test-renderer';
import { SearchForm } from '../SearchForm';

describe('SearchForm', () => {
  it('should fire onSubmit form callback', () => {
    // Mock search form parameters.
    const searchQuery = 'kittens';
    const onSubmit = jest.fn();

    // Create test component instance.
    const testComponentInstance = renderer.create((
      <SearchForm query={searchQuery} onSearchSubmit={onSubmit} />
    )).root;

    // Try to find submit button inside the form.
    const submitButtonInstance = testComponentInstance.findByProps({
      type: 'submit',
    });
    expect(submitButtonInstance).toBeDefined();

    // Since we're not going to test the button component itself
    // we may just simulate its onClick event manually.
    const eventMock = { preventDefault: jest.fn() };
    submitButtonInstance.props.onClick(eventMock);

    expect(onSubmit).toHaveBeenCalledTimes(1);
    expect(onSubmit).toHaveBeenCalledWith(searchQuery);
  });
});

0

ボタンコンポーネントを自分でテストする必要がありました。これらのテストは私のために働きます;-)

import { shallow } from "enzyme";
import * as React from "react";
import Button from "../button.component";

describe("Button Component Tests", () => {
    it("Renders correctly in DOM", () => {
        shallow(
            <Button text="Test" />
        );
    });
    it("Expects to find button HTML element in the DOM", () => {
        const wrapper = shallow(<Button text="test"/>)
        expect(wrapper.find('button')).toHaveLength(1);
    });

    it("Expects to find button HTML element with className test in the DOM", () => {
        const wrapper = shallow(<Button className="test" text="test"/>)
        expect(wrapper.find('button.test')).toHaveLength(1);
    });

    it("Expects to run onClick function when button is pressed in the DOM", () => {
        const mockCallBackClick = jest.fn();
        const wrapper = shallow(<Button onClick={mockCallBackClick} className="test" text="test"/>);
        wrapper.find('button').simulate('click');
        expect(mockCallBackClick.mock.calls.length).toEqual(1);
    });
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.