文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

单元测试支持

发布于 2025-02-17 12:51:32 字数 2591 浏览 0 评论 0 收藏 0

我们也将会为客户端代码编写一些单元测试。我们使用与服务端相同的测试套件：

npm install --save-dev mocha chai

我们也将会测试我们的 React 组件，这就要求需要一个 DOM 库。我们可能需要像 Karma
库一样的功能来进行真实 web 浏览器测试。但我们这里准备使用一个 node 端纯 js 的 dom 库：

npm install --save-dev jsdom@3

在用于 react 之前我们需要一些 jsdom 的预备代码。我们需要创建通常在浏览器端被提供的 document 和 window 对象。
并且将它们声明为全局对象，这样才能被 React 使用。我们可以创建一个测试辅助文件做这些工作：

//test/test_helper.js

import jsdom from 'jsdom';

const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
const win = doc.defaultView;

global.document = doc;
global.window = win;

此外，我们还需要将 jsdom 提供的 window 对象的所有属性导入到 Node.js 的全局变量中，这样使用这些属性时
就不需要 window. 前缀，这才满足在浏览器环境下的用法：

//test/test_helper.js

import jsdom from 'jsdom';

const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
const win = doc.defaultView;

global.document = doc;
global.window = win;

Object.keys(window).forEach((key) => {
  if (!(key in global)) {
    global[key] = window[key];
  }
});

我们还需要使用 Immutable 集合，所以我们也需要参照后段配置添加相应的库：

npm install --save immutable
npm install --save-dev chai-immutable

现在我们再次修改辅助文件：

//test/test_helper.js

import jsdom from 'jsdom';
import chai from 'chai';
import chaiImmutable from 'chai-immutable';

const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
const win = doc.defaultView;

global.document = doc;
global.window = win;

Object.keys(window).forEach((key) => {
  if (!(key in global)) {
    global[key] = window[key];
  }
});

chai.use(chaiImmutable);

最后一步是在 package.json 中添加指令：

//package.json

"scripts": {
  "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js 'test/**/*.@(js|jsx)'"
},

这几乎和我们在后端做的一样，只有两个地方不同：

Babel 的编译器名称：在该项目中我们使用 babel-core 代替 babel
测试文件设置：服务端我们使用 --recursive ，但这么设置无法匹配 .jsx 文件，所以我们需要使用
glob

为了实现当代码发生修改后自动进行测试，我们依然添加 test:watch 指令：

//package.json

"scripts": {
  "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js 'test/**/*.@(js|jsx)'",
  "test:watch": "npm run test -- --watch"
},

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

单元测试支持

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。