时间戳

首页 > 解决方案 > 在ase.config.ts 中导入 JSDOM 时出现“无效数组长度”错误

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

问题描述

我已将 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，都是最新版本。谢谢！

标签： reactjstypescriptjestjsenzymejsdom

解决方案

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

因此解决方案是将 tsconfig.json 中的目标从“es5”更改为“es6”。

推荐阅读