it-roy-ru.com

Имитация нажатия кнопки в 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
24
foobar

# 1 Использование Jest

Вот как я использую функцию обратного вызова jest mock для проверки события нажатия

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);
});
56
Saman Shafigh

Используя jest, вы можете сделать это так: 

test('should call 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();
});
4
Jackgisel

Вы можете использовать что-то вроде этого для вызова обработчика, написанного по клику:

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

page = <MyCoolPage />;
pageMounted = shallow(page);
// below line will execute your click function
pageMounted.instance().yourOnClickFunction();
0
utkarsh

В дополнение к решениям, которые были предложены в одноуровневых комментариях, вы можете изменить свой подход к тестированию немного и протестировать не всю страницу сразу (с глубоким деревом дочерних компонентов), а сделать компонент изолированный тестирование. Это упростит тестирование onClick() и подобных событий (см. Пример ниже).

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

Вот пример того, как событие onClick() может быть протестировано в изолированном компоненте SearchForm с использованием Jest и -act-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
Oleksii Trekhleb