Preact 集成测试

在现代前端开发中，集成测试是非常重要的一部分。它可以帮助我们确保各个组件之间能够正确地交互和协作。本章将详细介绍如何使用 Jest 和 Testing Library 对 Preact 应用进行集成测试。

为什么要进行集成测试

集成测试可以确保不同模块之间的接口能够正常工作，这对于复杂的应用来说尤为重要。通过集成测试，我们可以验证组件之间的数据流动是否正确，以及它们是否能正确地响应用户的操作。

准备环境

在开始集成测试之前，我们需要安装必要的库。首先，确保你已经安装了 Node.js 和 npm。

安装依赖

我们需要以下依赖：

• preact: 用于创建 Preact 组件。
• jest: 一个流行的 JavaScript 测试框架。
• @testing-library/preact: 提供用于 Preact 的测试工具。

npm install preact jest @testing-library/preact --save-dev

配置 Jest

为了使 Jest 能够识别 .tsx 文件，我们需要配置 Jest 使用 Babel。首先，安装所需的 Babel 插件：

npm install @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime @testing-library/jest-dom --save-dev

然后，在项目根目录下创建一个 babel.config.json 文件，并添加以下内容：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

接下来，创建或更新 jest.config.js 文件，添加以下内容：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
};

最后，创建一个 setupTests.ts 文件来设置一些全局变量和匹配器：

import '@testing-library/jest-dom/extend-expect';

创建一个简单的 Preact 应用

在开始写测试之前，我们先创建一个简单的 Preact 应用作为示例。假设我们有一个简单的计数器应用，其中有一个按钮和一个显示当前计数的文本。

// www.javascriptcn.com code example
// Counter.tsx
import { h, Component } from 'preact';

interface CounterProps {}
interface CounterState {
  count: number;
}

export default class Counter extends Component<CounterProps, CounterState> {
  constructor(props: CounterProps) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

编写测试

现在我们可以开始为这个简单的计数器应用编写集成测试了。

引入依赖

在你的测试文件中，你需要引入 Preact、Testing Library 和 Jest：

import { render, fireEvent } from '@testing-library/preact';
import '@testing-library/jest-dom/extend-expect';
import Counter from './Counter';

编写测试用例

测试初始状态

首先，我们测试组件的初始状态：

test('renders initial state', () => {
  const { getByText } = render(<Counter />);
  expect(getByText('Count: 0')).toBeInTheDocument();
});

测试按钮点击事件

接着，我们测试按钮点击事件能否改变计数：

test('increment button works', () => {
  const { getByText } = render(<Counter />);
  fireEvent.click(getByText('Increment'));
  expect(getByText('Count: 1')).toBeInTheDocument();
});

测试多次点击

最后，我们测试多次点击按钮的效果：

test('multiple increments work correctly', () => {
  const { getByText } = render(<Counter />);
  fireEvent.click(getByText('Increment'));
  fireEvent.click(getByText('Increment'));
  expect(getByText('Count: 2')).toBeInTheDocument();
});

执行测试

现在你可以运行测试了：

npx jest

你应该能看到所有测试都通过了。

小结

通过以上步骤，我们学习了如何使用 Jest 和 Testing Library 对 Preact 应用进行集成测试。这种测试方法不仅可以帮助我们验证组件的功能，还能确保组件之间的交互是正确的。希望这能帮助你在实际项目中更好地进行集成测试。