Jest react SyntaxError: Cannot use import statement outside a module

Question

我正在尝试在 jest 中运行从 jest 官方网站获取的简单测试，但出现此错误：

我不明白他为什么抱怨导入语句，因为测试文件中没有：

sum.test.ts:

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

export {};

有什么建议吗？

关注更多关于 jest 和 typescript 的配置文件，以防万一需要更好地了解我的情况..

jest.config.js：

// recusrsively replaces the string from / to in the object structure.
function replacePackageJsonSpecific(structure, from, to) {
  for (const property in structure) {
    if (typeof structure[property] === 'object') {
      replacePackageJsonSpecific(structure[property], from, to);
    } else if (typeof structure[property] === 'string') {
      if (structure[property].includes(from)) {
        structure[property] = structure[property].replace(from, to);
      }
    }
  }
}

// replaces properties from left to right, concatenates arrays from left and right
function merge(left, right) {
  const merged = {...left, ...right};
  for (const property in right) {
    if (Array.isArray(right[property]) && Array.isArray(left[property])) {
      merged[property] = left[property].concat(right[property]);
    }
  }
  return merged;
}

const path = require('path');
let directory = path.join(process.cwd(), '/');

let reporters = ['default', 'jest-junit'];

process.argv.forEach(function (val) {
  if (val.includes('cwd')) {
    const cwd = val.split('=')[1];
    directory = path.join(directory, cwd.substring(0, cwd.search('test')));
    reporters = reporters.slice(0, 1);
  }
});

const packageJson = require(directory + 'package.json');
replacePackageJsonSpecific(packageJson.jest, '<rootDir>', directory);
packageJson.jest.rootDir = directory;

const isCI = () => process.env['CI'] === 'true';

module.exports = merge(
  {
    cacheDirectory: './node_modules/.cache/jest-cache',
    reporters: reporters,
    roots: [path.join(directory, '/test/unit/')],
    setupFilesAfterEnv: [directory + 'test/setupTests.ts'],
    snapshotSerializers: ['enzyme-to-json/serializer'],
    collectCoverage: process.env['COVERAGE_REPORT'] === 'true' || isCI(),
    coverageDirectory: 'generated/coverage',
    testEnvironment: 'enzyme',
    testEnvironmentOptions: {
      enzymeAdapter: 'react16',
    },
    testMatch: ['**/?(*.)(spec|test).(j|t)s?(x)'],
    testURL: 'http://localhost',
    preset: 'ts-jest',
    transform: {
      '^.+\\.(ts|tsx)?$': 'ts-jest',
      '^.+\\.(js|jsx|mjs|ts|tsx)$': './node_modules/react-scripts/config/jest/babelTransform.js',
      '^.+\\.(js|jsx|mjs)$': './node_modules/babel-jest',
      '^.+\\.css$': './node_modules/react-scripts/config/jest/cssTransform.js',
      '^(?!.*\\.(js|jsx|mjs|css|json)$)': './node_modules/react-scripts/config/jest/fileTransform.js',
    },
    transformIgnorePatterns: ['<rootDir>/node_modules/(?!@uwr/icons)'],
    coverageReporters: ['html', 'lcov', 'text'],
    globals: {
      'ts-jest': {
        tsConfigFile: 'tsconfig.test.json',
      },
    },
    moduleDirectories: ['node_modules'],
    moduleFileExtensions: ['mjs', 'web.ts', 'ts', 'web.tsx', 'tsx', 'web.js', 'js', 'web.jsx', 'jsx', 'json', 'node'],
  },
  packageJson.jest,
);

babel.config.js：

module.exports = {
    presets: [
      ['@babel/preset-env', {targets: {node: 'current'}}],
      '@babel/preset-typescript',
    ],
  };

package.json:

"scripts": {
    "test": "react-app-rewired test --no-watchman --watchAll=false",
}

文件夹结构：

Answer 1

您可能会收到此错误，因为您将babel-jest 定义为转换器而不是ts-jest。据我所知，jest 的预设通常定义为ts-jest。所以尝试定义'./node_modules/ts-jest' 而不是'./node_modules/babel-jest，然后再试一次。

这是一个固定的代码示例：

transform: {
  '^.+\\.(ts|tsx)?$': 'ts-jest',
  '^.+\\.(js|jsx|mjs|ts|tsx)$': './node_modules/react-scripts/config/jest/babelTransform.js',
  '^.+\\.(js|jsx|mjs)$': './node_modules/ts-jest',
  '^.+\\.css$': './node_modules/react-scripts/config/jest/cssTransform.js',
  '^(?!.*\\.(js|jsx|mjs|css|json)$)': './node_modules/react-scripts/config/jest/fileTransform.js',
},