Jest testing onClick () выдает ошибку «Ожидается, что фиктивная функция была вызвана, но она не была вызвана».

Question

Я пытаюсь попробовать TDD, и я подумал, что начну с простого компонента входа в систему.Я пытаюсь проверить функцию на кнопке отправки.

Я могу проверить, что кнопка визуализируется и что при нажатии это состояние обновляется, поэтому функция вызывается в компоненте.Тест может видеть, что состояние обновлено, но не то, что функция вызывается.

Я свел свой код к самой базовой функциональности, которую я могу, я не должен видеть что-то!Я удалил все остальные тесты для компонента Login, чтобы попытаться сузить проблему.Я попробовал мелкий () вместо mount (), но не радости.Я хочу написать более сложный тест, но не могу даже распознать, что был вызван fn.

Мой тест:

import React from 'react';
import { mount } from 'enzyme';
import Login from './Login';

describe('when clicking the `submit` button', () => {
  const mockSubmit = jest.fn();

  const props = {
    handleBtnClick: mockSubmit
  };
  const wrapper = mount(<Login {...props} />);

  beforeEach(() => {
    wrapper.find('button.btn-submit').simulate('click');
  });

  it('renders the `submit` button', () => {
    expect(wrapper.find('button.btn-submit')).toExist();
  });

  it('when the submit button is clicked it updates `state`', () => {
    expect(wrapper.state().buttonClicked).toEqual(true);
  });

  it('calls the submit callback', () => {
    expect(mockSubmit).toHaveBeenCalled();
  });
});

Мой компонент:

import React, { Component } from 'react';


class Login extends Component {
  constructor() {
    super();
    this.state = {
      buttonClicked: false
    }
  }


  handleBtnClick = (e) => {
    e.preventDefault();
    this.setState({
      buttonClicked: true 
    })
  }

  render() {
    console.log(this.state.buttonClicked);
    return(
      <div>
        <h1>Login</h1> 
        <form>

          <div className="form-row">
            <button 
              type="submit" 
              className="btn-submit"
              onClick={this.handleBtnClick}
            >
              Submit
            </button>
          </div>      
        </form>
      </div>

    );
  }
}

export default Login;

Answer 1

Хорошо, поэтому мне нужно было изменить поиск и добавить ключевое слово «метод класса».Я был смущен между учебниками и статьями, которые я читал.Пользуясь этим, я нашел ответ: Как смоделировать методы компонентов Реакта с шуткой и энзимом

Итак, тест:

it('calls the submit callback', () => {
    expect(mockSubmit).toHaveBeenCalled();
  });

должен быть:

it('it calls the handleBtnClick method', () => {
      const mockSubmit= jest.fn();
      wrapper.instance().handleBtnClick= mockSubmit;
      wrapper.instance().handleBtnClick();
      expect(mockSubmit).toHaveBeenCalled();
    });

И опоры могут быть удалены, потому что это было не то дерево, чтобы лаять.