Jest 完全入门教程（二）-JavaScript中文网-JavaScript教程资源分享门户

前言

在上一篇文章中，我们讲解了 Jest 的基础知识以及如何进行简单的测试。在本篇文章中，我们将继续深入学习 Jest 的高级特性，包括异步测试、mock 函数以及 snapshot。

异步测试

在实际项目中，我们经常需要进行异步操作，比如发送 AJAX 请求或者执行定时任务等。Jest 提供了多种方式来处理异步测试。

回调函数

在 Jest 中，我们可以使用回调函数来处理异步操作，例如：

test('callback test', done => {
  setTimeout(() => {
    expect(1 + 1).toBe(2);
    done();
  }, 1000);
});

在这个例子中，我们使用了 setTimeout 模拟了一个异步操作，当异步操作完成后，我们使用 done() 函数通知 Jest 测试完成。

Promise

另一种处理异步操作的方式是使用 Promise，例如：

test('promise test', () => {
  return new Promise(resolve => {
    setTimeout(() => {
      expect(1 + 1).toBe(2);
      resolve();
    }, 1000);
  });
});

在这个例子中，我们使用 Promise 来处理异步操作，当 Promise 被 resolve 后，Jest 测试完成。

async/await

最后一种处理异步操作的方式是使用 async/await，例如：

test('async/await test', async () => {
  await new Promise(resolve => {
    setTimeout(() => {
      expect(1 + 1).toBe(2);
      resolve();
    }, 1000);
  });
});

在这个例子中，我们使用 async/await 来处理异步操作，当异步操作完成后，Jest 测试完成。

Mock 函数

在实际项目中，我们经常需要模拟函数的行为，例如模拟 AJAX 请求或者模拟定时任务等。Jest 提供了 mock 函数来实现这个功能。

创建 Mock 函数

在 Jest 中，我们可以使用 jest.fn() 函数来创建一个 Mock 函数，例如：

const mockFn = jest.fn();

在这个例子中，我们创建了一个名为 mockFn 的 Mock 函数。

使用 Mock 函数

在 Jest 中，我们可以使用 Mock 函数来模拟函数的行为，例如：

const mockFn = jest.fn();
mockFn.mockReturnValue(42);
expect(mockFn()).toBe(42);

在这个例子中，我们使用 Mock 函数来模拟一个函数，当这个函数被调用时，它会返回 42。

Mock 模块

在 Jest 中，我们可以使用 jest.mock() 函数来模拟一个模块的行为，例如：

jest.mock('./ajax', () => ({
  get: jest.fn().mockResolvedValue({ data: 'hello' }),
}));

在这个例子中，我们使用 jest.mock() 函数来模拟一个名为 ajax 的模块，当这个模块被引入时，它会返回一个 Mock 对象。

Snapshot

在实际项目中，我们经常需要测试组件的渲染结果。Jest 提供了 snapshot 功能来实现这个功能。

创建 Snapshot

在 Jest 中，我们可以使用 toMatchSnapshot() 函数来创建一个 Snapshot，例如：

test('snapshot test', () => {
  const component = renderer.create(<Button>Click Me</Button>);
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

在这个例子中，我们使用 toMatchSnapshot() 函数来创建一个名为 snapshot test 的 Snapshot。

更新 Snapshot

在 Jest 中，我们可以使用 -u 参数来更新 Snapshot，例如：

jest -u

在这个例子中，我们使用 -u 参数来更新所有的 Snapshot。

结语

在本篇文章中，我们深入学习了 Jest 的高级特性，包括异步测试、mock 函数以及 snapshot。希望本篇文章对你有所帮助，如果有任何问题或建议，请在评论区留言。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d13ddca941bf71342a10a2

Jest 完全入门教程（二）

前言