使用 ts 在 React Native 中进行测试：无法在模块外部使用 import 语句

Question

当在带有 Typescript 的 React-Native 项目中使用 Jest 运行测试时，我无法摆脱此导入错误：

SyntaxError: Cannot use import statement outside a module

我在我希望运行的测试中只有一个渲染：

import React from "react";
import { render } from "@testing-library/react-native";
import { Feed } from "./Feed";

describe("Feed", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("renders correctly", async () => {
    /////////////////////
    ////// ARRANGE //////
    /////////////////////

    /////////////////////
    //////   ACT   //////
    /////////////////////
    render(<Feed />);

    ////////////////////
    ////// ASSERT //////
    ////////////////////
  });
});

错误出现在第 2 行。

这是我的 packege.json 文件：

{
  "name": "expo-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest"
  },
  "dependencies": {
    "@expo/html-elements": "latest",
    "@gluestack-style/legend-motion-animation-driver": "^1.0.3",
    "@gluestack-style/react": "latest",
    "@gluestack-ui/config": "latest",
    "@gluestack-ui/themed": "^1.0.37",
    "@legendapp/motion": "^2.2.1",
    "@react-native-async-storage/async-storage": "^1.21.0",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-spring/native": "^9.5.5",
    "@react-spring/web": "^9.5.5",
    "axios": "^1.6.5",
    "expo": "~48.0.17",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "^0.73.2",
    "react-native-svg": "13.4.0",
    "react-native-vector-icons": "^10.0.3",
    "react-native-webview": "11.26.0",
    "react-tinder-card": "^1.6.4"
  },
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/preset-env": "^7.24.4",
    "@babel/preset-typescript": "^7.24.1",
    "@expo/webpack-config": "^18.1.2",
    "@testing-library/react-native": "^12.4.5",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.0.14",
    "@types/react-native-vector-icons": "^6.4.18",
    "babel-jest": "^29.7.0",
    "jest": "^29.7.0",
    "ts-jest": "^29.1.2",
    "typescript": "^4.9.5"
  },
  "private": true
}

我的 babel.config.js 文件：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      "@babel/preset-env",
      "@babel/preset-typescript",
      "@babel/preset-react",
    ],
  };
};

我的 tsconfig.json 文件：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "module": "ES2022"
  }
}

最后是我的 jest.config.js 文件：

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
};

我尝试更改我的配置文件，就像其他线程中建议的那样，并且我安装了 ts-jest，但我没有成功解决我的问题。

Answer 1

您将需要使用

"type": "module"

在你的package.json中。

示例：

// package.json
{
  "exports": {
    "import": "./index-module.js",
    "require": "./index-require.cjs"
  },
  "type": "module"
}