前言
Redux 是一个非常流行的 JavaScript 状态管理库,但如何测试 Redux 却是一个特别的挑战。在本文中,我们将详细介绍如何在 Jest 中测试 Redux 应用程序,包括如何编写测试用例和使用 Jest 提供的各种功能进行测试。
基础概念
在开始测试 Redux 之前,我们需要了解一些基本的概念。
Store
Store 是 Redux 中的一个核心概念,它是一个保存状态的容器,它管理着应用程序的状态。通常来说,一个应用程序只能有一个 Store。
Action
Action 是一个简单的 JavaScript 对象,用于描述发生了什么。一个 Action 应该包含一个 type 字段,用于描述 Action 的类型。
Reducer
Reducer 是一个纯函数,它接收先前的 state 和一个 action,并返回一个新的 state。
测试场景
在本文中,我们将使用一个简单的 Todo 应用程序来说明如何在 Jest 中测试 Redux。我们将测试以下场景:
- 测试 reducer 是否正常工作。
- 测试 action 是否正确地被分发。
- 测试组件是否正确地连接到 store 中。
编写测试用例
测试 reducer
我们从测试 reducer 开始。为了测试 reducer,我们需要两个东西:一个 action 和一个初始 state。我们可以使用 Jest 提供的 expect
和 toEqual
函数来测试 reducer 是否正确工作。
import { ADD_TODO } from './actions'; import todos from './reducers'; describe('todos reducer', () => { it('should return the initial state', () => { expect(todos(undefined, {})).toEqual([]); }); it('should handle ADD_TODO', () => { expect( todos([], { type: ADD_TODO, text: 'Test Add Todo', }) ).toEqual([ { text: 'Test Add Todo', completed: false, }, ]); expect( todos( [ { text: 'Test Todo', completed: false, }, ], { type: ADD_TODO, text: 'Test Add Todo', } ) ).toEqual([ { text: 'Test Todo', completed: false, }, { text: 'Test Add Todo', completed: false, }, ]); }); });
测试 action
接下来,我们将测试 action 是否正确地被分发。我们可以使用 Jest 提供的 spy
函数来监视一些函数是否被调用。
import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import { addTodo, ADD_TODO } from './actions'; const middlewares = [thunk]; const mockStore = configureMockStore(middlewares); describe('actions', () => { it('should create an action to add a todo', () => { const text = 'Test Add Todo'; const expectedAction = { type: ADD_TODO, text, }; expect(addTodo(text)).toEqual(expectedAction); }); }); describe('async actions', () => { it('creates ADD_TODO when adding todo has been done', () => { const expectedActions = [ { type: ADD_TODO, text: 'Test Add Todo' }, ]; const store = mockStore({ todos: [] }); return store.dispatch(addTodo('Test Add Todo')).then(() => { // return of async actions expect(store.getActions()).toEqual(expectedActions); }); }); });
测试组件连接到 store 中
最后,我们将测试组件是否正确地连接到 store 中。我们可以使用 Jest 提供的 render
函数来测试组件是否正常渲染。
import React from 'react'; import { shallow } from 'enzyme'; import configureMockStore from 'redux-mock-store'; import TodoList from './TodoList'; const middlewares = []; const mockStore = configureMockStore(middlewares); function setup() { const initialState = { todos: [] }; const store = mockStore(initialState); const props = { todos: [], actions: { addTodo: jest.fn(), }, }; const enzymeWrapper = shallow(<TodoList {...props} />, { context: { store }, }); return { props, enzymeWrapper, store, }; } describe('TodoList Component', () => { it('should render self and subcomponents', () => { const { enzymeWrapper } = setup(); expect(enzymeWrapper.find('.todoList').exists()).toBe(true); }); });
总结
在本文中,我们介绍了如何在 Jest 中测试 Redux 应用程序。我们学习了如何编写测试用例,并使用各种 Jest 功能进行测试。在编写测试用例时,请务必牢记三个重要的 Redux 概念:Store、Action 和 Reducer。通过遵循这些步骤,您可以轻松地测试您的 Redux 应用程序,以确保它们的正确性和稳定性。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6592bc91eb4cecbf2d77beef