reactjs - 使用 Chai\Mocha 设置进行单元测试时,如何让 JSDOM 与 typescript 一起使用?
问题描述
我一直试图让 JSDOM 在我的打字稿单元测试中工作,但经过多次尝试,我不断收到以下错误(或以下错误的变体)
TypeError: _jsdom.JSDOM is not a constructor
代码片段如下
import React from 'react';
import { act } from 'react-dom/test-utils';
import { expect } from 'chai';
import { mock, instance, verify, anyOfClass } from 'ts-mockito';
import { JSDOM } from 'jsdom'
import { TestApp } from '../ts/ExampleForTestingReact';
let rootContainer: HTMLDivElement;
const { window } = new JSDOM('<!doctype html><html><body></body></html>');
我的包 json 如下
{
"name": "app",
"version": "1.0.0",
"private": true,
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/node": "^7.8.7",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.10.1",
"@babel/preset-typescript": "^7.9.0",
"@babel/register": "^7.9.0",
"@types/bootstrap": "4.3.2",
"@types/chai": "^4.2.0",
"@types/mocha": "^7.0.2",
"@types/react": "^16.9.31",
"@types/react-dom": "^16.9.6",
"@types/jsdom": "^16.2.3",
"babel-loader": "^8.1.0",
"chai": "^4.2.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^0.9.0",
"mocha": "^7.1.1",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"terser-webpack-plugin": "^3.0.6",
"ts-loader": "^7.0.5",
"ts-mockito": "^2.5.0",
"ts-node": "^8.8.1",
"typescript": "3.8.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"jsdom-global": "^3.0.2"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.1",
"bootstrap": "^4.3.1",
"bootstrap-table": "^1.16.0",
"file-saver": "^2.0.2",
"jquery": "^3.3.1",
"jquery-validation": "^1.17.0",
"jquery-validation-unobtrusive": "^3.2.11",
"moment": "^2.26.0",
"mpx-dialog": "^1.1.12",
"mpx-error-boundary": "^1.0.0",
"mpx-multi-language": "^1.0.8",
"mpx-react-page-components": "^1.0.3",
"mpx-utilities": "^1.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"tableexport.jquery.plugin": "^1.10.20"
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
},
"mocha": {
"extension": [
"ts",
"tsx"
],
"spec": "wwwroot/ts-tests/**/*.test.tsx",
"require": "wwwroot/ts-tests/babel-register.js"
},
"scripts": {
"test": "mocha",
"pack-dev": "webpack --mode development",
"pack-prod": "webpack --mode production",
"clean": "del /Q /F .\\wwwroot\\dist\\*.*"
}
}
我一直在尝试执行以下操作: https ://stackoverflow.com/a/45311836/4545812
任何有关此事的帮助将不胜感激!
解决方案
我设法解决了这个问题。最后我删除了jsdom-global,并添加了jsdom。我还添加了测试示例,以帮助在尝试使用 jsdom 和 typescript 进行测试时可能遇到类似问题的任何人。
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import { expect } from 'chai';
import { TestApp } from '../ts/ExampleForTestingReact';
import { JSDOM } from 'jsdom'
declare global {
namespace NodeJS {
interface Global {
document: Document;
window: Window;
navigator: Navigator;
}
}
}
const { window } = new JSDOM('<!doctype html><html><body></body></html>');
global.document = window.document;
global.window = global.document.defaultView;
describe('App Component Testing', () => {
it('Renders Hello World Title', () => {
act(() => {
ReactDOM.render(<TestApp />, global.document);
});
const h1: Element = global.document.querySelector('h1');
expect(h1.textContent).to.equal('Hello World');
});
});
以上并不完美,因为我计划将以下部分移动到共享文件中,因为它将在每个打字稿测试中使用
import { JSDOM } from 'jsdom'
declare global {
namespace NodeJS {
interface Global {
document: Document;
window: Window;
navigator: Navigator;
}
}
}
const { window } = new JSDOM('<!doctype html><html><body></body></html>');
global.document = window.document;
global.window = global.document.defaultView;
一个有用的 Stack Overflow 问题/答案,帮助我解决了上述问题:
推荐阅读
- symfony - 在 Symfony 上使用 ElFinder:我无法选择图像
- templates - TYPO3 Fluid - 模板分页
- amazon-web-services - AWS - 在另一个 lambda 中调用声明的变量
- git - 如何在 Ubuntu 上验证 Github?git:'credential-netrc' 不是 git 命令
- php - Laravel 护照使用了错误的防护
- django - 错误 502 与冲突的服务器名称和(2:没有这样的文件或目录)
- typescript - 显示错误的打字稿过滤器不可分配给类型
- big-o - Big-O 运行时间分析(for循环)
- javascript - JQuery:如何使用类选择器找到最近的元素?
- php - PHP 在页面刷新或退出时销毁会话