在 React Redux 开发过程中，良好的测试是保证代码质量与稳定的重要手段。Jest 是一个非常流行的 JavaScript 测试框架，而 Enzyme 则是一个 React 组件测试工具。本文将围绕如何使用 Jest + Enzyme 来测试 React Redux 应用，详细解析一些相关问题。
快速入门
在开始之前，我们需要先安装 Jest 和 Enzyme 库：
npm install --save-dev jest enzyme enzyme-adapter-react-16
在 Jest 中测试 React Redux 应用的流程如下：
- 安装所需依赖库；
- 编写测试文件；
- 运行 Jest 测试。
下面我们来看一个简单示例：
// Counter.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Counter from './Counter';
describe('Counter', () => {
it('should increment the counter upon button clicks', () => {
const wrapper = shallow(<Counter />);
expect(wrapper.find('.counter').text()).toBe('0');
wrapper.find('button').simulate('click');
expect(wrapper.find('.counter').text()).toBe('1');
});
});在上面的示例中，我们通过 Enzyme 的 shallow 方法来创建一个 Counter 组件实例，然后检查它的初始值是否为 0。接着我们通过 simulate 方法对按钮点击事件进行模拟，并再次检查计数器的值是否更新为 1。
以上就是 Jest + Enzyme 最基础的使用步骤。接下来，我们将详细解析其中一些常见的问题。
如何测试 Redux 相关代码
在测试 React Redux 应用时，我们通常需要测试 Redux 相关代码，而 Redux 的核心在于 reducer 和 action。我们需要确保它们在不同情况下能够正确地更新和反映应用的状态。
测试 Reducer
Reducer 是 Redux 中的一个纯函数，它以当前状态和一个给定的 action 作为参数，并返回一个新的状态。我们可以编写一个 reducer 测试用例，以确保其能够正确处理各种情况。
下面是一个简单的示例：
// counterReducer.test.js
import counterReducer from './counterReducer';
describe('counterReducer', () => {
it('should return the initial state', () => {
expect(counterReducer(undefined, {})).toEqual({ count: 0 });
});
it('should handle INCREMENT', () => {
const action = { type: 'INCREMENT' };
expect(counterReducer({ count: 0 }, action)).toEqual({ count: 1 });
});
it('should handle DECREMENT', () => {
const action = { type: 'DECREMENT' };
expect(counterReducer({ count: 1 }, action)).toEqual({ count: 0 });
});
});在上面的示例中，我们编写了以下测试用例：
- 测试 reducer 在未提供状态参数时是否能够正确返回初始状态；
- 测试 reducer 在接收到
INCREMENT动作时是否能够正确更新状态； - 测试 reducer 在接收到
DECREMENT动作时是否能够正确更新状态；
我们通过 toEqual 方法判断 reducer 的输出是否与预期的状态相同。如果测试通过，我们就可以确信 reducer 能够按照预期正确地工作了。
测试 Action
Action 是 Redux 中描述在应用中发生事件的普通 JavaScript 对象。它们只是简单的传递有关何时还原状态的信息。我们不会对它们进行测试。但是，当我们创建一个 action 时，我们可能会遇到一些问题。
下面是一个简单的示例：
// counterActions.test.js
import { increment, decrement } from './counterActions';
describe('counterActions', () => {
it('should create an action to increment the counter', () => {
const expectedAction = { type: 'INCREMENT' };
expect(increment()).toEqual(expectedAction);
});
it('should create an action to decrement the counter', () => {
const expectedAction = { type: 'DECREMENT' };
expect(decrement()).toEqual(expectedAction);
});
});在上面的示例中，我们测试了两个 action，分别是 increment 和 decrement。我们使用 toEqual 方法来比较预期的输出是否与实际输出相同。如果测试通过，我们就可以确保我们的 action 能够正确生成。
如何 Mock 接口请求
当我们在测试 React 组件时，经常需要为组件提供 mock 数据或 mock 接口请求。这些 mock 数据和请求通常会掩盖掉真正的网络请求，从而使我们的测试变得更加可控和可靠。
下面是一个示例，我们将展示如何使用 Jest 和 fetch-mock 库来 mock 接口请求：
// App.test.js
import React from 'react';
import { mount } from 'enzyme';
import App from './App';
import fetchMock from 'fetch-mock';
describe('App', () => {
beforeEach(() => {
fetchMock.reset();
fetchMock.mock('*', { data: 'test-data' });
});
afterEach(() => {
fetchMock.reset();
});
it('should render a list of products', () => {
const wrapper = mount(<App />);
expect(wrapper.find('.product').exists()).toBeTruthy();
});
});在上面的示例中，我们使用 Jest 和 Enzyme 测试了应用程序的 App 组件。我们首先用 beforeEach 重置了 mock 请求，并定义了一个 * 的 mock 响应，它将返回一个包含 data 字段的对象。然后，我们在测试运行之前渲染了组件，并使用 Enzyme 的 mount 方法来获得组件的实例。最后，我们使用 expect 断言组件是否正确渲染了产品列表。
在测试结束之后，我们使用 afterEach 重置 mock 请求，以便在下次测试中忘记清除它们时避免出现意外结果。
如何测试异步代码
在实际开发中，我们经常需要编写与后端 API 交互的代码。这些代码通常需要使用异步请求来获取数据，然后将其渲染到页面上。但是，在测试这种异步代码时，我们需要使用 Jest 的一些特殊测试工具。
测试异步代码的策略是尽早断开异步操作，并使用 Jest 提供的 done 回调来捕获异步操作完成的事件。我们可以在测试之前告诉 Jest 停止块，以便等待异步操作完成。
下面是一个示例，我们将展示如何使用 Jest 对异步代码进行测试：
// async.test.js
describe('Async tests', () => {
it('should wait for an async operation using callbacks', done => {
asyncFunction().then(() => {
expect(1).toBe(1);
done();
});
});
it('should wait for an async operation using async/await', async () => {
expect(await asyncFunction()).toBe('Return value');
});
});
function asyncFunction() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Return value');
}, 1000);
});
}在上面的示例中，我们创建了两个测试块，每个测试块测试一个异步函数。在第一个测试块中，我们传递了一个回调函数 done，并在异步操作完成时调用它。在第二个测试块中，我们使用 async/await 语法等待函数执行完成并检查函数的返回值。
如何使用 Redux-Mock-Store 测试 Redux
我们可以使用 Redux-Mock-Store 库来测试 Redux store。Redux-Mock-Store 提供了一个可存储状态的 Redux 存储对象，它可以用于测试 Redux 组件中的所有 Redux 活动，例如 Redux 中的异步操作，零散操作，计时器 dispatch 等等。
下面是一个简单的示例：
// actions.test.js
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { startFetch, fetchSuccess, fetchFailure } from './actions';
import { FETCH_START, FETCH_SUCCESS, FETCH_FAILURE } from './constants';
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
describe('Async actions', () => {
it('should create an action to start fetching', () => {
const expectedAction = { type: FETCH_START };
expect(startFetch()).toEqual(expectedAction);
});
it('should create an action to fetch countries successfully', () => {
const countries = ['USA', 'Germany', 'UK'];
const expectedAction = { type: FETCH_SUCCESS, data: { countries } };
expect(fetchSuccess(countries)).toEqual(expectedAction);
});
it('should create an action to handle fetch failure', () => {
const error = new Error('Fetch error');
const expectedAction = { type: FETCH_FAILURE, data: { error } };
expect(fetchFailure(error)).toEqual(expectedAction);
});
it('should dispatch start and success actions when fetching is successful', () => {
const store = mockStore({});
const response = { countries: ['USA', 'Germany', 'UK'] };
global.fetch = jest.fn().mockImplementation(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve(response),
})
);
const expectedActions = [
{ type: FETCH_START },
{ type: FETCH_SUCCESS, data: response },
];
return store.dispatch(startFetch()).then(() => {
expect(store.getActions()).toEqual(expectedActions);
});
});
});在上面的示例中，我们测试了异步操作和使用 Redux store 进行测试。我们首先定义了一个 Redux store，并使用 Jest 中的 mockImplementation 来模拟函数的行为，以便在调用 API 时返回 mock 数据。使用 store.getActions() 方法来获取 store 执行过的 action。
当 store 执行异步操作时，我们将其包装在一个 promise 中，并使用 Jest 中的 done 方法捕获其完成事件。在完成事件中，我们可以断言 store 中的 action 是否完全符合预期。
如何测试 React 组件的 UI
我们可以使用 Enzyme 来测试 React UI。Enzyme 是由 AirBNB 开发的一个 React 组件测试工具，它允许我们模拟组件和我们应用程序的生命周期方法，并测试它们的输出是否符合预期。
下面是一个简单的示例：
// Header.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Header from './Header';
describe('Header', () => {
it('should render', () => {
const wrapper = shallow(<Header />);
expect(wrapper.exists()).toBeTruthy();
});
it('should contain a header element', () => {
const wrapper = shallow(<Header />);
expect(wrapper.find('header').exists()).toBeTruthy();
});
it('should contain a logo', () => {
const wrapper = shallow(<Header />);
expect(wrapper.find('img').exists()).toBeTruthy();
});
});在上面的示例中，我们测试了一个简单的 React 组件 Header。我们使用 Enzyme 的 shallow 方法来创建组件实例，并使用 find 方法来查找组件中的元素。最后，我们使用 toBeTruthy 断言元素是否存在和是否符合预期。
总结
本文在 Jest 和 Enzyme 的基础上，进一步探讨了如何测试 React Redux 应用程序的各种方面。我们涵盖了 Redux reducer 和 action 的测试，mock 接口请求的测试，异步代码的测试，使用 Redux-Mock-Store 测试 Redux，以及测试 React 组件的 UI 等方面的内容。这些内容不仅对测试新手有所帮助，同时也为经验丰富的开发者提供了深刻的见解和建议。希望您能够从中受益，写出更加可靠和高质量的 React Redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f36deadd4f0e0ff7e51ae