使用 Jest 错误重新混合单元测试

Question

我正在尝试使用 Remix、TypeScripe 和 Jest 配置单元测试

js.config.ts：

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

const config: Config.InitialOptions = {
  preset: 'ts-jest/presets/js-with-ts-esm',
  setupFilesAfterEnv: [`<rootDir>/jest.setup.ts`],
  testEnvironment: 'jsdom',
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
    "\\.[jt]sx?$": "babel-jest"
  },
  moduleDirectories: ["node_modules", "app"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
};

export default config;

babel.config.js :

module.exports = {presets: ['@babel/preset-env']}

package.json

"type": "module",
"scripts": {
    "build": "remix vite:build",
    "dev": "node ./server.js",
    "test": "jest --config jest.config.ts"
}

应用程序/测试/sample.test.tsx

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

test("renders loader data", async () => {
// ⚠️ This would usually be a component you import from your app code
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 waitFor(() => screen.findByText("Message: hello"));
});

出现错误：

详情：C：.... ode_modules@web3-storage\multipart-parser sm\src\index.js:1 （{“对象。”：函数（模块，导出，要求，__dirname，__filename，jest）{导入{ ^^^^^^

SyntaxError: Cannot use import statement outside a module

> 1 | import { json } from "@remix-run/node";
    | ^
  2 | import { useLoaderData } from "@remix-run/react";

请帮助我在 Remix 中配置单元测试的正确方法和步骤

Answer 1

我也遇到同样的问题，请问有解决办法吗？