javascript - 如何在 Jest 中使用 axios.create 测试外部模块返回的 promise ？

Question

我正在尝试测试由我的代码之外的模块返回的 promise ，该模块使用 axios.create 进行调用。为了测试它是否正在查看 .then 和 .catch 内部，我只是再次设置状态，但没有考虑到这一点。我到底需要告诉 Jest 做什么才能测试 .then 和 .catch 内部发生的事情？

我尝试模拟模块并监视“get”方法，但它们都不起作用。

文件.jsx

import React, { Component } from 'react';
import { request } from '../../../../global/Helper';

class File extends Component {
  constructor() {
    This.state = {
      isLoading: false,
      number: 5
    }
  }
  componentDidMount() {
    this.fetchStates();
  };
  fetchStates = () => {
    this.setState({isLoading: true});
    request.get('/api/state/')
    .then(response => {
      this.setState({ number: 10 });
    })
    .catch((err) => {
      this.setState({ number: 15 });
    });
  };
};

export { ProfileEdit };

Helper.js

import axios from 'axios';

let request = axios.create({
  baseURL: `${process.env.BASE_URL}`,
  headers: {
    'Content-Type': 'application/json'
  },
  withCredentials: true,
  crossDomain: true,
  responseType: 'json'
});

export { request };

文件.test.jsx

import React from 'react';
import * as Helper from '../../../../global/Helper';
import { File } from './File';

describe('File', () => {
  const props = {
    location: {
      state: {
      }
    },
  };

 it('should set the state twice', (done) => {
    // Arrange
    let component = mount(<ProfileEdit {...props}/>).instance();
    let setStateSpy = spyOn(ProfileEdit.prototype, 'setState');

    jest.spyOn(Helper.request, 'get').mockResolvedValue();

    // Act
    component.fetchStates();

    //Assert
    expect(setStateSpy).toHaveBeenCalledWith(jasmine.objectContaining({ number: 10 }));
    done();
  });

});

我希望它的 setstate 被调用两次，但它只调用了一次。

这是我收到的错误信息:

 expect(spy).toHaveBeenCalledWith(expected)

    Expected spy to have been called with:
      ObjectContaining {"number": 10}
    as argument 1, but it was called with
      {"isLoading": true}.

    Difference:

    - Expected
    + Received

    - ObjectContaining {
    -   "number": 10,
    + Object {
    +   "isLoading": true,
      }

      46 |     component.fetchStates();
      47 | 
    > 48 |     expect(setStateSpy).toHaveBeenCalledWith(jasmine.objectContaining({ number: 10 }));
         |                         ^
      49 |     done();
      50 |   });
      51 | });

Answer 1

似乎没有调用 then() 回调中对 this.setState() 的调用。这很可能是因为测试在 promise 可以被解决或拒绝之前完成。您可以从返回 promise 开始:

fetchStates = () => {
    return request.get('/api/state/')
        .then(response => {
            this.setState({ number: 10 });
        })
        .catch((err) => {
            this.setState({ number: 15 });
        });
}

现在你可以在你的测试中获取 promise 并在其上链接一个 then() :

 it('should set the state twice', (done) => {
    // Arrange
    let component = mount(<ProfileEdit {...props}/>).instance();
    let setStateSpy = spyOn(ProfileEdit.prototype, 'setState');

    jest.spyOn(Helper.request, 'get').mockResolvedValue();

    // Act
    return component.fetchStates()
        .then(function() {
            //Assert
            expect(setStateSpy).toHaveBeenCalledWith(jasmine.objectContaining({ number: 10 }));
            done();
        });
  });

请注意， promise 也会从您的测试中返回。然后，Jest 将接受这个 promise ，并允许它在打印有关您的测试的任何输出之前解决/拒绝。

建议:期望this.setState() 被调用要求您的测试依赖于被测试函数的细节。最好直接针对组件的最终状态进行预期，因为这样您的测试就不再依赖于调用 this.setState() 的次数。如果你这样做，那么你必须小心确保 jest 解决了所有的 promise 。