不能在模块外部使用 import 语句 - jest + nextj.js

Question

运行笑话测试时我遇到以下问题：

` 语法错误：无法在模块外部使用 import 语句

      30 |   certificateEuropean: '/icons/certificate-european.svg',
      31 |   check: '/icons/check.svg',
    > 32 |   checkGold: '/icons/check-gold.svg',

`

这是测试：

` 从“反应”导入反应； 从 '@testing-library/react' 导入 { render };

import { Icon } from '@/components/UI/Icon';

describe('RegistrationForm', () => {
  test('should update and retrieve values correctly', () => {
    render(<Icon type="accreditation" />);
  });
});

`

这是组件：

` 常量图标映射 = { 认证：'/icons/accreditation.svg', 。 。 }

export const getIconSrc = (type: IconType): string => iconMap[type];

export const Icon = React.forwardRef<HTMLImageElement, IconProps>(
  ({ type, size, width, alt = '', id, quantity }, ref) => {
    const _size = size ?? 24;
    const _width = width ?? _size;
    const iconSrc = getIconSrc(type);

    return (
      <>
        <img
          data-testid={id}
          className="h-full"
          ref={ref}
          src={iconSrc}
          width={_width}
          height={_size}
          alt={alt}
        />
        {typeof quantity === 'number' && quantity > 0 ? (
          <span>
            {quantity}
          </span>
        ) : null}
      </>
    );
  }
);
Icon.displayName = 'Icon';

`

这是我的 jest.config.js

` // jest.config.js const nextJest = require('next/jest');

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test           environment
  dir: './',
});

const customJestConfig = {

  moduleDirectories: ['node_modules', '<rootDir>/'],


  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/$1',
    '@@/(.*)$': '<rootDir>/$1',
    '\\.(ttf|otf|eot|svg)$': '<rootDir>/__mocks__/fontMock.js',
  },
  testEnvironment: 'jsdom',
  setupFiles: ['./text-encoder.mock.ts'],
  setupFilesAfterEnv: ['@testing-library/jest-dom'],
};

module.exports = createJestConfig(customJestConfig);`

我尝试将以下字段添加到 jest.config.js `
预设：'ts-jest'， testEnvironment: //每个可能的选项 转换： { '^.+\.tsx?$': 'ts-jest', }, 变换忽略模式：['/node_modules/']，

globals: {
  "ts-jest": {
    isolatedModules: true,
  },
},`

在package.json中

  "type": "module",

您的文字 运行

 node --experimental-vm-modules node_modules/jest/bin/jest.js

而不是

npm test

结果：

    Must use import to load ES Module: C:\Users\USERNAME\frontend\node_modules\@sitecore-feaas\clientside\dist\browser\react.esm.js

Answer 1

似乎

@sitecore-feaas

package.json 有问题 — 当我删除

@sitecore-feaas/package.json

中的“导出”字段并对

@sitecore/byoc

执行相同操作时，它开始工作。

我创建了一个笑话设置解决方法：

jest.config.ts：

  globalSetup: '<rootDir>/jest/sitecoreLibsExportFixing.ts',
  globalTeardown: '<rootDir>/jest/sitecoreLibsExportFixingRestore.ts',

sitecoreLibsWithWrongExport.ts：

export const sitecoreLibsWithWrongExport = ['@sitecore/byoc', '@sitecore-feaas/clientside'];

sitecoreLibsExportFishing.ts：

import fs from 'fs';
import { sitecoreLibsWithWrongExport } from './sitecoreLibsWithWrongExport';

const sitecoreLibsExportFixing = (libsToPatch: string[]) => {
  libsToPatch.forEach((lib) => {
    const packageFilePath = `node_modules/${lib}/package.json`;
    const backupFilePath = `node_modules/${lib}/package.backup.json`;

    // Store a backup
    fs.copyFileSync(packageFilePath, backupFilePath);

    // Read the file
    const rawData = fs.readFileSync(packageFilePath, 'utf-8');
    const packageData = JSON.parse(rawData);

    // Remove the 'exports' property
    if (packageData.exports) {
      delete packageData.exports;

      // Write the updated content back to the file
      const updatedData = JSON.stringify(packageData, null, 2);
      fs.writeFileSync(packageFilePath, updatedData);
    }
  });
};

export default () => sitecoreLibsExportFixing(sitecoreLibsWithWrongExport);

sitecoreLibsExportFishingRestore.ts：

import fs from 'fs';
import { sitecoreLibsWithWrongExport } from './sitecoreLibsWithWrongExport';

const sitecoreLibsExportFixingRestore = (libsToRestore: string[]) => {
  libsToRestore.forEach((lib) => {
    const packageFilePath = `node_modules/${lib}/package.json`;
    const backupFilePath = `node_modules/${lib}/package.backup.json`;

    // Restore the backup file
    if (fs.existsSync(backupFilePath)) {
      fs.copyFileSync(backupFilePath, packageFilePath);
    }
  });
};

export default () => sitecoreLibsExportFixingRestore(sitecoreLibsWithWrongExport);