Question

我有一个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简单更新商店：

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

Answer 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)
      })
   })
})

减速机和商店中的值应作为单独的单元进行测试。我们只是使用mockStore来分派操作并确保调度正确的类型。 MockAdapter嘲笑网络请求。这样我们就可以围绕各种网络条件创建测试，例如400和超时。

我如何使用Jest + Enzyme进行测试

1 个答案: