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

Question

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:

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.

Phuggo · Accepted Answer · 2023-01-27 18:04:05Z

2

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.

edited Jan 27, 2023 at 18:04

answered Jan 27, 2023 at 18:03

Phuggo

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Benisti · Accepted Answer · 2022-11-10 12:56:07Z

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

answered Nov 10, 2022 at 12:56

Daniel Benisti

1304 silver badges14 bronze badges

5 Comments

Shahryar Tavakkoli Over a year ago

Hi @daniel-benisti , I changed my code to your copy, when I run npm testit shows me the first post error image, but if I run npx jest I get the TypeError: Cannot read properties of undefined (reading 'html') error. my test script is "test": "react-scripts test"

Daniel Benisti Over a year ago

I see, I work with a different configuration. usually in projects Jest works with react-testing-library. the combination of both provide a lot of methods that ease the testing process. I've configured my npm test to jest i.e "test" : "jest" and installed the following packages: "@types/jest": "^29.2.2", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "jest": "^29.3.1", "jest-environment-jsdom": "^29.3.1", "ts-jest": "^29.0.3". give it a try, i think that should work for you

Shahryar Tavakkoli Over a year ago

I am sorry to waste your time, I tried this, but it did not fix my problem, so I upload the project in a repo if it is possible please see it: github.com/shahryarjb/testproject // the new error: import "./ClientHomePage.css"; SyntaxError: Unexpected token '.' with test: jest

Daniel Benisti Over a year ago

I've followed the following article recommendation and it worked for me. bobbyhadz.com/blog/…

Shahryar Tavakkoli Over a year ago

Unfortunately it didn't work for me, but thank you

Collectives™ on Stack Overflow

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

The error:

my package.json:

babel.config.js

jest.config.js

My test component `ClientHomePage.test.tsx`

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The error:

my package.json:

babel.config.js

jest.config.js

My test component ClientHomePage.test.tsx

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related

My test component `ClientHomePage.test.tsx`