Preact Testing Library 使用教程

Preact Testing Library 使用教程

preact-testing-librarySimple and complete Preact DOM testing utilities that encourage good testing practices. 项目地址:https://gitcode.com/gh_mirrors/pr/preact-testing-library

项目介绍

Preact Testing Library 是一个轻量级的解决方案，用于测试 Preact 组件。它提供了一些轻量级的工具函数，基于 preact/test-utils，旨在鼓励更好的测试实践。其主要原则是：测试越接近软件的实际使用方式，它们能提供的信心就越大。

项目快速启动

安装

首先，你需要通过 npm 安装 @testing-library/preact：

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

基本使用

以下是一个简单的测试示例：

import { render, fireEvent } from '@testing-library/preact';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  const { getByText } = render(<MyComponent />);
  expect(getByText('Hello, World!')).toBeInTheDocument();
});

test('handles click event', () => {
  const { getByText } = render(<MyComponent />);
  fireEvent.click(getByText('Click me'));
  expect(getByText('Clicked!')).toBeInTheDocument();
});

应用案例和最佳实践

应用案例

假设你有一个简单的计数器组件：

import { useState } from 'preact/hooks';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

你可以这样测试它：

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

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

最佳实践

1. 避免测试实现细节：尽量测试组件的公共接口，而不是内部实现细节。
2. 使用真实数据：尽可能使用真实数据进行测试，以确保测试更接近实际使用情况。
3. 保持测试独立：每个测试应该独立运行，不依赖于其他测试的结果。

典型生态项目

Jest

Jest 是一个广泛使用的 JavaScript 测试框架，与 Preact Testing Library 配合得很好。你可以通过以下命令安装 Jest：

npm install --save-dev jest

@testing-library/jest-dom

这个库提供了一些自定义的 Jest 匹配器，可以让你更方便地进行 DOM 相关的断言：

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

在测试文件中引入：

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

这样你就可以使用 toBeInTheDocument 等匹配器了。

通过以上步骤，你可以快速上手并开始使用 Preact Testing Library 进行组件测试。希望这个教程对你有所帮助！

preact-testing-librarySimple and complete Preact DOM testing utilities that encourage good testing practices. 项目地址:https://gitcode.com/gh_mirrors/pr/preact-testing-library