Remix+TypeScript+Jest单元测试配置报错求助

错误原因 #

当前错误源于Jest未正确处理node_modules中@web3-storage/multipart-parser这类ES模块文件，同时项目启用了"type": "module"，导致CommonJS与ES模块的加载逻辑冲突。

1. 修正Jest配置文件 (jest.config.ts) #

调整预设、启用ESM支持，并指定需要转译的第三方依赖：

import type { Config } from '@jest/types';

const config: Config.InitialOptions = {
  preset: 'ts-jest/presets/default-esm', // 改用ESM兼容预设
  setupFilesAfterEnv: [`<rootDir>/jest.setup.ts`],
  testEnvironment: 'jsdom',
  extensionsToTreatAsEsm: ['.ts', '.tsx'], // 明确TS/TSX文件为ESM
  transform: {
    "^.+\\.(ts|tsx)$": [
      "ts-jest",
      {
        useESM: true, // 启用TS-Jest的ESM模式
      },
    ],
  },
  moduleDirectories: ["node_modules", "app"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy",
    '^(\\.{1,2}/.*)\\.js$': '$1', // 移除ESM导入的.js后缀
  },
  transformIgnorePatterns: [
    // 让Jest转译这些输出ES模块的第三方依赖
    '/node_modules/(?!@web3-storage/multipart-parser|@remix-run|@remix-run/testing)',
  ],
};

export default config;

2. 更新Babel配置文件 (babel.config.js) #

添加TypeScript和React转译预设，确保兼容JSX/TSX代码：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
};

3. 调整package.json配置 #

更新测试脚本，添加ESM运行所需的Node.js选项，并确保依赖完整：

{
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "dev": "node ./server.js",
    "test": "NODE_OPTIONS=--experimental-vm-modules jest --config jest.config.ts"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.22.15",
    "@remix-run/testing": "^2.0.0",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.5",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "ts-jest": "^29.1.1",
    "typescript": "^5.2.2"
  }
}

4. 优化测试代码 (app/__tests__/sample.test.tsx) #

简化异步等待逻辑，findByText本身已内置等待机制：

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { createRemixStub } from "@remix-run/testing";
import { render, screen } from "@testing-library/react";
import React from 'react';

test("renders loader data", async () => {
  function MyComponent() {
    const data = useLoaderData() as { message: string };
    return <p>Message: {data.message}</p>;
  }

  const RemixStub = createRemixStub([
    {
      path: "/",
      Component: MyComponent,
      loader() {
        return json({ message: "hello" });
      },
    },
  ]);

  render(<RemixStub />);

  // 直接await findByText即可，无需嵌套waitFor
  await screen.findByText("Message: hello");
});

运行测试步骤 #

1. 安装依赖：npm install
2. 执行测试：npm test

内容的提问来源于stack exchange，提问作者Sujay U N