jest-environment-jsdom-global 使用文档
目录结构及介绍
jest-environment-jsdom-global/
├── LICENSE
├── README.md
├── index.js
├── package.json
└── yarn.lock
- LICENSE: 项目的许可证文件。
- README.md: 项目的基本介绍和使用说明。
- index.js: 项目的主文件,定义了 Jest 环境。
- package.json: 项目的依赖管理文件,包含了项目的元数据和依赖包。
- yarn.lock: 锁定依赖包版本的文件。
项目的启动文件介绍
index.js
是项目的启动文件,它定义了一个自定义的 Jest 测试环境,基于 jsdom
并提供了全局访问 jsdom
的功能。以下是 index.js
的主要内容:
const NodeEnvironment = require('jest-environment-node');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
class JSDOMGlobalEnvironment extends NodeEnvironment {
constructor(config) {
super(config);
}
async setup() {
await super.setup();
const dom = new JSDOM('<!doctype html><html><body></body></html>', {
url: 'http://localhost',
});
this.global.window = dom.window;
this.global.document = dom.window.document;
this.global.navigator = dom.window.navigator;
}
async teardown() {
await super.teardown();
}
runScript(script) {
return super.runScript(script);
}
}
module.exports = JSDOMGlobalEnvironment;
- NodeEnvironment: 继承自
jest-environment-node
,提供了基本的 Node 环境。 - JSDOM: 用于创建一个 DOM 环境。
- JSDOMGlobalEnvironment: 自定义的 Jest 环境类,在
setup
方法中初始化jsdom
并将其全局变量(如window
和document
)暴露给测试环境。
项目的配置文件介绍
package.json
是项目的配置文件,包含了项目的元数据和依赖包。以下是 package.json
的主要内容:
{
"name": "jest-environment-jsdom-global",
"version": "1.0.0",
"description": "Jest environment with jsdom and global access",
"main": "index.js",
"scripts": {
"test": "jest"
},
"keywords": [
"jest",
"jsdom",
"environment"
],
"author": "Simon360",
"license": "MIT",
"dependencies": {
"jest": "^27.0.0",
"jest-environment-node": "^27.0.0",
"jsdom": "^16.0.0"
}
}
- name: 项目的名称。
- version: 项目的版本号。
- description: 项目的描述。
- main: 项目的入口文件。
- scripts: 定义了可执行的脚本命令,如
test
命令用于运行 Jest 测试。 - keywords: 项目的关键词。
- author: 项目的作者。
- license: 项目的许可证。
- dependencies: 项目的依赖包,包括
jest
,jest-environment-node
, 和jsdom
。
通过以上配置,项目可以方便地使用 Jest 进行测试,并提供了全局访问 jsdom
的功能。