Question

我正在尝试尝试一些TDD，我想我将从一个简单的登录组件开始。我正在努力测试提交按钮上的功能。

我可以测试按钮是否已渲染，以及单击该按钮后状态是否已更新，因此可以在组件中调用该函数。测试可以看到状态已更新，但看不到该函数正在被调用。

我已经将代码简化为可以的最基本功能，我一定看不到任何东西！我删除了登录组件的所有其他测试，以便尝试缩小问题的范围。我尝试了浅（）而不是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

好，所以我需要修改搜索并添加关键字“类方法”。我一直在阅读教程和文章感到困惑。使用它，我找到了这个答案：How to mock React component methods with jest and enzyme

所以测试：

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

道具可以被移除，因为那是一棵错误的树。

开玩笑地测试onClick（）会收到错误消息“已调用预期的模拟函数，但未调用。”

1 个答案: