如何优雅地测试 Redux-saga：使用 Jest

在使用 Redux-saga 进行异步操作管理时，测试是不可缺少的一部分，正确的测试可以保证代码的健壮性和可维护性。本文将介绍如何使用 Jest 对 Redux-saga 进行优雅的测试，包括测试 generator 函数、测试异步调用等。

什么是 Redux-saga？

Redux-saga 是一个用于管理应用程序副作用（例如异步数据获取）的库。其可以让异步操作代码更可读，更简单并更易于测试。

安装 Jest

在使用 Jest 进行测试之前，需要先安装 Jest 和相关依赖：

npm install jest redux-saga redux-logger --save-dev

测试 generator 函数

首先，我们来看如何测试 generator 函数。这里以一个简单的示例为例，演示如何编写测试用例：

// javascriptcn.com 代码示例
import { put, call } from 'redux-saga/effects'
import { fetchProducts, fetchProductsSuccess, fetchProductsError } from '../../actions/products'
import { getProducts } from '../../api/products'
import { fetchProductsSaga } from '../products'
describe('fetchProductsSaga', () => {
  const generator = fetchProductsSaga()
  it('should request and receive products', () => {
    expect(generator.next().value).toEqual(call(getProducts))
    const products = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }]
    expect(generator.next(products).value).toEqual(put(fetchProductsSuccess(products)))
    expect(generator.next()).toEqual({ done: true, value: undefined })
  })
  it('should handle errors', () => {
    expect(generator.next().value).toEqual(call(getProducts))
    const error = new Error('unable to fetch products')
    expect(generator.throw(error).value).toEqual(put(fetchProductsError(error.message)))
    expect(generator.next()).toEqual({ done: true, value: undefined })
  })
})

上述代码中，我们先在 fetchProductsSaga 方法中执行异步操作，然后依次比较 generator 函数返回的值和期望值是否相同。这里使用了 Jest 中的 expect 和 toEqual 组合进行比较。

测试异步调用

在 Redux-saga 中，我们需要对异步调用进行测试。为了实现这一点，我们可以使用 Jest 提供的 async/await 完成异步测试逻辑。下面是一个完整的测试例子：

// javascriptcn.com 代码示例
import { takeEvery } from 'redux-saga/effects'
import { ADD_TO_CART } from '../../constants/actionTypes'
import { addToCart } from '../../actions/cart'
import { addToCartAsync } from '../cart'
import productApi from '../../api/products'
describe('addToCartAsync', () => {
  const generator = addToCartAsync(addToCart(1))
  it('should dispatch action on success', async () => {
    const expectedProduct = { id: 1, title: 'Apple', price: 1.23 }
    const spy = jest.spyOn(productApi, 'getProduct').mockResolvedValue(expectedProduct)
    await generator.next()
    const dispatched = await generator.next().value
    expect(dispatched).toEqual(put(addToCart(expectedProduct)))
    spy.mockRestore()
  })
  it('should dispatch error on failure', async () => {
    const error = new Error('Could not fetch product')
    const spy = jest.spyOn(productApi, 'getProduct').mockRejectedValue(error)
    await generator.next()
    const dispatched = await generator.throw('error').value
    expect(dispatched).toEqual(put({ type: ADD_TO_CART.FAILURE, error: true, payload: error }))
    spy.mockRestore()
  })
})

在上述测试用例中，我们使用 Jest 中的 async/await 完成异步测试逻辑，通过 spy 来模拟 productApi 的返回值，依次比较生成的 saga 执行器返回的值和期望值是否相同。

更多测试技巧

使用 Jest 进行测试不仅仅如上所述，Jest 还提供了更多的测试技巧，更为全面的 Jest 测试技巧请参考官方文档：

https://jestjs.io/docs/zh-Hans/getting-started

总结

在本文中，我们介绍了如何使用 Jest 对 Redux-saga 进行测试，从 generator 函数的测试到异步调用的测试，为日常开发提供了一些技巧和建议。正确的测试可以保证代码的健壮性和可维护性，为项目的长期发展提供保障。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6535043c7d4982a6ebadd84c