bun DOM测试

本文主要是介绍bun DOM测试，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Bun的测试运行器与现有的组件和DOM测试库（包括React Testing Library 和 happy-dom）配合得很好。

happy-dom

为了编写你的前端代码和组件的无头测试，我们推荐 happy-dom。Happy DOM 使用纯 JavaScript 实现了一套完整的 HTML 和 DOM API，使得能够高保真地模拟浏览器环境。

要开始使用，请将 @happy-dom/global-registrator 包作为开发依赖项进行安装。

bun add -d @happy-dom/global-registrator

我们会在运行测试之前使用 Bun 的预加载功能来注册 happy-dom 全局变量。这一步骤将使浏览器API（如document）在全局范围内可用。在项目的根目录中创建一个名为 happydom.ts 的文件，并添加以下代码：

import { GlobalRegistrator } from "@happy-dom/global-registrator";GlobalRegistrator.register();

要在 bun 测试之前预加载此文件，请打开或创建一个 bunfig.toml 文件并添加以下行。

[test]
preload = "./happydom.ts"

当你运行 bun test 时，这将会执行 happydom.ts。现在你可以编写使用浏览器 API（如 document 和 window）的测试了。

import {test, expect} from 'bun:test';test('dom test', () => {document.body.innerHTML = `<button>My button</button>`;const button = document.querySelector('button');expect(button?.innerText).toEqual('My button');
});

根据你 tsconfig.json 的设置，你可能会在上面的代码中看到一个 “Cannot find name 'document'” 的类型错误。为了 “注入” document和其他浏览器API的类型，可以在任何测试文件的顶部添加以下三斜杠指令。

/// <reference lib="dom" />import {test, expect} from 'bun:test';test('dom test', () => {document.body.innerHTML = `<button>My button</button>`;const button = document.querySelector('button');expect(button?.innerText).toEqual('My button');
});

用 bun test 运行测试：

bun test
bun test v1.xdom.test.ts:
✓ dom test [0.82ms]1 pass0 fail1 expect() calls
Ran 1 tests across 1 files. 1 total [125.00ms]

@testing-library/react

要在 Bun 中使用 @testing-library/react，首先确保已安装 @happy-dom/global-registrator 作为开发依赖，以便能够为 Bun 的测试运行器模拟高保真的浏览器环境。以下是设置和使用 @testing-library/react 的步骤：

1、安装 @happy-dom/global-registrator：

bun add -d @happy-dom/global-registrator

2、创建一个名为 happydom.ts 的文件，并添加以下代码：

import { GlobalRegistrator } from "@happy-dom/global-registrator";
GlobalRegistrator.register();

3、在 bunfig.toml 中添加预加载配置以在测试前加载 happy-dom：

[test]
preload = "./happydom.ts"

4、在测试文件中，编写使用 @testing-library/react 的测试，例如：

// Modal.jsximport React from 'react';const Confirmation = () => {return <section role="dialog"></section>;
};export default Confirmation;

// modal.test.jsximport React from 'react';
import Confirmation from './component/Modal';
import { render } from '@testing-library/react';test("Confirmation component has a section with the role of dialog", () => {const { getByRole } = render(<Confirmation />);const dialogSection = getByRole("dialog");expect(dialogSection).not.toBe(null);
});

 enzyme

Enzyme 来自 airbnb 公司，是一个用于 React 的 JavaScript 测试工具，方便你判断、操纵和历遍 React Components 输出。

Enzyme 的 API 通过模仿 jQuery 的 API ，使得 DOM 操作和历遍很灵活、直观。Enzyme 兼容所有的主要测试运行器和判断库，文档和例子使用 mocha 和 chai。

1、安装

pnpm add -D enzyme @cfaester/enzyme-adapter-react-18

2、配置 enzyme 需要的适配器。

import Enzyme from 'enzyme';
import Adapter from '@cfaester/enzyme-adapter-react-18';Enzyme.configure({ adapter: new Adapter() });

3、测试代码实现

import React from 'react';
import { shallow } from 'enzyme';
import Confirmation from './component/Modal';import Enzyme from 'enzyme';
import Adapter from '@cfaester/enzyme-adapter-react-18';Enzyme.configure({ adapter: new Adapter() });describe('Confirmation', () => {test('renders a section element with role "dialog"', () => {const wrapper = shallow(<Confirmation />);expect(wrapper.find('section')).toHaveLength(1);expect(wrapper.find('section').prop('role')).toBe('dialog');});
});

这篇关于bun DOM测试的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---