如何在 Jest 中编写 mock 函数-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是非常重要的一环。Jest 是一个流行的前端测试框架，它提供了丰富的 API 来方便我们编写测试用例。其中一个重要的功能就是 Mock 函数。Mock 函数可以模拟任何你想模拟的函数，并且可以让我们方便地测试一些难以测试的代码。本文将介绍如何在 Jest 中编写 Mock 函数。

什么是 Mock 函数

Mock 函数在测试中经常用到，它可以模拟任何你想模拟的函数，并且在测试中替代原有函数。这样就可以避免在测试时调用一些不必要的接口，或者是一些需要连接数据库或网络的函数，从而提高测试的效率和可靠性。

Mock 函数有以下几个优点：

能够有效测试与外部依赖的代码；
能够帮助我们测试错误和异常情况；
能够更好的判断测试的代码是否符合预期。

当我们使用 Mock 函数时，我们可以将其设置成任何我们想要的返回值，来调试和测试我们的代码。

如何编写 Mock 函数

在 Jest 中，我们可以使用 jest.fn() 创建一个 Mock 函数。下面是一个简单的例子：

// javascriptcn.com 代码示例
// 原有函数
function sum(a, b) {
  return a + b;
}

// Mock 函数
const mockSum = jest.fn((a, b) => {
  return 0;
});

在上面的例子中，我们使用 jest.fn() 创建了一个 Mock 函数 mockSum 来替代 sum 函数。在定义 Mock 函数时，我们使用了一个回调函数，并在回调函数中设置了 Mock 函数将要返回的值，这里返回了 0。

这个例子非常简单，因为我们只是在 Mock 函数中返回了一个固定的值，但是在实际的测试中，需要更多的条件和逻辑。

下面我们来看一个更具体的例子：

// javascriptcn.com 代码示例
// 原有函数
function fetchData(url, callback) {
  setTimeout(() => {
    callback(url);
  }, 1000);
}

// Mock 函数
const mockFetchData = jest.fn((url, callback) => {
  callback(url);
});

test('fetchData', () => {
  const callback = jest.fn();
  fetchData('https://www.example.com', callback);
  expect(callback).toBeCalledWith('https://www.example.com');
});

在上面的例子中，我们使用 Mock 函数 mockFetchData 来替代 fetchData 函数。在定义 Mock 函数时，我们使用了一个回调函数，并在回调函数中直接调用了传入的 callback，并将 url 作为参数传递给它。

在测试中，我们先定义了一个 callback 函数，并使用 fetchData 函数，并将这个 callback 传递给了 fetchData，然后我们使用 expect 断言，判断我们传入的 callback 是否被正确调用，并传递了正确的参数。

如何指定 Mock 函数的行为

在 Jest 中，我们可以使用 mockReturnValue 或者 mockImplementation 来指定 Mock 函数的返回值，以便在测试中验证代码的行为。

下面我们从例子入手来详细介绍：

// javascriptcn.com 代码示例
// 原有函数
function fetchDataWithPromise(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url);
    }, 1000);
    //reject(new Error('some error'));
  });
}

// Mock 函数
const mockFetchDataWithPromise = jest.fn((url) => {
  return new Promise((resolve, reject) => {
    // resolve(url);
    reject(new Error('some error'));
  });
});

test('fetchDataWithPromise', () => {
  return mockFetchDataWithPromise('https://www.example.com')
    .catch((error) => {
      expect(error).toEqual(new Error('some error'));
    });
});

在上面的例子中，我们使用 mockReturnValue 方法指定了 Mock 函数 mockFetchDataWithPromise 的返回值为一个 Promise，这个 Promise 是一个 reject 状态，并返回了一个 Error 对象。

在测试中，我们使用了 catch 方法来捕获这个异常，然后使用 expect 断言，验证是否为我们传入的异常。

除了使用 mockReturnValue 方法来指定返回值，我们还可以使用 mockImplementation 方法来实现更复杂的逻辑：

// javascriptcn.com 代码示例
// 原有函数
function fetchData(url, callback) {
  setTimeout(() => {
    callback(url);
  }, 1000);
}

// Mock 函数
const mockFetchData = jest.fn();

mockFetchData.mockImplementation((url, callback) => {
  if (url === 'https://www.example.com') {
    callback('This is a fake data.');
  } else {
    callback(new Error('Invalid URL.'));
  }
});

test('fetchData', () => {
  const callback = jest.fn();

  mockFetchData('https://www.example.com', callback);
  expect(callback).toBeCalledWith('This is a fake data.');

  mockFetchData('https://www.invalid.com', callback);
  expect(callback).toBeCalledWith(new Error('Invalid URL.'));
});

在上面的例子中，我们使用 mockImplementation 方法来实现 Mock 函数 mockFetchData 的行为。这个 Mock 函数会根据传入的参数进行判断，如果 url 是 'https://www.example.com'，则返回一个固定的值 'This is a fake data.'，否则返回一个异常 'Invalid URL.'。

在测试中，我们分别调用了 mockFetchData 函数并传入不同的参数，然后使用 expect 断言来验证它们是否被正确调用，并传递了正确的参数。

总结

Mock 函数是一个非常强大的测试工具。在 Jest 中，我们可以使用 jest.fn() 方法来创建 Mock 函数，并使用 mockReturnValue 或者 mockImplementation 方法指定 Mock 函数的返回值和行为。通过 Mock 函数，我们可以更方便地测试我们的代码，提高测试的覆盖率和可靠性。

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