Moxios不起作用的Jest酶测试用例模拟API

Question

下面是我用getAllData方法调用API并将数据设置为状态的组件代码：

class MyComponent extends Component {
 state = {
   allStatus: []
 }
 componentDidMount() {
  this.getAllData();
 }
 getAllData = async() => {
   let res = await apiCalls(`${Config.masterUrl}/ContentState`, 'GET', {}, `/user-data`, false);
   if (res) {
     this.setState({allStatus: res});
   }
  }
}

下面是测试用例，首先我调用componentDidMount并调用方法getAllData，然后使用moxios模拟API，但它没有模拟请求。

describe('Render MyComponent Component', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = setup(initialState);
    moxios.install();
  });
  afterEach(() => {
    moxios.uninstall();
  })
  
  it("should call getAllData API Success",  async(done) => {
    const responseData = {
      status: 200,
      error: null,
      data: [Array] // for example
    }
    await wrapper.instance().componentDidMount();
    await wrapper.instance().getAllData()
    moxios.wait(function() {
      const request = moxios.requests.mostRecent();
      request.respondWith(responseData)
      expect(wrapper.instance().state.allStatus.length).not.toBe(0)
      done()
    })
  })
})

Answer 1

1. 您无需手动调用componentDidMount()和getAllData()方法。

与酶v3一样，shallow应用编程接口不会调用componentDidMount和componentDidUpdate等React生命周期方法

1. 你应该先安装moxios，然后再浅层渲染组件。因为当我们浅层呈现(调用componentDidMount和getAllData)组件时，模拟应该准备就绪。

1. respondWith方法的返回值是一个承诺，你应该确保它被解决/拒绝。因此，您需要在承诺被解决或拒绝后进行断言。

例如。

MyComponent.tsx

import axios from 'axios';
import React, { Component } from 'react';

async function apiCalls(url, method) {
  return axios({ url, method }).then((res) => res.data);
}

export class MyComponent extends Component {
  state = {
    allStatus: [],
  };
  componentDidMount() {
    this.getAllData();
  }
  getAllData = async () => {
    let res = await apiCalls(`http://localhost:3000/api/ContentState`, 'GET');
    if (res) {
      this.setState({ allStatus: res });
    }
  };
  render() {
    return <div>MyComponent</div>;
  }
}

MyComponent.test.tsx

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

describe('Render MyComponent Component', () => {
  let wrapper;
  beforeEach(() => {
    moxios.install();
    wrapper = shallow(<MyComponent></MyComponent>);
  });
  afterEach(() => {
    moxios.uninstall();
  });

  it('should call getAllData API Success', (done) => {
    const responseData = {
      status: 200,
      response: [1, 2, 3],
    };
    moxios.wait(function () {
      const request = moxios.requests.mostRecent();
      request.respondWith(responseData).then(() => {
        expect(wrapper.state('allStatus')).toHaveLength(3);
        done();
      });
    });
  });
});

单元测试结果：

 PASS  examples/65702308/MyComponent.test.tsx (5.34 s)
  Render MyComponent Component
    ✓ should call getAllData API Success (246 ms)

-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------|---------|----------|---------|---------|-------------------
All files        |     100 |       50 |     100 |     100 |                   
 MyComponent.tsx |     100 |       50 |     100 |     100 | 17                
-----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.505 s