-1

I updated my React test package from "jest-dom": "^3.2.2" and "react-testing-library": "^7.0.0" to "@testing-library/jest-dom": "^5.16.5" and "@testing-library/react": "^14.0.0". But all the test suite failed and I got below error. "Test suite failed to run

Jest encountered an unexpected token



This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.



By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".



Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.



You'll find more details and examples of these config options in the docs:

https://jestjs.io/docs/en/configuration.html

Details:



C:\VScodeProjects\Project\UpdateTest\my-react-app\node_modules\@testing-library\dom\dist\label-helpers.js:32
    return element.labels ?? [];
                           ^



SyntaxError: Unexpected token ?



  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (node_modules/@testing-library/dom/dist/queries/label-text.js:9:21)"

I did some research, I tried to write a jest.config.js, but it will get other error like "Invalid testPattern". I put my jest.config.js below

const config={
"transform": {
      "\\.js$": "<rootDir>/node_modules/babel-jest"
    },
};
module.exports = config;
Lin Du
  • 88,126
  • 95
  • 281
  • 483
bruce
  • 21
  • 3

1 Answers1

0

The code transformer doesn't transform the Nullish coalescing operator (??) correctly. Queries like ByLabelText will call getRealLabels() function which use that operator. That's why you got the error.

If you use jest with babel, please follow getting-started#using-babel guide.

We need to use @babel/plugin-transform-nullish-coalescing-operator to transform the nullish coalescing operator(??) correctly.

NOTE: This plugin is included in @babel/preset-env, in ES2020

So we can use @babel/preset-env instead of adding each babel plugin one by one.

Besides, you don't need to set the transform option because the default value of it is:

Default: {"\\.[jt]sx?$": "babel-jest"}

A working example:

package.json:

{
  "name": "with-jest",
  "version": "1.0.0",
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@babel/preset-env": "^7.22.5",
    "@babel/preset-react": "^7.22.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "babel-jest": "^29.5.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

jest.config.js:

module.exports = {
  testEnvironment: "jsdom",
};

babel.config.js:

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

__tests__/index.test.jsx:

import { render, screen } from "@testing-library/react";
import React from "react";

describe("first", () => {
  test("should pass", () => {
    render(
      <label>
        Username <input />
      </label>
    );
    const inputNode = screen.getByLabelText("Username");
    expect(inputNode).toBeTruthy();
  });
});

Test result:

> with-jest@1.0.0 test /home/lindu/workspace/with-jest
> jest

 PASS  __tests__/index.test.jsx
  first
    ✓ should pass (21 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.793 s, estimated 1 s
Ran all test suites.
Lin Du
  • 88,126
  • 95
  • 281
  • 483