使用 Jest 进行 UI 自动化测试的最佳实践

在前端开发中，UI 自动化测试是必不可少的一环。它可以帮助我们发现页面中的问题和缺陷，加强代码的健壮性和可维护性。而 Jest 是一款流行的 JavaScript 测试框架，它提供了丰富的工具和 API，能够帮助我们轻松实现 UI 自动化测试。本文将介绍 Jest 的最佳实践，以便您在项目中更好地使用 Jest 进行 UI 自动化测试。

安装 Jest

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

# 使用 npm 安装 Jest
npm install --save-dev jest

# 使用 yarn 安装 Jest
yarn add --dev jest

安装完成后，我们需要在项目的 package.json 文件中添加以下代码：

{
  "scripts": {
    "test": "jest"
  }
}

这样，我们就可以使用 npm test 或 yarn test 命令来运行 Jest 测试了。

编写测试用例

在项目中，我们需要编写测试用例来测试页面的各种功能和交互。下面是一个简单的示例代码，它测试了一个登录页面的表单验证和登录功能：

// javascriptcn.com 代码示例
import { render, fireEvent } from '@testing-library/react';
import Login from '../Login';

test('should show an error message when username is empty', () => {
  const { getByLabelText, getByText } = render(<Login />);
  const usernameInput = getByLabelText('Username');
  const submitButton = getByText('Submit');

  fireEvent.change(usernameInput, { target: { value: '' } });
  fireEvent.click(submitButton);

  expect(getByText('Please enter your username.')).toBeInTheDocument();
});

test('should show an error message when password is empty', () => {
  const { getByLabelText, getByText } = render(<Login />);
  const passwordInput = getByLabelText('Password');
  const submitButton = getByText('Submit');

  fireEvent.change(passwordInput, { target: { value: '' } });
  fireEvent.click(submitButton);

  expect(getByText('Please enter your password.')).toBeInTheDocument();
});

test('should show a success message when login successfully', () => {
  const { getByLabelText, getByText } = render(<Login />);
  const usernameInput = getByLabelText('Username');
  const passwordInput = getByLabelText('Password');
  const submitButton = getByText('Submit');

  fireEvent.change(usernameInput, { target: { value: 'admin' } });
  fireEvent.change(passwordInput, { target: { value: '123456' } });
  fireEvent.click(submitButton);

  expect(getByText('Login successfully.')).toBeInTheDocument();
});

在上面的代码中，我们使用了 @testing-library/react 库来进行页面渲染和事件触发，通过 render 方法渲染了一个 Login 组件，并使用 getByLabelText 和 getByText 方法获取表单元素和文本元素。然后，通过 fireEvent 方法触发事件，测试页面的各种功能和交互。

使用 Jest 提供的工具和 API

除了上面的测试用例编写外，Jest 还提供了许多工具和 API，可以帮助我们更好地进行 UI 自动化测试。下面是一些常用的工具和 API：

expect

expect 是 Jest 中最常用的断言库，它可以帮助我们判断结果是否符合预期。例如：

// javascriptcn.com 代码示例
expect(value).toBe(expectedValue);
expect(value).toEqual(expectedValue);
expect(value).not.toBe(expectedValue);
expect(value).not.toEqual(expectedValue);
expect(value).toBeTruthy();
expect(value).toBeFalsy();
expect(value).toBeNull();
expect(value).toBeDefined();
expect(value).toBeUndefined();
expect(value).toMatch(pattern);
expect(value).toHaveLength(expectedLength);
expect(value).toContain(expectedValue);

describe 和 test

describe 和 test 是 Jest 中用于组织测试用例的方法，可以帮助我们更好地管理测试用例。例如：

// javascriptcn.com 代码示例
describe('Login component', () => {
  test('should show an error message when username is empty', () => {
    // ...
  });

  test('should show an error message when password is empty', () => {
    // ...
  });

  test('should show a success message when login successfully', () => {
    // ...
  });
});

beforeEach 和 afterEach

beforeEach 和 afterEach 是 Jest 中用于在测试用例执行前和执行后执行的方法，它们可以帮助我们在测试用例中重复使用相同的代码。例如：

// javascriptcn.com 代码示例
describe('Login component', () => {
  let usernameInput, passwordInput, submitButton;

  beforeEach(() => {
    const { getByLabelText, getByText } = render(<Login />);
    usernameInput = getByLabelText('Username');
    passwordInput = getByLabelText('Password');
    submitButton = getByText('Submit');
  });

  test('should show an error message when username is empty', () => {
    fireEvent.change(usernameInput, { target: { value: '' } });
    fireEvent.click(submitButton);

    expect(getByText('Please enter your username.')).toBeInTheDocument();
  });

  test('should show an error message when password is empty', () => {
    fireEvent.change(passwordInput, { target: { value: '' } });
    fireEvent.click(submitButton);

    expect(getByText('Please enter your password.')).toBeInTheDocument();
  });

  test('should show a success message when login successfully', () => {
    fireEvent.change(usernameInput, { target: { value: 'admin' } });
    fireEvent.change(passwordInput, { target: { value: '123456' } });
    fireEvent.click(submitButton);

    expect(getByText('Login successfully.')).toBeInTheDocument();
  });
});

jest.mock

jest.mock 是 Jest 中用于模拟依赖模块的方法，可以帮助我们在测试用例中隔离依赖模块。例如：

// javascriptcn.com 代码示例
import axios from 'axios';
import { getUserInfo } from '../api';

jest.mock('axios');

test('should get user info successfully', async () => {
  axios.get.mockResolvedValue({ data: { name: 'admin' } });

  const userInfo = await getUserInfo();

  expect(userInfo).toEqual({ name: 'admin' });
});

在上面的代码中，我们使用 jest.mock 方法模拟了 axios 模块，并使用 mockResolvedValue 方法模拟了 axios.get 方法返回的数据。这样，我们就可以在测试用例中隔离 axios 模块，测试 getUserInfo 方法的正确性。

总结

使用 Jest 进行 UI 自动化测试的最佳实践包括安装 Jest、编写测试用例、使用 Jest 提供的工具和 API。通过这些实践，我们可以更好地实现 UI 自动化测试，提高项目的代码质量和可维护性。

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