jest mock的一些思路

基本场景可参考：https://www.cnblogs.com/SamWeb/p/11454923.html

mock的其他方式：https://jestjs.io/docs/zh-Hans/mock-function-api#mockfnmockrejectedvaluevalue

其他场景：需要mock一个promise或者函数多层回调时，可参考：

        

再补充几种用法：

  1  定时器的代码如何test

componentDidMount() {

    setTimeout(() => {

      this.setState({ show: true });

      this.setHideTimer();

    }, 0);

  }

  setHideTimer = () => {

    if (this.hideTimer) clearTimeout(this.hideTimer);

    this.hideTimer = setTimeout(() => {

      this.setState({ show: false });

    }, 2000);

  }

测试方法：

jest.useFakeTimers();

test('test float message info', () => {

    const testMessage = 'Test Message'

    FloatMessage.info(testMessage);

    act(() => {

        jest.advanceTimersByTime(0);

      });

    expect(document.getElementsByClassName('floatMessage').length).toBe(1)

    act(() => {

        jest.advanceTimersByTime(3000);

      });

    expect(screen.queryByText(testMessage).length).toBe(undefined)

})

2  当前组件调用了引入的其他组件或者类库的方法，如何test

   源码补充一下：主要是一个request调用了第三方的extend生成了新的request方法；

测试如下：

jest.mock('umi-request');

jest.mock('@/components/Auth/authClient.js');

const mockFn = jest.fn();

beforeAll(async() => {

    jest.spyOn(umi, 'extend').mockImplementation(options => {

        options.errorHandler({ response: { status: 401 } });

        options.errorHandler({ response: { status: 400 } });

        options.errorHandler({ response: { status: 555, statusText: 'aaa' } });

        options.errorHandler({ response: {} });

        options.errorHandler({ response: null });

        function request() {

            // eslint-disable-next-line no-unused-expressions

           return { umi,

            ...{ interceptors: { request: { use(callback) {

               // eslint-disable-next-line no-unused-expressions

               callback && callback('ddd');

            } } } } };

        }

        return request();

    });

    jest.spyOn(client, 'getAuthToken').mockImplementation(() => new Promise(resolve => {

           resolve({

            asJwtString: mockFn.mockReturnValue('aaa'),

           });

       }));

})

主要使用spyOn的方式，此方法主要是来mock某个类下面的具体方法的实现；针对当前的组件来说，其他引入的组件都算是测试过的，测试具体实现也是在各自组件的TEST里面，所以当前组件不需要关注引入的东东，直接MOCK掉，然后对需要调用的方法，写假的实现，让你的组件调用到你写的假实现里面去就可以了。