Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Issues
  • #7319
Closed
Open
Issue created Jul 04, 2019 by Administrator@rootContributor

Debug Jest in react when module alias are defined

Created by: mnegahi

I have a react application which is create by CRA and using typescript. I define several module mapper in tsconfig.json

tsconfig.path.json

    {
      "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
          "@constants/*": ["constants/*"],
          "@components/*": ["components/*"],
          "@grid/*": ["components/Grid/*"],
          "@grid-share/*": ["components/Grid/Share/*"],
          "@utils/*": ["util/*"],
          "@services/*": ["Services/*"]
        }
      },
      "extends": "../tsconfig.json"
    }

then I define same alias in package.json for JEST

     "jest": {
        "snapshotSerializers": [
          "enzyme-to-json/serializer"
        ],
        "moduleNameMapper": {
          "@constants/(.*)": "<rootDir>/src/constants/$1",
          "@utils/(.*)": "<rootDir>/src/util/$1",
          "@grid-share/(.*)": "<rootDir>/src/components/Grid/Share/$1",
          "@grid/(.*)": "<rootDir>/src/components/Grid/$1",
          "@services/(.*)": "<rootDir>/src/Services/$1",
          "@components/(.*)": "<rootDir>/src/components/$1"
        }
      },

when I use yarn test everything is okey. However, I want to debug a test in vs code my VSCode luncher config file is like the following:

    {
      "version": "0.2.0",
      "configurations": [{
        "name": "Debug All Tests",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
        "args": [
          "test",
          "--runInBand",
          "--no-cache",
          "--watchAll=false"
        ],
        "cwd": "${workspaceRoot}",
        "protocol": "inspector",
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      }, {
        "name": "Debug Current Test",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
        "args": [
          "test",
          "--runInBand",
          "--no-cache",
          "${fileBasenameNoExtension}",
          "--watchAll=true"
        ],
        "cwd": "${workspaceRoot}",
        "protocol": "inspector",
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      }]
    }

the problem is when I try to debug a test case in VSCode, I have following error

Out of the box, Create React App only supports overriding these Jest options:

• collectCoverageFrom • coverageReporters • coverageThreshold • extraGlobals • globalSetup • globalTeardown • resetMocks • resetModules • snapshotSerializers • watchPathIgnorePatterns.

These options in your package.json Jest configuration are not currently supported by Create React App:

• moduleNameMapper

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

is there any way to solve this problem without ejecting??

Assignee
Assign to
Time tracking