在ase.config.ts 中导入 JSDOM 时出现“无效数组长度”错误答案

【问题标题】：Error "invalid array length" when importing JSDOM in enzyme.config.ts在ase.config.ts 中导入 JSDOM 时出现“无效数组长度”错误
【发布时间】：2020-08-03 12:13:22
【问题描述】：

我已将 React 代码库迁移到 Typescript，但在设置 Jest 时遇到问题。

当我尝试对 *.test.tsx 或 .test.jsx 文件运行开玩笑测试时，我收到以下错误：

 RangeError: Invalid array length

       6 | 
    >  7 | const { JSDOM } = require('jsdom');
         |         ^

这是我的 jest.config.js：

var tsJesUtils = require('ts-jest/utils');
var pathsToModuleNameMapper = tsJesUtils.pathsToModuleNameMapper;

var tsConfig = require('./tsconfig.json');
var compilerOptions = tsConfig.compilerOptions;

module.exports = {
    roots: ["<rootDir>/src/global/ts", "<rootDir>/__tests__"],
    preset: "ts-jest/presets/js-with-ts",
    moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src/global/ts/' }),
    globals: {
      "ts-jest": {
        diagnostics: {
          warnOnly: true
        }
      },
    },

    transformIgnorePatterns: [
            "node_modules/react-jsx-parser"
    ],

    // Setup Enzyme
    snapshotSerializers: ["enzyme-to-json/serializer"],
    setupFilesAfterEnv: ["<rootDir>/__tests__/enzyme.config.js"],

    collectCoverage: true,
    coverageReporters: [
            "text",
            "json",
            "html"
    ],
};

这是我的酵素.config.json 文件：

import "raf/polyfill";
import { configure, mount, shallow, render } from 'enzyme';
import Adapter from "enzyme-adapter-react-16";
import React from 'react';

const { JSDOM } = require('jsdom');
const dom = new JSDOM('');

configure( { adapter: new Adapter() } );

有人遇到过这个问题并且有解决方案吗？

我正在使用 Enzyme、Jest 和 JSDOM，都是最新版本。谢谢！

【问题讨论】：

标签： reactjs typescript jestjs enzyme jsdom

【解决方案1】：

问题是因为 JSDOM 使用 ES6+ 特性（在这种特殊情况下，使用 Set()），但我的 Typescript 编译器使用的是默认输出 (ES5)，它没有 Set。

所以解决办法是把tsconfig.json中的target从“es5”改成“es6”以后。

【讨论】：