如何在 Jest 中进行单元测试？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，单元测试是非常重要的一环。它能够帮助我们及时发现代码中的问题，提高代码质量，减少后期维护成本。Jest 是一个非常流行的 JavaScript 单元测试框架，它具有易用性、速度快、功能强大等特点。本文将介绍如何在 Jest 中进行单元测试。

安装 Jest

首先，我们需要安装 Jest。可以使用 npm 或 yarn 进行安装：

npm install --save-dev jest
# 或
yarn add --dev jest

安装完成后，我们可以在项目中创建一个测试文件夹，例如 tests，用于存放测试文件。

编写测试用例

在 Jest 中，我们可以使用 test 函数来编写测试用例。例如，我们有一个 add 函数，用于实现两个数相加的功能。我们可以编写如下的测试用例：

// javascriptcn.com 代码示例
function add(a, b) {
  return a + b;
}

test('add function should work correctly', () => {
  expect(add(1, 2)).toBe(3);
  expect(add(0, 0)).toBe(0);
  expect(add(-1, 1)).toBe(0);
});

上述代码中，我们使用 test 函数编写了一个测试用例，用于测试 add 函数的功能。expect 函数用于断言，我们可以使用 toBe 方法来判断函数的返回值是否符合预期。

运行测试

编写完测试用例后，我们可以运行 Jest 来执行测试：

npx jest
# 或
yarn jest

Jest 会自动查找项目中的测试文件，并执行其中的测试用例。测试结果会以表格的形式输出到控制台中。

高级用法

除了基本的测试用例编写和运行外，Jest 还具有许多高级用法，例如异步测试、mock、snapshot 等。这里我们简单介绍一下。

异步测试

在实际开发中，我们经常需要进行异步操作，例如调用接口获取数据。在 Jest 中，我们可以使用 async 和 await 关键字来编写异步测试用例。例如，我们有一个异步函数 fetchData，用于获取数据：

async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data.title;
}

我们可以编写如下的测试用例：

test('fetchData should return correct data', async () => {
  const data = await fetchData();
  expect(data).toBe('delectus aut autem');
});

上述代码中，我们使用 async 和 await 来等待异步函数返回结果，然后使用 expect 函数进行断言。

Mock

在测试中，我们经常需要模拟一些数据或对象。在 Jest 中，我们可以使用 jest.fn 来创建一个 mock 函数。例如，我们有一个函数 getUser，用于获取用户信息：

async function getUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const data = await response.json();
  return data;
}

我们可以使用 jest.fn 来创建一个 mock 函数，模拟返回数据：

// javascriptcn.com 代码示例
test('getUser should return correct data', async () => {
  const mockData = {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    address: {
      street: 'Kulas Light',
      suite: 'Apt. 556',
      city: 'Gwenborough',
      zipcode: '92998-3874',
      geo: {
        lat: '-37.3159',
        lng: '81.1496',
      },
    },
    phone: '1-770-736-8031 x56442',
    website: 'hildegard.org',
    company: {
      name: 'Romaguera-Crona',
      catchPhrase: 'Multi-layered client-server neural-net',
      bs: 'harness real-time e-markets',
    },
  };
  const mockFetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve(mockData) }));
  global.fetch = mockFetch;
  const data = await getUser(1);
  expect(data).toEqual(mockData);
});

上述代码中，我们使用 jest.fn 创建了一个 mock 函数，模拟了 fetch 函数的返回值。然后使用 global.fetch 将 fetch 函数替换为 mock 函数，从而进行测试。

Snapshot

在测试中，我们经常需要验证组件的渲染结果是否符合预期。在 Jest 中，我们可以使用 snapshot 功能来进行组件渲染测试。例如，我们有一个组件 Button，用于渲染一个按钮：

function Button(props) {
  return (
    <button className="btn" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

我们可以使用 snapshot 功能来测试组件的渲染结果：

test('Button should render correctly', () => {
  const tree = renderer.create(<Button label="Click me" />).toJSON();
  expect(tree).toMatchSnapshot();
});

上述代码中，我们使用 renderer.create 来渲染组件，并使用 toJSON 方法将渲染结果转换为 JSON 格式。然后使用 toMatchSnapshot 方法来进行快照测试，Jest 会将渲染结果保存到一个文件中，下次测试时会自动比对这个文件。

总结

本文介绍了如何在 Jest 中进行单元测试，包括安装 Jest、编写测试用例、运行测试和高级用法。单元测试是前端开发中不可或缺的一环，能够帮助我们提高代码质量，减少后期维护成本。希望本文能够对大家有所帮助。

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