如何使用 Jest 正确测试被拒绝的承诺？

Question

代码

import { createUser } from '../services';
...
...

handleFormSubmit = () => {  
  this.setState({ loading: true });
  createUser()
    .then(() => {
      this.setState({
        loading: false,
      });
    })
    .catch(e => {
       this.setState({
         error: e,
       });
    });
};

测试

 it('rejects...', () => {
    const Container = createUserContainer(CreateUser);
    const wrapper = shallow(<Container />);  

    return wrapper.instance().handleFormSubmit()
      .catch(e => {
         console.log("State: ", wrapper.state());
         expect(e).toEqual('error');
      });
 });

模拟

export const createUser = function() {
  return new Promise((resolve, reject) => {
    reject('error');
  });
};

测试确实强制代码进入方法中的catch。所以状态确实被设置为“错误”。

但在我的测试中，它并没有按照我的预期进行，并且在测试状态更改之前等待 Promise 拒绝。 我不确定在这里尝试什么，我应该使用 async/await 吗？

所以这是我想要等待的 createUser 方法，但我不确定我的实现是否允许这样做。

Answer 1

你应该这样做：

it('rejects...', () => {
  const Container = createUserContainer(CreateUser);
  const wrapper = shallow(<Container />);  
  return expect(wrapper.instance().handleFormSubmit()).rejects.toEqual('error');
});

我认为这样更干净。你可以看到这个方法in the official docs。

Answer 2

测试失败，因为它不知道主题是异步的。它可以通过使用done 参数或使测试函数async 来修复。

请注意，还需要设置预期断言的数量，以便即使不采用 catch 分支，测试也会失败。

async/await风格：

 it('rejects...', async () => {
    expect.assertions(1);
    const Container = createUserContainer(CreateUser);
    const wrapper = shallow(<Container />); 

    await wrapper.instance().handleFormSubmit()
      .catch(e => {
         console.log("State: ", wrapper.state());
         expect(e).toEqual('error');
      });
 });

旧式done参数：

 it('rejects...', done => {
    expect.assertions(1);
    const Container = createUserContainer(CreateUser);
    const wrapper = shallow(<Container />);  

    wrapper.instance().handleFormSubmit()
      .catch(e => {
         console.log("State: ", wrapper.state());
         expect(e).toEqual('error');
         done();
      });
 });

Asynchronous Testing Reference

expect.assertions reference

Answer 3

您的代码看起来正确。为什么说它不等待 Promise 拒绝？我要做的唯一不同是利用 Jest 的模拟功能，所以改变

模拟

export const createUser = function() {
  return new Promise((resolve, reject) => {
    reject('error');
  });
};

到

测试

jest.mock('../services');
const services = require('../services');

const createUser = jest.spyOn(services, "createUser");
createUser.mockRejectedValue("error");

...

it('rejects...', () => {

无需单独的 Mock 文件

Answer 4

在您的代码中，handleFormSubmit 函数应该返回 Promise，您可以在测试中等待。此外，您需要从成功和错误回调中返回真实数据以分别解决和拒绝承诺。

handleFormSubmit = () => {  
  this.setState({ loading: true });
  return createUser()
    .then(() => {
      this.setState({
        loading: false,
      });
      return true;
    })
    .catch(e => {
       this.setState({
         error: e,
       });
       throw e;
    });
};

在您的实际代码中，您在catch 处理程序中发现了错误，并试图在测试用例代码中进一步捕获它。因此catch 不能进一步链接，而您可以链接then 多次。

参考 Promise 文档： https://www.peterbe.com/plog/chainable-catches-in-a-promise