用于从数据库分派数据的 Redux 操作的单元测试

Question

我有一个像下面这样的动作

index.js

export const dataCount = () => {
  return async (dispatch) => {
    getDataCount().then((data) => {
      dispatch({ type: 'FETCH_DATA_COUNT', payload: data});
    });
  };
};

这里的 getDataCount 是一个辅助函数，它返回一个带有从数据库中获取的数据的承诺。

我的测试暂时是这样的。

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import dataCount from '../index';
import getDataCount from '../helper';
    
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
const store = mockStore();
let dataValue = '';

describe('fetchData', () => {
  beforeEach(() => { // Runs before each test in the suite
    dataValue = jest.fn(getDataCount);
    store.clearActions();
  });

  it('has the correct action and payload for dataCount', async () => {
    dataValue .mockReturnValue({ total : 13 });
    const expectedActions = [
      {
        payload: dataValue(),
        type: 'FETCH_DATA_COUNT'
      }
    ];
    await getDataCount().then((res) => {
        store.dispatch(dataCount());
        expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

测试失败，因为 store.getActions() 返回 [] 并且我知道我在调度时做错了什么。任何建议都会有很大帮助。

Answer 1

有几件事我们可以通过这个测试做得更好。

您的动作创建者应该返回我们在内部使用的承诺。如果我们这样做，我们可以在异步操作完成后将事情链接到调度上。由于它的 async 关键字，您的确实已经返回了一个承诺，但这可能会导致时间问题。

export const dataCount = () => {
  return async (dispatch) => {
    return getDataCount().then((data) => {
      dispatch({ type: 'FETCH_DATA_COUNT', payload: data });
    });
  };
};

第二个变化是将我们的断言链接在测试代码的调度后面的测试中。所以我们等待调度完全解决，然后比较动作。

it('has the correct action and payload for dataCount', async () => {
  const expectedActions = [
    {
      payload: { total: 13 },
      type: 'FETCH_DATA_COUNT'
    }
  ];
  // await the whole promise chain for jest to know how long to wait
  await store.dispatch(dataCount())
    .then(() => { // dispatch is resolved here
      expect(store.getActions()).toEqual(expectedActions)
    })
});

第三件事，dataValue 模拟没有按照你的想法做。要模拟这个函数，你必须依赖注入它。最简单的情况是将其作为参数提供给dataCount。

store.dispatch(dataCount(dataValue))

依赖注入对您的单元测试有好处，因为现在测试将进入网络或getDataCount 的任何地方，这会使您的测试变慢并且容易出错。

如果我有任何未解决的问题或错误，请告诉我。