При тестировании реагирующего компонента не вызывается шутка - PullRequest
Новая
       6

При тестировании реагирующего компонента не вызывается шутка

0 голосов
/ 09 февраля 2020

Я пытаюсь написать тест, использующий фермент для имитации нажатия кнопки, который ожидает срабатывания обработчика onClick. Я хочу заменить обработчик onClick компонента на макет. Когда тест выполняется, метод класса компонента вызывается вместо фиктивной функции. Любое руководство будет оценено!

Ниже приведены результаты теста: 

  FAIL  src/Form.test.js
  ● Console

    console.log src/Form.js:5
      this is from the component

  ● Submit handler called on click

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

      14 |   submitButton.simulate("click");
      15 | 
    > 16 |   expect(onHandleSubmitMock).toHaveBeenCalled();
         |                              ^
      17 | });
      18 | 

      at Object.<anonymous>.test (src/Form.test.js:16:30)

версии пакета: "jest": 25.1.0 "jest-фермент": 7.1.2 "реакция": 16.8.6

Form. js Компонент 


    import React, { Component } from "react";

    export class Form extends Component {
      onHandleSubmit = () => {
        console.log("this is from the component");
      };

      render() {
        return (
          <div>
            <button data-test="submit" onClick={this.onHandleSubmit}>
              Submit
            </button>
          </div>
        );
      }
    }

    export default Form;

Form.test. js 


    import React from "react";
    import { shallow } from "enzyme";

    import Form from "./Form";

    test("Submit handler called on click", () => {
      const onHandleSubmitMock = jest.fn(() => console.log("mock was called"));
      const wrapper = shallow(<Form />);

      wrapper.instance().onHandleSubmit = onHandleSubmitMock;
      wrapper.update();

      const submitButton = wrapper.find(`[data-test="submit"]`);
      submitButton.simulate("click");

      expect(onHandleSubmitMock).toHaveBeenCalled();
    });

1 Ответ

0 голосов
/ 10 февраля 2020

Причина в том, что при мелкой визуализации компонента Form оригинальный метод onHandleSubmit уже привязан к onClick. Так что даже если вы назначите onHandleSubmitMock экземпляру компонента Form. Уже поздно". Когда вы имитируете событие click, оно вызовет оригинальный метод onHandleSubmit, а не смоделированный.

Если вы настаиваете на замене метода onHandleSubmit на смоделированный. Необходимо убедиться, что вы заменили метод перед поверхностным рендерингом (привязка к onClick)

Например form.jsx: 

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

test('Submit handler called on click', () => {
  const onHandleSubmitMock = jest.fn(() => console.log('mock was called'));
  Form.prototype.onHandleSubmit = onHandleSubmitMock;
  const wrapper = shallow(<Form />);
  const submitButton = wrapper.find(`[data-test="submit"]`);
  submitButton.simulate('click');

  expect(onHandleSubmitMock).toHaveBeenCalled();
});

form.test.jsx: 

import React, { Component } from 'react';

export class Form extends Component {
  constructor() {
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
  }
  onHandleSubmit() {
    console.log('this is from the component');
  }

  render() {
    return (
      <div>
        <button data-test="submit" onClick={this.onHandleSubmit}>
          Submit
        </button>
      </div>
    );
  }
}

export default Form;

Результаты модульных испытаний с отчетом о покрытии: 

 PASS  stackoverflow/60138901/form.test.jsx (6.937s)
  ✓ Submit handler called on click (44ms)

  console.log stackoverflow/60138901/form.test.jsx:6
    mock was called

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |   91.67 |      100 |      75 |      90 |                   
 form.jsx |   91.67 |      100 |      75 |      90 | 8                 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.65s
...