如何使用 Jest + Enzyme 进行测试答案

【问题标题】：How do I test this using Jest + Enzyme如何使用 Jest + Enzyme 进行测试
【发布时间】：2018-11-09 15:17:12
【问题描述】：

我有一个 react + typescript 应用程序，我有一个使用 axios 完成的异步 api 调用。我想使用 Jest + Enzyme 测试该异步调用。

这就是我的行动

// load items callback
export function loadItemsSuccess(response) {
  return {
    type: LOAD_ITEMS,
    items: response.data
  };
}

// load items 
export function loadItems() {
  return function (dispatch) {
    const authOptions = {
      method: "GET",
      url: "http://192.168.99.100:3000/items
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      json: true
    };
    return axios(authOptions).then(response => {
      dispatch(loadItemsSuccess(response));
    }).catch(error => {
      console.log("Error loading items, error);
    });
  };
}

我的 reducer 简单地更新了 store：

case LOAD_ITEMS:
  console.log(action.items);
  return action.items;

【问题讨论】：

标签： javascript testing axios jestjs enzyme

【解决方案1】：

对动作进行单元测试应该测试是否调度了预期的对象。

一种方法是结合使用redux-mock-store 和axios-mock-adapter。

import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
// import any actions and types

const middleware = [thunk]
const mockStore = configureMockStore(middleware)

describe('loadItems', () => {
  it('Dispatches LOAD_ITEMS', () => {
    let mock = new MockAdapter(axios)
    mock
      .onGet('http://192.168.99.100:3000/items')
      .reply(200, { data: 'mock' })

    const store = mockStore({})
    return store.dispatch(actions.loadItems())
      .then(() => {
        const actions = store.getActions()
        expect(actions[0]).toHaveProperty('type', LOAD_ITEMS)
      })
   })
})

reducers 和 store 中的值应该作为一个单独的单元进行测试。我们只是使用mockStore 来调度操作并确保调度正确的类型。 MockAdapter 模拟网络请求。这样我们就可以围绕各种网络条件（例如 400 秒和超时）创建测试。

【讨论】：