个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我一直在尝试让 JSDOM 在我的 typescript 单元测试中工作，但经过多次尝试，我不断收到以下错误(或以下错误的变体)
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>');
{
"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\\*.*"
}
}
最佳答案
我设法解决了这个问题。最后我删除了 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;
关于reactjs - 使用 Chai\Mocha 设置进行单元测试时，如何让 JSDOM 与 typescript 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62902689/
25
4
0
我正在使用 mocha 和 chai 进行 TDD 以测试一些 NodeJS 脚本，每次我想再次运行测试时都必须运行“mocha”。 有没有办法设置 mocha 和 chai 在我保存源文件后立即运行
如果任何测试失败，我正在尝试配置 mocha 以重试整个套件。 我导航到一个 URL，然后填充一个表单并提交，然后用户被重定向，如果找到某个元素，则最后一次测试通过。 如果找不到该元素，我需要再次导航
我想知道是否有办法让 mocha 列出它将执行的所有测试。当我使用 mocha --help 列出它们时，我没有看到任何合理的选项；有几个报告者，但似乎没有一个旨在列出将要处理的文件(或命名将要运行的
before()、after()、beforeEach()、afterEach() 等 mocha Hook 无法正常工作。 only 方法也不起作用。 beforeEach 都没有被调用。我得到一个
我已经看到很多关于此的问题，但所有修复都不适用于我的代码。 我做错了什么？我的 beforeEach 没有被执行。 这是单元测试代码: var assert = require('assert');
如何在 mocha 测试之间共享资源(例如连接)？ cookies.test.js: describe('Cookies', function() { it('setCookie()', func
我正在尝试以编程方式运行 mocha。 runner的代码如下: var Mocha = require("mocha"); var mocha = new Mocha(); mocha.report
我正在遵循此 tutorial 的第 1 步 我有以下文件夹结构: ├── lib │ ├── json │ │ ├── messages.json │ │ └── testMessages.json
我希望能够扩展 mocha 测试结果并从可用的 mocha 对象中收听它们。首先，我正在寻找“通过”结果。 看起来他们可能是从套件中订阅的，但我不确定如何...... 我尝试了以下我认为会听到我所有测
我正在运行此测试(简化)，该测试按预期失败了……但是，尽管失败了，但它仍要等待20秒的全部超时时间。如何使它立即失败？ it("should fail before timeout", functio
我是Java语言世界的新手，主要涉足OOP。我试图在网上查找Karma和 Mocha 之间的明显区别，但徒劳无功。我知道Karma是一个测试运行器，而Mocha是一个单元测试框架，但是Mocha也有自
我有一段代码，其中某些测试在 CI 环境中总是会失败。我想根据环境条件禁用它们。 如何在运行时执行期间以编程方式跳过 mocha 中的测试？ 最佳答案 您可以通过在describe或it block
我想使用 chai 应该断言检查我的响应对象是否包含提到的属性。 下面是我的代码片段: chai.request(app) .post('/api/signup') .
例如，默认情况下，背景颜色为绿色或红色。我想将绿色/红色作为前景，将背景作为我的默认颜色(白色)。 因为在浅色终端配色方案上很难看到任何东西，因为前景是黑色的，而背景会变成红色或绿色。 最佳答案 在
有没有办法在 mocha 记者中获取当前测试的文件名？ 我在基础和示例中找不到任何内容。 最佳答案 实际上，文件名在 中传递给了 Suite文件 Mocha 中的字段从 this 开始拉取请求。只是现
在我走向 TDD 的过程中，我使用了 Mocha、chai 和 sinon。 那里肯定有一个学习曲线。 我的目标是编写一个测试来验证 method4 是否已执行。我如何做到这一点？ //MyData.
我正在使用mocha和chai作为断言。 我在规范中有几个主张: Exp1.should.be.true Exp2.should.be.true Exp3.should.be.true 如果其中之一失
根据 Mocha 文档，“Mocha 测试串行运行”这意味着按照它们的定义顺序。 我的问题是:是什么让 异步 (带有完成回调)测试不同于 同步 ? 最佳答案 您通过传递给 it 来告诉 Mocha 测
我正在尝试将 mocha 绑定(bind)写入 PureScript 并且对 Control.Monad.Eff 完全感到困惑 describe(function(){ //do stuff }
我对 mocha 框架有点陌生。此代码应该抛出异常，但不会。 (为简单起见，将所有代码放入测试中) describe("Test", function() { it("this should
我是一名优秀的程序员,十分优秀！