在前端开发中，测试是一个非常重要的环节，能够有效地降低系统出错的可能性。
在 React 开发中，使用 Jest 进行测试是一种比较常见的方法。本文将重点介绍如何使用 Jest 对 React Component 和 Flux Action 进行测试。
Jest 简介
Jest 是 Facebook 开发的一款 JavaScript 测试框架，具有易用性和高效性等特点。在使用 Jest 进行测试时，可以通过断言（assertion）来验证代码的正确性。
Jest 支持多种测试场景，例如函数测试、异步测试、快照测试等。
React Component 测试
在 React 中，Component 是应用程序的基本构建块。因此，对 Component 进行测试非常重要。
测试方法
React Component 的测试，一般采用组件渲染测试和用户行为测试两种方法。
组件渲染测试
组件渲染测试是指测试组件是否能够正常渲染，并生成正确的标记（markup）。
测试用例示例：
import React from 'react'
import { render } from '@testing-library/react'
import Component from '../Component'
test('component renders correctly', () => {
const { getByTestId } = render(<Component />)
expect(getByTestId('success-message')).toBeInTheDocument()
})以上示例中，使用 render 函数生成组件渲染结果，然后使用 getByTestId 获取组件中的元素，并验证该元素是否存在。
用户行为测试
用户行为测试是指测试组件在接受用户操作时是否能够生成正确的结果。
测试用例示例：
// www.javascriptcn.com code example
import React from 'react'
import { fireEvent, render } from '@testing-library/react'
import Component from '../Component'
test('component updates successfully', () => {
const { getByTestId, getByText } = render(<Component />)
fireEvent.click(getByText('Submit'))
expect(getByTestId('success-message')).toBeInTheDocument()
})以上示例中，使用 fireEvent 模拟用户点击 Submit 按钮，然后使用 getByTestId 验证组件中的元素是否正确。
外部依赖
在实际开发中，React Component 通常会依赖一些外部数据或服务，例如 Redux、GraphQL 等。为此，在测试时需要使用 mock 模块来模拟这些依赖。
测试用例示例：
// www.javascriptcn.com code example
import React from 'react'
import { render } from '@testing-library/react'
import { Provider } from 'react-redux'
import configureMockStore from 'redux-mock-store'
import Component from '../Component'
const mockStore = configureMockStore()
test('component renders successfully', () => {
const store = mockStore({
data: {},
})
const { getByTestId } = render(
<Provider store={store}>
<Component />
</Provider>
)
expect(getByTestId('success-message')).toBeInTheDocument()
})以上示例中，使用 redux-mock-store 模拟了一个 Redux 仓库，然后在测试中将 Provider 组件的 store 属性设置为模拟仓库，来模拟外部依赖。
Flux Action 测试
在 React 开发中，Flux 是一种常见的数据管理模型，其中 Action 负责更新应用程序的状态。因此，对 Action 进行测试非常关键。
测试方法
Flux Action 的测试，一般采用测试函数生成器（test function generators）和 Action Creator 测试两种方法。
测试函数生成器
测试函数生成器是一种自动生成测试函数的工具，可以大量减少测试代码的工作量。
测试用例示例：
// www.javascriptcn.com code example
import { createTestAction } from '../actions/test'
describe('createTestAction', () => {
it('returns the correct action', () => {
const data = {
name: 'test',
value: 123,
}
const expectedAction = {
type: 'TEST_ACTION',
payload: data,
}
expect(createTestAction(data)).toEqual(expectedAction)
})
})以上示例中，使用 createTestAction 生成测试用例，验证生成的 Action 是否与预期的 Action 相同。
Action Creator 测试
Action Creator 测试是指测试 Action Creator 是否能够正确生成 Action。
测试用例示例：
// www.javascriptcn.com code example
import { createTestAction } from '../actions/test'
test('createTestAction returns the correct action', () => {
const data = {
name: 'test',
value: 123,
}
const expectedAction = {
type: 'TEST_ACTION',
payload: data,
}
expect(createTestAction(data)).toEqual(expectedAction)
})以上示例中，直接调用 Action Creator，并验证生成的 Action 是否与预期的 Action 相同。
结语
正如我们在本文中了解到的，使用 Jest 测试 React Component 和 Flux Action 是非常重要的。在测试中，我们需要注意组件的不同状态、用户的不同操作以及外部依赖等因素。希望本文对您在使用 Jest 进行测试方面提供了一些帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67811ff34b0a96d284d81fb7