React Native支付组件单元测试：Jest实战案例

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

jest.mock('@api/Order', () => ({
  getList: jest.fn(),
  doPayment: jest.fn(),
  checkPay: jest.fn(),
}));

describe('PayModal', () => {
  let wrapper;
  let instance;

  beforeEach(() => {
    wrapper = shallow(<PayModal />);
    instance = wrapper.instance();
  });

  it('should render correctly', () => {
    expect(wrapper).toMatchSnapshot();
  });

  describe('show', () => {
    it('should set visible to true and call _fetchData', () => {
      instance.show();
      expect(wrapper.state('visible')).toBe(true);
      expect(getList).toHaveBeenCalled();
    });
  });

  describe('_fetchData', () => {
    it('should call getList with the correct parameters', () => {
      const data = { orderId: '12345' };
      wrapper.setState({ data });
      instance._fetchData();
      expect(getList).toHaveBeenCalledWith({
        orderId: data.orderId,
        endPay: 0,
        platform: 'appnative',
        version: '5.5.0',
      });
    });

    it('should set the state correctly if code is 10000', async () => {
      const data = { orderId: '12345' };
      const response = { code: 10000, data: { payStatus: 1 } };
      getList.mockResolvedValue(response);
      wrapper.setState({ data });
      await instance._fetchData();
      expect(wrapper.state('data')).toEqual(response.data);
      expect(wrapper.state('isLoading')).toBe(false);
      expect(wrapper.state('isNetError')).toBe(false);
      expect(wrapper.state('leftTime')).toEqual(response.data.leftTime);
    });

    it('should call toast and set the state correctly if code is not 10000', async () => {
      const data = { orderId: '12345' };
      const response = { code: 20000 };
      getList.mockResolvedValue(response);
      wrapper.setState({ data });
      await instance._fetchData();
      expect(toast).toHaveBeenCalledWith('服务器开小差啦～');
      expect(wrapper.state('data')).toEqual({ orderId: data.orderId });
    });

    it('should call toast on catch', async () => {
      const data = { orderId: '12345' };
      getList.mockRejectedValue('error');
      wrapper.setState({ data });
      await instance._fetchData();
      expect(toast).toHaveBeenCalledWith('服务器开小差啦～');
    });
  });

  describe('_handleNetResult', () => {
    it('should return early if isGoToSuccess is true', () => {
      wrapper.setState({ isGoToSuccess: true });
      instance._handleNetResult();
      expect(wrapper.state('isGoToSuccess')).toBe(true);
    });

    it('should set the state correctly and call timerText.start', () => {
      const response = { data: { payStatus: 1, leftTime: 100 } };
      instance.timerText = { start: jest.fn() };
      instance._handleNetResult(response);
      expect(wrapper.state('isLoading')).toBe(false);
      expect(wrapper.state('isNetError')).toBe(false);
      expect(wrapper.state('data')).toEqual(response.data);
      expect(wrapper.state('leftTime')).toEqual(response.data.leftTime);
      expect(instance.timerText.start).toHaveBeenCalledWith(response.data.leftTime);
    });

    it('should set the state correctly and call timerText.stop if payStatus is 1', () => {
      const response = { data: { payStatus: 1 } };
      instance.timerText = { stop: jest.fn() };
      instance._handleNetResult(response);
      expect(wrapper.state('isLoading')).toBe(false);
      expect(wrapper.state('isNetError')).toBe(false);
      expect(wrapper.state('data')).toEqual(response.data);
      expect(instance.timerText.stop).toHaveBeenCalled();
    });
  });
});