npm 包 @probe.gl/test-utils 使用教程

什么是 @probe.gl/test-utils？

@probe.gl/test-utils 是一个专为 React 和 WebGL 前端开发者开发的测试工具包。它包含了一系列功能，例如基于 Jest 的测试框架、React 组件测试、WebGL 画布工具等等。

如何使用 @probe.gl/test-utils？

安装

首先，你需要安装 @probe.gl/test-utils。

npm install @probe.gl/test-utils

或者

yarn add @probe.gl/test-utils

Jest 测试框架

@probe.gl/test-utils 内置了 Jest 测试框架，并提供了一些针对 React 和 WebGL 开发的自定义 matcher。

快速开始

为了使用 Jest 测试框架，你需要创建一个 .test.js 或者 .spec.js 文件（建议放在测试文件夹中），并在其中添加一些测试用例。

例如：

import {add} from './math.js';

test('1+2=3', () => {
  expect(add(1, 2)).toBe(3);
});

这个测试用例将测试一个名为 add 的函数是否正确计算两个数字相加。

React 组件测试

如果你想要测试 React 组件，@probe.gl/test-utils 也提供了一些方便的工具，例如渲染组件和自定义 matcher。

例如：

import {render, screen} from '@testing-library/react';
import {Button} from './Button.jsx';

test('renders learn react link', () => {
  render(<Button />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

这个测试用例将测试一个名为 Button 的组件是否正确渲染。

WebGL 画布工具

除了 Jest 测试框架和 React 组件测试工具之外，@probe.gl/test-utils 还提供了一些针对 WebGL 开发的工具，例如 WebGL 画布工具。

例如：

-- -------------------- ---- -------
------ -------------- ------------- ---- -----------------------

----- ---- ------- - ---------------

----------- - --- ------- -- -- -
  ------------------ ---- ---- -----
  ------------------------------
  -------------- -- ------------- ---------------
  ---------------------------
  -------------- --- -- ---
  ------------------ ---- ---- -----
  ------------------------------
  ---------------- -
    -- ---
    -- ---
    ----- --- ---------------- -- -- ------
  ---
---

这个测试用例将测试是否正确绘制了一个红色像素。

总结

通过学习 @probe.gl/test-utils 的使用方法，我们可以更加方便快捷地编写前端测试用例，在开发过程中更好地保证代码质量。

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