Question

我尝试使用redux mock store来测试一个返回promise的动作创建者。

import promiseMiddleware from 'redux-promise-middleware';
import nock from 'nock';
import configureStore from 'redux-mock-store';
import { domain, port } from '../../config/environment';

import { GET_ITEMS_START,
         GET_ITEMS_SUCCESS } from '../../constants/items';
import { getItems } from './items';

const promise = promiseMiddleware({
  promiseTypeSuffixes: ['START', 'SUCCESS', 'ERROR']
});

describe('Get Items', () => {
    it('should create GET_ITEMS_SUCCESS action after successfully getting items', (done) => {
      nock(`${domain}:${port}`)
        .get('/api/items')
        .reply(200, {
          _id: '1',
          text: 'Make Eggs',
          completed: false
        });

      const expectedActions = [
        { type: GET_ITEMS_START },
        { type: GET_ITEMS_SUCCESS, payload: {
          data: {  _id: '1', text: 'Make Eggs', completed: false }
        }}
      ];

      const store = mockStore({}, expectedActions, done);
      store.dispatch(getItems());
    });
  });

这是我的动作创建者代码

export function getItems() {
  return {
    type: GET_ITEMS,
    payload: {
      promise: axios.get(`${domain}:${port}/api/items`)
    }
  };
}

但结果不匹配，因为promise解决了深层嵌套对象

  Error: Expected { payload: { config: { headers: {}, method: 'get', timeout: 0, transformRequest: [ [Function] ], transformResponse: [ [Function] ], url: 'http://localhost:3000/api/items', withCredentials: undefined }, data: { _id: '1', completed: false, text: 'Make Eggs' }, headers: {}, status: 200, statusText: 'OK' }, type: 'GET_ITEMS_SUCCESS' } to equal { payload: { data: { _id: '1', completed: false, text: 'Make Eggs' } }, type: 'GET_ITEMS_SUCCESS' }
  + expected - actual

   {
     "payload": {
  -    "config": {
  -      "headers": {}
  -      "method": "get"
  -      "timeout": 0
  -      "transformRequest": [
  -        [Function]
  -      ]
  -      "transformResponse": [
  -        [Function]
  -      ]
  -      "url": "http://localhost:3000/api/items"
  -      "withCredentials": [undefined]
  -    }
       "data": {
         "_id": "1"
         "completed": false
         "text": "Make Eggs"
       }
  -    "headers": {}
  -    "status": 200
  -    "statusText": "OK"
     }
     "type": "GET_ITEMS_SUCCESS"
   }

我显然不想将所有这些深层嵌套属性复制到我的测试套件中。

有更好的方法吗？

Answer 1

如果您正在编写单元测试，则可能不需要调用实际的REST API。相反，你可以嘲笑axios并使它返回一些不会那么深的假数据。

Redux Promise Middleware + Redux Mock Store测试

1 个答案: