reactjs - Chai\Mocha kurulumu ile birim testi yaparken JSDOM'u TypeScript ile nasıl çalıştırabilirim?

JSDOM'u Typescript birim testlerimde çalıştırmaya çalışıyordum, ancak birçok denemeden sonra sürekli aşağıdaki hatayı (veya aşağıdaki hatanın çeşitli versiyonlarını) alıyorum

TypeError: _jsdom.JSDOM is not a constructor

Kod parçacığı aşağıdaki gibidir

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>');

Paket json dosyam aşağıdaki gibidir

{
  "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\\*.*"
  }
}

Aşağıdakini yapmaya çalışıyorum: https://stackoverflow.com/a/45311836/4545812

Bu konuda verilecek her türlü yardım çok takdir edilecektir!

Cevap #1

Bu sorunu çözmeyi başardım. Sonunda jsdom-global öğesini kaldırdım ve jsdom öğesini ekledim. Ayrıca, jsdom ve typescript ile test yapmaya çalışırken benzer sorunlarla karşılaşabilecek birine yardımcı olmak için test örneğini de ekledim.

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');
    });
});

Yukarıdaki mükemmel değil, çünkü bir sonraki bölümü paylaşılan bir dosyaya taşımayı planlıyorum, çünkü bu her typescript testinde kullanılacak

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;

Yukarıdakilere yardımcı olan yararlı bir Stack Overflow soru/cevabı:

jsdom ve TypeScript ile "Property '...' does not exist on type 'Global'" hatasını nasıl önlerim?

İlgili makaleler