Question

我有以下设置来测试异步功能。

首先，我的文件夹结构：

src/
├── App.vue
├── api
│   ├── __mocks__
│   │   └── api.js
│   └── api.js
├── components
│   ├── ...
├── main.js
└── store
    ├── __tests__
    │   └── actions.spec.js
    ├── actions.js
    ├── getters.js
    ├── index.js
    ├── mutation-types.js
    └── mutations.js

然后是我的actions.spec.js：

import * as types from '@/store/mutation-types';
import api from '@/api/api';
import {
  fetchItems,
  requestItems,
  saveQuestion,
  vote,
} from '../actions';

jest.mock('@api/api');

describe('fetchItems Action', () => {
  let state;
  let commit;
  let dispatch;
  beforeAll(() => {
    commit = jest.fn();
    dispatch = jest.fn();
    state = {
      apiEntryPoint: '',
      nextPage: 0,
    };
  });

  beforeEach(() => {
    fetchItems({
      commit,
      dispatch,
      state,
    });
  });

  it('should call a commit before fetching', () => {
    expect(commit).toHaveBeenCalledWith(types.PRE_HTTP_REQUEST);
  });

  it('should call receiveItems after succesful fetch', () => {
    setTimeout(() => {
      expect(dispatch).toHaveBeenCalledWith('receiveItems', {});
    });
  });

  it('should call a fail commit if request fails', () => {
    api.fetchItems = jest.fn(() => Promise.reject());
    setTimeout(() => {
      expect(commit).toHaveBeenCalledWith(types.FETCHED_ADS_FAIL);
    });
  });
});

api/api.js

import axios from 'axios';

axios.defaults.baseURL = 'https://polls.apiblueprint.org/';

const getUrl = () => (
  axios('/')
    .then(response => response.data.questions_url)
    .catch((err) => {
      throw err;
    })
);

const fetchItems = (url, page = 1) => (
  axios(url, { params: { page } })
    .then(response => response.data)
    .catch((err) => {
      throw err;
    })
);
export default {
  fetchItems, getUrl,
};

和api/__mocks__/api.js

const getUrl = jest.fn(() => Promise.resolve());

const fetchItems = jest.fn(() => Promise.resolve());

export default {
  fetchItems, getUrl
};

我的问题：

通过使用调试器，它看起来不像运行模拟方法
我的输出看起来像是真正的HTTP请求：

PASS src / components / QuestionsList / QuestionsList.spec.js PASS src / components / Question / Question.spec.js （节点：48568）UnhandledPromiseRejectionWarning：未处理的承诺拒绝（拒绝ID：9）：错误：错误：网络错误（节点：48568）[DEP0018]弃用警告：不推荐使用未处理的拒绝承诺。在未来，承诺拒绝未处理将以非零退出终止Node.js进程码。（节点：48568）UnhandledPromiseRejectionWarning：未处理的承诺拒绝（拒绝ID：10）：错误：错误：网络错误通过src / store / 测试 /actions.spec.js

即使我更改了＆＃34; toHaveBeenCalledWith()＆＃34;与其他随机论点。

Answer 1

在使用setTimeout的测试中，您需要使用done回调。

目前，Jest正在运行测试并在没有错误的情况下到达终点。对于Jest来说，这意味着测试已经过去了。让Jest异步运行测试的一种方法是使用done回调。

如果测试有完成回调，则Jest不会通过测试，直到调用完成回调为止。

您的代码应如下所示：

it('should call a fail commit if request fails', (done) => {
  api.fetchItems = jest.fn(() => Promise.reject());
  setTimeout(() => {
    expect(commit).toHaveBeenCalledWith(types.FETCHED_ADS_FAIL);
    done()
  });
});

您可以阅读[Jest docs中的完成回调（http://facebook.github.io/jest/docs/en/asynchronous.html#callbacks）。

Jest还有其他几种处理asynchronous code的方法。

Answer 2

万一有人遇到这种情况，需要建立解决方案以防止这种情况发生，我已经解决了这个问题：Handle UnhandledPromiseRejectionWarning Errors

未使用Jest mock - 而是运行普通方法

2 个答案: