自己动手写 React源码 ——【9】接入测试框架

深入理解 React 源码，带你从零实现 React v18 的核心功能，构建自己的 React 库。

电子书地址：2xiao.github.io/leetcode-js…

源代码地址：github.com/2xiao/my-re…

送我一个免费的 ⭐️ Star，这是对我最大的鼓励和支持。

之前我们实现了 npm link 和 vite serve demos 两种调试方式，本节我们将实现第三种调试方式 -- 测试用例。

1. 实现 test-utils

test-utils 是 React 提供的一个官方测试工具库，用于帮助开发者编写和执行 React 组件的单元测试。该工具库提供了一组用于测试 React 组件的工具和实用函数，使得编写测试变得更加容易和高效。

test-utils 主要用于测试 React 组件的渲染和行为，而 React DOM 是负责处理 React 组件的渲染和底层 DOM 操作的核心库。因此可以将测试工具放在 react-dom 包中，使得测试工具与渲染过程密切相关，更容易与 React DOM 的功能集成。

新建 packages/react-dom/test-utils.ts 文件，它对外暴露一个 renderIntoContainer 方法，然后在 scripts/rollup/react-dom.config.js 增加 test-utils.ts 的打包配置：

// packages/react-dom/test-utils.ts
import { ReactElementType } from 'shared/ReactTypes';
import { createRoot } from 'react-dom/client';

export function renderIntoDocument(element: ReactElementType) {
	const div = document.createElement('div');
	return createRoot(div).render(element);
}

// scripts/rollup/react-dom.config.js
// ...
// test-utils
{
    input: `${pkgPath}/test-utils.ts`,
    output: [
        {
            file: `${pkgDistPath}/test-utils.js`,
            name: 'testUtils',
            format: 'umd'
        }
    ],
    externals: ['react-dom', 'react'],
    plugins: getBaseRollupPlugins()
}

再给项目增加 babel 编译，将 jsx 编译成 javascript。

先安装 babel 相关的包：

pnpm i -D -w @babel/core @babel/preset-env @babel/plugin-transform-react-jsx

• @babel/core： 是 Babel 工具链的核心模块，负责整体的转换流程和对代码进行 AST（抽象语法树）转换；
• @babel/preset-env： 是一个 Babel 预设（preset），用于根据目标环境（浏览器、Node.js 等）自动确定需要应用的转换插件。它根据配置中的目标环境，选择并启用一组插件，以确保代码能在目标环境中正常运行；
• @babel/plugin-transform-react-jsx：是用于将 JSX 语法转换为普通的 JavaScript 函数调用的插件。JSX 是 React 中用于声明 UI 的语法糖，而这个插件使得浏览器或 Node.js 可以理解并执行 JSX 语法；

然后在根目录新建 babel.config.js 文件，里面是 babel 的配置：

// babel.config.js
const { defaults } = require('jest-config');

module.exports = {
	...defaults,
	rootDir: process.cwd(),
	// 寻找测试用例忽略的文件夹
	modulePathIgnorePatterns: ['<rootDir>/.history'],
	// 依赖包的解析地址
	moduleDirectories: [
		// React 和 ReactDOM 包的地址
		'dist/node_modules',
		// 第三方依赖的地址
		...defaults.moduleDirectories
	],
	testEnvironment: 'jsdom'
};

2. 接入测试框架

测试环境使用 Jest 测试框架搭建，使用包管理器安装 Jest 及其相关的包：

pnpm i -D -w jest
pnpm i -D -w jest-config
pnpm i -D -w jest-enviroment-jsdom

• jest-config：提供了 Jest 的默认配置，以及一些常用的配置选项和预设；
• jest-enviroment-jsdom：提供了一个使用 jsdom 实现的模拟 DOM 环境，用于运行测试时模拟浏览器环境；

再新建 scripts/jest/jest.config.js 文件，为 Jest 添加配置参数：

// scripts/jest/jest.config.js
const { defaults } = require('jest-config');

module.exports = {
	...defaults,
	rootDir: process.cwd(),
	// 寻找测试用例忽略的文件夹
	modulePathIgnorePatterns: ['<rootDir>/.history'],
	// 依赖包的解析地址
	moduleDirectories: [
		// React 和 ReactDOM 包的地址
		'dist/node_modules',
		// 第三方依赖的地址
		...defaults.moduleDirectories
	],
	testEnvironment: 'jsdom'
};

并在 package.json 的 "scripts" 中增加 jest 的执行脚本：

"test": "jest --config scripts/jest/jest.config.js"

这时执行 pnpm test 就可以运行 Jest 进行测试。

3. 编写测试用例

React 官方的测试用例都保存在 packages/react/src/__tests__/，可以自行查看。

下面，我们来实现几个 ReactElement 的测试用例，新建 packages/react/__tests__/ReactElement-test.js 文件，内容详见ReactElement-test.js。

至此，我们就完成了测试环境搭建，并编写了 20 个 ReactElement 的测试用例。现在执行 pnpm build-dev 打包最新代码，再执行 pnpm test 即可运行测试，如果发现测试用例运行失败，可以查看测试输出以获取失败的测试用例的详细信息和堆栈跟踪，然后分析出现问题的原因。

搭建测试环境、编写测试用例以及定期运行测试，可以帮开发者发现代码中潜在的问题，对于提高代码质量、稳定性和可维护性有着积极的影响。

在测试过程中，关注测试覆盖率、运行时性能等方面也是重要的。使用持续集成（CI）工具，确保测试在每次提交或拉取请求时都能运行，有助于及时发现问题。

相关代码可在 git tag v1.9 查看，地址：github.com/2xiao/my-re…

---

《自己动手写 React 源码》遵循 React 源码的核心思想，通俗易懂的解析 React 源码，带你从零实现 React v18 的核心功能。

学完本书，你将有这些收获：

• 面试加分：框架底层原理是面试必问环节，熟悉 React 源码会为你的面试加分，也会为你拿下 offer 增加不少筹码；

• 提升开发效率：熟悉 React 源码之后，会对 React 的运行流程有新的认识，让你在日常的开发中，对性能优化、使用技巧和 bug 解决更加得心应手；

• 巩固基础知识：学习本书也顺便巩固了数据结构和算法，如 reconciler 中使用了 fiber、update、链表等数据结构，diff 算法要考虑怎样降低对比复杂度；

本书的特色：

• 教程详细，代码开源，带你构建自己的 React 库；

• 功能全面，可跑通官方测试用例；

• 按 Git Tag 划分迭代步骤，记录每个功能的实现过程；

电子书地址：2xiao.github.io/leetcode-js…

源代码地址：github.com/2xiao/my-re…

送我一个免费的 ⭐️ Star，这是对我最大的鼓励和支持。