Jest 测试时如何 mock 掉全局变量

在前端开发中，我们经常需要使用全局变量来存储一些状态或配置信息。但在进行单元测试时，这些全局变量可能会影响测试结果，因此需要将其 mock 掉。本文将介绍如何使用 Jest 测试框架来 mock 全局变量。

为什么需要 mock 全局变量

在前端开发中，全局变量是非常常见的。例如，在 Vue.js 应用中，我们通常会将一些配置信息存储在全局变量中，如：

window.appConfig = {
  apiUrl: 'https://api.example.com',
  apiKey: 'abcde12345',
  ...
}

这些全局变量在应用中被广泛使用，但在进行单元测试时，它们可能会对测试结果产生影响。例如，如果我们在测试中需要模拟一个 API 请求，但是实际上这个请求会使用全局变量中的 apiUrl 和 apiKey，那么测试结果就会与实际情况不符。

因此，我们需要在测试时将这些全局变量 mock 掉，以确保测试结果的准确性。

如何 mock 全局变量

在 Jest 中，我们可以使用 jest.spyOn 和 jest.mock 方法来 mock 全局变量。

首先，我们需要使用 jest.spyOn 方法来监控全局变量的使用情况。例如，我们要监控 window.appConfig.apiUrl 的使用，可以这样写：

const spy = jest.spyOn(window.appConfig, 'apiUrl', 'get')

这里的第三个参数 'get' 表示我们只监控全局变量的读取操作。

接下来，我们可以使用 jest.mock 方法来 mock 全局变量的值。例如，我们要将 window.appConfig.apiUrl 的值 mock 掉，可以这样写：

jest.mock('@/config', () => ({
  apiUrl: 'https://test.example.com'
}))

这里的第一个参数 '@/config' 表示要 mock 的模块，第二个参数返回一个对象，其中包含了我们要 mock 的全局变量的值。

最后，在测试完成后，我们需要使用 spy.mockRestore() 方法来还原全局变量的原始值：

afterEach(() => {
  spy.mockRestore()
})

完整的示例代码如下：

// javascriptcn.com 代码示例
import axios from 'axios'

const spy = jest.spyOn(window.appConfig, 'apiUrl', 'get')

jest.mock('@/config', () => ({
  apiUrl: 'https://test.example.com'
}))

describe('api', () => {
  afterEach(() => {
    spy.mockRestore()
  })

  test('should send request to test server', async () => {
    const response = await axios.get('/foo')
    expect(response.config.url).toBe('https://test.example.com/foo')
  })
})

总结

在进行单元测试时，我们需要将全局变量 mock 掉，以确保测试结果的准确性。在 Jest 中，我们可以使用 jest.spyOn 和 jest.mock 方法来实现全局变量的 mock。使用这些方法可以帮助我们写出更准确、更可靠的单元测试。

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