Question 59295 in Telegram API Question posted in
A comprehensive official documentation can be found here.

Jest encountered an unexpected token for `react-bootstrap` and import css file in typescript – Telegram API

I have searched 3 days about fixing this problem in my React app, I have read a lot of similar topics and could not fix it. All the solutions are about installing ts-jest and babel

I created my project with this command:

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

After editing and installing react-bootstrap, I have a common problem, you can see it in this image:

Jest encountered an unexpected token for react-bootstrap and import CSS file in typescript

The error:

    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";

I have configured ts-jest and bable like this:

my 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',
};

My test component 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()
});

Please help me to fix it, thank you in advance.

Tags:

2

Answers


  1. 0

    try to change the test environment to jsdom in jest configuration file.
    this is a copy of my jest config

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

    in tsconfig.json file change the jsx value from preserve to react-jsx as so:

    "jsx": "react-jsx",
    Login or Signup to reply.
  2. 0

    I had this issue also and I was frustrated by how long it took me to notice the problem.

    The import you are using is the ECMAScript (esm) export of the Row, Col, and Button. You likely don’t have your jest configured to support that (it is in experimental support anyway: https://jestjs.io/docs/ecmascript-modules).

    You will instead likely want to use the Common JS exports (cjs).

    In ClientHomePage.tsx you should change the imports to the following:

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

    I think that should then work with jest.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search