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

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
};

我的问题：

1. 通过使用调试器，它看起来不像运行模拟方法
2. 我的输出看起来像一个真正的HTTP req完成：

PASS src / components / QuestionsList / QuestionsList.spec.js PASS src / components / Question / Question.spec.js（node：48568）UnhandledPromiseRejectionWarning：未处理的promise promise（拒绝id：9）：错误：错误：网络错误（节点： 48568）[DEP0018]弃用警告：已弃用未处理的承诺拒绝。将来，未处理的承诺拒绝将使用非零退出代码终止Node.js进程。 （节点：48568）UnhandledPromiseRejectionWarning：未处理的承诺拒绝（拒绝ID：10）：错误：错误：网络错误PASS src / store / tests / actions.spec.js

3. 即使我用其他随机参数更改“toHaveBeenCalledWith()”的参数，我的测试也会通过。

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交易的方式。