Jest/Enzyme 测试 React 组件在 try/catch 中使用 async/await 方法

Question

I've been struggling trying to test this method with Jest for ages, searching online doesn't seem to help. I'm thinking I need to refactor this method but I'm not sure how to do it in such a way that is testable.

class EmailPage extends Component {
  ...
  async onSubmit(values, applicaitonId) {
    try {
      this.setState({ loading: true });
      const response = await sendEmail(this.formatEmailValues(values), applicaitonId);
      console.log(response)
      this.setState({ loading: false });
      if (response.status !== 'error') {
        this.props.history.push('/dashboard');
      } else {
        alert(
          `Something was wrong with your email. Error: ${response.message}`
        );
      }
    } catch (error) {
      console.error('Error while sending email!');
      console.error(error);
      this.setState({ loading: false });
    }
  }
  ...
}

Any ideas?

Answer 1

This should get you started:

import * as React from 'react';
import { shallow } from 'enzyme';

let sendEmail = () => {};

class EmailPage extends React.Component {

  formatEmailValues() { return 'formatEmailValues return value'; }

  async onSubmit(values, applicaitonId) {
    try {
      this.setState({ loading: true });
      const response = await sendEmail(this.formatEmailValues(values), applicaitonId);
      console.log(response)
      this.setState({ loading: false });
      if (response.status !== 'error') {
        this.props.history.push('/dashboard');
      } else {
        alert(
          `Something was wrong with your email. Error: ${response.message}`
        );
      }
    } catch (error) {
      console.error('Error while sending email!');
      console.error(error);
      this.setState({ loading: false });
    }
  }

  render() { return null; }
}

describe('EmailPage', () => {

  test('onSubmit', async () => {
    const historyMock = { push: jest.fn() };
    const wrapper = shallow(<EmailPage history={historyMock} />);
    const instance = wrapper.instance();

    let sendEmailResolve;
    sendEmail = jest.fn(() => new Promise(resolve => { sendEmailResolve = resolve; }));
    const formatEmailValuesSpy = jest.spyOn(EmailPage.prototype, 'formatEmailValues');

    const promise = instance.onSubmit(['value1', 'value2'], 'applicationId');
    expect(wrapper.state().loading).toBe(true);  // Success!
    expect(formatEmailValuesSpy).toHaveBeenCalledWith(['value1', 'value2']);  // Success!
    expect(sendEmail).toHaveBeenCalledWith('formatEmailValues return value', 'applicationId');  // Success!

    sendEmailResolve({ status: 'success' });  // simulate sendEmail resolving
    await promise;  // let onSubmit finish

    expect(wrapper.state().loading).toBe(false);  // Success!
    expect(historyMock.push).toHaveBeenCalledWith('/dashboard'); // Success!
  })
})

I'll leave it as an exercise to the reader to implement the error case.

(...but to jumpstart that effort, you will want to mock global.alert and call sendEmailResolve({ status: 'error' }); during the test)