Jest 遇到了 `react-bootstrap` 的意外标记并在打字稿中导入 css 文件

Question

我已经搜索了 3 天来解决我的 React 应用程序中的这个问题，我已经阅读了很多类似的主题但无法解决它。所有解决方案都是关于安装ts-jest和babel

我用这个命令创建了我的项目：

npx create-react-app sample --template cra-template-pwa-typescript

编辑并安装react-bootstrap 后，我遇到了一个常见问题，您可以在这张图片中看到它：

错误：

    Details:

    /Users/shahryar/Desktop/telegram-restaurant-management-bot-ui/telegram-restaurant-management-bot-ui/node_modules/react-bootstrap/esm/Row.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import classNames from 'classnames';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import "./OrdersComponent.css";
    > 2 | import Row from "react-bootstrap/esm/Row";
        | ^
      3 | import Col from "react-bootstrap/esm/Col";
      4 | import Button from "react-bootstrap/esm/Button";
      5 | import OrderComponent from "./OrderComponent";

---

我已经像这样配置了ts-jest和bable：

我的 package.json：

{
  "name": "telegram-restaurant-management-bot-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^17.0.45",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "bootstrap": "^5.2.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-bootstrap-icons": "^1.9.1",
    "react-dom": "^18.2.0",
    "react-indiana-drag-scroll": "^2.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4",
    "workbox-background-sync": "^6.5.4",
    "workbox-broadcast-update": "^6.5.4",
    "workbox-cacheable-response": "^6.5.4",
    "workbox-core": "^6.5.4",
    "workbox-expiration": "^6.5.4",
    "workbox-google-analytics": "^6.5.4",
    "workbox-navigation-preload": "^6.5.4",
    "workbox-precaching": "^6.5.4",
    "workbox-range-requests": "^6.5.4",
    "workbox-routing": "^6.5.4",
    "workbox-strategies": "^6.5.4",
    "workbox-streams": "^6.5.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-typescript": "^7.18.6",
    "babel-jest": "^29.3.1",
    "msw": "^0.48.0",
    "ts-jest": "^29.0.3"
  }
}

babel.config.js

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

jest.config.js

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

我的测试组件ClientHomePage.test.tsx

import { render, screen } from '@testing-library/react';
import ClientHomePage from './ClientHomePage';

test('should first', () => {
  render(<ClientHomePage />);
  const heading = screen.getByRole('heading', { name: /Jeagar Resto/i });
  expect(heading).toBeInTheDocument()
});

请帮助我修复它，在此先感谢您。

Answer 1

尝试在 jest 配置文件中将测试环境更改为 jsdom。 这是我的笑话配置的副本

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
};

在 tsconfig.json 文件中，将 jsx 值从 preserve 更改为 react-jsx，如下所示：

"jsx": "react-jsx",

Answer 2

我也有这个问题，我很沮丧我花了多长时间才注意到这个问题。

您使用的导入是 Row、Col 和 Button 的 ECMAScript (esm) 导出。你可能没有配置你的笑话来支持它（无论如何它都在实验性支持中：https://jestjs.io/docs/ecmascript-modules）。

相反，您可能想要使用 Common JS exports (cjs)。

在 ClientHomePage.tsx 中，您应该将导入更改为以下内容：

import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";

我认为这应该与开玩笑一起工作。