文章/答案/技术大牛

发布

社区首页 >问答首页 >如何让JSDOM在使用柴\摩卡设置进行单元测试时使用类型记录？

问如何让JSDOM在使用柴\摩卡设置进行单元测试时使用类型记录？
EN

Stack Overflow用户

提问于 2020-07-14 19:32:05

回答 1查看 6.7K关注 0票数 7

我一直试图让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

如果能在这件事上提供任何帮助，我们将不胜感激！

reactjs

typescript

mocha.js

chai

jsdom

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-15 10:24:08

我设法解决了这个问题。最后，我删除了jsdom-全局，并添加了jsdom。我还添加了测试示例，以帮助那些在使用jsdom和类型记录进行测试时可能遇到类似问题的人。

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;

一个有用的堆栈溢出问题/答案帮助我完成了上述工作：

How to prevent "Property '...' does not exist on type 'Global'" with jsdom and typescript?

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62902689

复制

相似问题

问如何让JSDOM在使用柴\摩卡设置进行单元测试时使用类型记录？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让JSDOM在使用柴\摩卡设置进行单元测试时使用类型记录？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让JSDOM在使用柴\摩卡设置进行单元测试时使用类型记录？
EN