Имитация нажатия кнопки в Jest

84

Имитация нажатия кнопки кажется очень простой / стандартной операцией. Тем не менее, я не могу заставить его работать в тестах 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
foobar
источник
Откуда вы знаете, что он ничего не сделал? Что вы проверяете рядом, чтобы увидеть, произошло ли нажатие кнопки?
Тоби
Хороший вопрос. Я ожидаю, что появится поле ошибки: const field = pageMounted.find ('# notification'); ожидать (field.length) .toBe (1);
foobar
Грм. Вы добавили console.warnк функции, которая запускается onClick, чтобы увидеть, срабатывает ли она в консоли Jest?
Тоби
Не могли бы вы добавить код для MyCoolPage компонента, иначе трудно понять, в чем проблема.
Андреас Кёберле
1
Спасибо, ребята, за советы. Я нашел свою проблему, благодаря вашим вопросам. Я в основном провел небольшой тест с простой кнопкой, и он сработал: MyCoolPage = (<button type = "submit" id = "cool_button" onClick = {() => {console.warn ('Меня нажали');}> Классная кнопка </button>); Затем я понял, что моя кнопка принадлежит редукционной форме, поэтому у нее не было onClick, а было onSubmit, поэтому добавляю button.simulate ('submit'); решил вопрос. Еще раз благодарим за отзыв!
foobar

Ответы:

138

# 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 Использование Sinon

Кроме того, вы можете использовать другой модуль Sinon, который представляет собой автономный тестовый шпион, заглушки и имитаторы для 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);
});
Саман Шафиг
источник
1
Спасибо за развернутый ответ Саман! Это очень полезно, когда вы можете передать метод onClick непосредственно в тестируемый компонент, и я буду использовать ваш код в качестве ссылки для этого :). Я думаю, что в моем примере я действительно не мог передать onClick, и мне пришлось полагаться на другие подсказки, чтобы узнать, что кнопка была нажата.
foobar
В конце вашего первого примера вы можете привести пример того, как мы можем написать тест для onChangeфункции, которая valueсоответствует valueатрибуту элемента input? Благодаря!
blankface
7
Но что это на самом деле проверяет?
Omortis 03
1
У меня есть кнопка, которая вызывает мой handleClickметод при нажатии. Как проверить, что handleClickдействительно вызывается при нажатии кнопки?
Джереми Мориц
Хотя он отвечает на вопрос о React, большая часть этого ответа больше связана с издевательством, чем с имитацией нажатия кнопки.
Брэди Даулинг
21

Решения в принятом ответе устарели

# 4 Вызов реквизита напрямую

Предполагается, что Enzyme simulate будет удален в версии 4. Главный сопровождающий предлагает напрямую вызывать функции prop, что и делает simulate внутренне. Одно из решений состоит в том, чтобы напрямую проверить правильность использования этих свойств; или вы можете имитировать методы экземпляра, проверить, вызывают ли их функции prop, и выполнить модульное тестирование методов экземпляра.

Вы можете вызвать щелчок, например:

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

Или же

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

Информация об устаревании: прекращение поддержки .simulate () # 2173

Черный
источник
Какой предыдущий ответ? Или их больше одного (какие?)?
Питер Мортенсен
1
@PeterMortensen Я пояснил ответ. Принятый ответ - использование имитации фермента, которое не рекомендуется.
Black
вам может потребоваться позвонить wrapper.update()после одного из них, поскольку фермент может не заметить, что произошло изменение.
Hinrich
А как насчет кнопки, у которой нет onClickопоры? Например, кнопка type="submit"внутри <form />? Да мог бы позвонить onSubmitв форму - но это не идеально. Пользователи будут нажимать кнопку, и это то, что вы хотите протестировать.
Оли
Спасибо @Black, спасатель жизни!
Анас Латик,
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();
});
Jackgisel
источник
7
Какова ценность создания полноценной кнопки в ваших тестах с фиктивным обратным вызовом при нажатии и последующем нажатии этой кнопки в тесте? Как и в большинстве примеров тестирования, которые я видел, вы даже не протестировали ни одной строчки своего реального кода, когда делаете это.
Джереми Мориц
2
@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() подобных событий (см. Пример ниже).

Идея состоит в том, чтобы тестировать только один компонент за раз, а не все вместе. В этом случае все дочерние компоненты будут смоделированы с помощью jest.mock () .

Вот пример того, как onClick()событие может быть протестировано в изолированном SearchFormкомпоненте с помощью Jest и react-test-renderer .

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);
    });
});
Ганнибал Б. Моулвад
источник