[Bug]: Preset not working after being configured according to README

maxwellhertz commented 1 year ago

Package version

v2.0.1

Jest version

v27.5.1

node-versions

v16.16.0

npm-versions

v8.11.0

Description

I installed the packages and modified my jest.config.json according to the instructions given in README.

<root>/package.json:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@cloudscape-design/collection-hooks": "^1.0.8",
    "@cloudscape-design/components": "^3.0.52",
    "@cloudscape-design/global-styles": "^1.0.1",
    "@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": "^16.11.58",
    "@types/react": "^18.0.19",
    "@types/react-dom": "^18.0.6",
    "eslint": "8.22.0",
    "i18next": "^21.9.1",
    "i18next-browser-languagedetector": "^6.1.5",
    "i18next-http-backend": "^1.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^11.18.6",
    "react-markdown": "^8.0.3",
    "react-scripts": "5.0.1",
    "remark-gfm": "^3.0.1",
    "typescript": "^4.8.3",
    "web-vitals": "^2.1.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": {
    "@cloudscape-design/jest-preset": "^2.0.1",
    "babel-jest": "^29.0.3"
  }
}

<root>/jest.config.json:

{
  "verbose": true,
  "collectCoverage": true,
  "preset": "@cloudscape-design/jest-preset"
}

When I ran npm run test, the following test still failed due to Jest encountered an unexpected token:

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  // ...
});

 FAIL  src/App.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

     ....

    Details:

    <root>/node_modules/@cloudscape-design/components/input/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { __assign, __rest } from "tslib";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      3 | import {Note} from '../api/types';
      4 | import {TFunction} from 'react-i18next';
    > 5 | import Input from '@cloudscape-design/components/input';
        | ^
      6 | import Button from '@cloudscape-design/components/button';
      7 | import SpaceBetween from '@cloudscape-design/components/space-between';
      8 | import Alert from '@cloudscape-design/components/alert';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/component/Editor.tsx:5:1)

Source code

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems

just-boris commented 1 year ago

You are using react-scripts which does not read Jest config. Please consult the tool documentation and general search on internet: https://stackoverflow.com/questions/59878153/how-to-use-jest-config-js-with-create-react-app

Closing because it is not actionable on our end.