javascript - Jest 单元测试。模拟函数返回，监视函数调用

Question

我正在使用 Jest 开发 React 应用程序

我必须测试组件的功能:

handleSubmit = event => {
  event && event.preventDefault();
  this.formValidation() ? this.login() : this.handleErrors(this.state);
};

您能告诉我如何模拟 this.formValidation 方法返回以监视 this.login 或 this.handleErrors 吗？

  formValidation = () => {
    return (
      validateEmail(this.state.email) && isPasswordValid(this.state.password)
    );
  };

  login = () => {
    authenticationService.login(this.state.email, this.state.password).then(
      () => this.props.history.push({ pathname: "/template" }),
      message => this.setState({ errors: { api: message } })
    );
  };

  handleErrors = ({ email, password }) => {
    this.setState({
      errors: {
        email: !validateEmail(email) ? "Email is required" : null,
        password: !isPasswordValid(password)
          ? "Password is required. (7+ chars: mixed, number, special)"
          : null
      }
    });
  };

感谢您的帮助

Answer 1

这是单元测试解决方案:

index.jsx:

import React, { Component } from 'react';

class SomeComponent extends Component {
  constructor() {
    this.state = {};
  }
  handleSubmit = (event) => {
    event && event.preventDefault();
    this.formValidation() ? this.login() : this.handleErrors(this.state);
  };

  formValidation() {}

  handleErrors(state) {}

  login() {}

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}></form>
      </div>
    );
  }
}

export default SomeComponent;

index.test.jsx:

import React from 'react';
import { shallow } from 'enzyme';
import SomeComponent from '.';

describe('59741487', () => {
  let wrapper;
  const mFormValidation = jest.fn();
  const mLogin = jest.fn();
  const mHandleErrors = jest.fn();
  beforeEach(() => {
    SomeComponent.prototype.formValidation = mFormValidation;
    SomeComponent.prototype.login = mLogin;
    SomeComponent.prototype.handleErrors = mHandleErrors;
    wrapper = shallow(<SomeComponent></SomeComponent>);
  });
  afterEach(() => {
    jest.clearAllMocks();
  });
  it('should render', () => {
    expect(wrapper.find('form')).toBeTruthy();
  });
  describe('#handleSubmit', () => {
    it('should login', () => {
      mFormValidation.mockReturnValueOnce(true);
      const mEvent = { preventDefault: jest.fn() };
      wrapper.find('form').simulate('submit', mEvent);
      expect(mEvent.preventDefault).toBeCalledTimes(1);
      expect(mLogin).toHaveBeenCalledTimes(1);
    });

    it('should handle error', () => {
      mFormValidation.mockReturnValueOnce(false);
      const mEvent = { preventDefault: jest.fn() };
      wrapper.find('form').simulate('submit', mEvent);
      expect(mEvent.preventDefault).toBeCalledTimes(1);
      expect(mHandleErrors).toBeCalledWith({});
    });
  });
});

带有覆盖率报告的单元测试结果:

 PASS  src/stackoverflow/59741487/index.test.jsx (13.687s)
  59741487
    ✓ should render (12ms)
    #handleSubmit
      ✓ should login (2ms)
      ✓ should handle error (3ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |    57.14 |      100 |                   |
 index.jsx |      100 |      100 |    57.14 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        15.854s

源代码:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59741487