Jest 中如何 mock 掉需要使用到 Env 的依赖？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用 Jest 进行单元测试。但是有时候我们会遇到需要使用到环境变量的依赖，这就会导致测试失败。在这篇文章中，我们将介绍如何使用 Jest 中的 mock 功能来解决这个问题。

环境变量的作用

在前端开发中，有时候我们需要使用到环境变量来配置一些参数，比如后端接口的地址、API Key 等等。这些参数通常是不应该硬编码在代码中的，而是应该通过环境变量来配置。

在 Node.js 中，我们可以通过 process.env 来访问环境变量。比如下面的代码会读取名为 API_KEY 的环境变量：

const apiKey = process.env.API_KEY;

Jest 中的 mock

Jest 是一个流行的 JavaScript 测试框架，它提供了丰富的 mock 功能。使用 mock 可以模拟一些对象或函数的行为，从而使测试更加容易。

在 Jest 中，我们可以使用 jest.mock 来创建一个 mock。比如下面的代码会创建一个名为 axios 的 mock：

jest.mock('axios');

这个 mock 会替换掉原来的 axios 模块，从而使我们可以控制它的行为。

如何 mock 环境变量

有时候我们需要使用到环境变量的依赖，比如下面这个依赖：

const apiKey = process.env.API_KEY;
const url = `https://api.example.com?key=${apiKey}`;
const response = await fetch(url);

这个依赖会从环境变量中读取 API_KEY，然后使用它来构造 URL，最终发送请求。如果我们不设置 API_KEY 环境变量，这个测试就会失败。

为了解决这个问题，我们可以使用 Jest 的 mock 功能来 mock 环境变量。具体来说，我们可以使用 jest.spyOn 来 mock process.env 对象，然后设置它的值：

// javascriptcn.com 代码示例
describe('test', () => {
  beforeEach(() => {
    jest.resetModules();
    process.env.API_KEY = 'test-api-key';
  });

  afterEach(() => {
    delete process.env.API_KEY;
  });

  it('should work', async () => {
    jest.spyOn(process, 'env').mockReturnValueOnce({ API_KEY: 'test-api-key' });

    const fetchMock = jest.fn(() => Promise.resolve({}));
    jest.doMock('node-fetch', () => fetchMock);

    const { default: fetchData } = await import('./fetchData');
    await fetchData();

    expect(fetchMock).toHaveBeenCalledWith('https://api.example.com?key=test-api-key');
  });
});

这个测试会使用 jest.spyOn 来 mock process.env 对象，并设置它的值为 { API_KEY: 'test-api-key' }。然后它会使用 jest.doMock 来 mock node-fetch 模块，从而控制它的行为。最后它会调用 fetchData 函数，并断言请求的 URL 是否符合预期。

总结

在本文中，我们介绍了如何使用 Jest 中的 mock 功能来解决需要使用到环境变量的依赖的测试问题。具体来说，我们使用 jest.spyOn 来 mock process.env 对象，并设置它的值。然后我们使用 jest.doMock 来 mock node-fetch 模块，从而控制它的行为。最后我们调用函数并断言结果是否符合预期。这个方法可以帮助我们在使用 Jest 进行单元测试时更加方便地处理环境变量相关的问题。

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