Support for JSX is not working for DEBUG mode

[sachin-agarwal-by]

I am using Jest-Runner with Create-React-APP and when I am debugging test case for example abcs.test.js its saying Support for the experimental syntax 'jsx' isn't currently enabled... Can you please help. I am not using babel in my project. How to fix this.

[firsttris]

hey @sachin-agarwal-by, thx for reporting. i was able to reproduce your issue.

[firsttris]

[sachin-agarwal-by]

when can we expect tgis to fix otherwise this extension is no use for tsx code

[firsttris]

i found that its not at all related to my extension rather missing configuration.

you need to add a babel.config.js

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

and also a jest.config.js

module.exports = {
  transform: {
    '\\.(js|ts|jsx|tsx)$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|ico|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|webmanifest|xml)$':
      '<rootDir>/jest/fileTransformer.js'
  },
  moduleNameMapper: {
    '\\.(css)$': 'identity-obj-proxy'
  },
}

[sachin-agarwal-by]

I am not using babel but still do we need to add babel.config.js ?

[firsttris]

i tested with Create-React-App

[sachin-agarwal-by]

great , thanks a lot for looking again.. I will try .

[hyluo1]

module.exports = {
  transform: {
    '\\.(js|ts|jsx|tsx)$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|ico|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|webmanifest|xml)$':
      '<rootDir>/jest/fileTransformer.js'
  },
  moduleNameMapper: {
    '\\.(css)$': 'identity-obj-proxy'
  },
}

What is a <rootDir>/jest/fileTransformer.js?
I can't run debug without it

[Bamboleyla]

@firsttris I use a project created with the help of the CRA, Just is configured automatically and is missing by default fileTransformer.js , a react-app-env.d.ts file is created in its place.

//react-app-env.d.ts

/// <reference types="react-scripts" />

This file references TypeScript types declarations that are specific to projects started with Create React App.

These type declarations add support for importing resource files such as bmp, gif, jpeg, jpg, png, webp, and svg. That means that the following import will work as expected without errors:

import logo from './logo.svg';

It also adds support for importing CSS Modules. This relates to import of files with .module.css,.module.scss, and .module.sass extensions.

All tests work fine using the standard command from package.json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test ",   
  },

Your solution forces to create babel.config.js, jest.config.js, and fileTransformer.js . In which you need to describe the handlers for each imported extension, as well as modules. It's long and difficult.

Maybe there is another way? Without fileTransformer.js ?

[PhilippeRoy]

Hope this helps some, I got debug to work for CRA in vscode by doing the following: #315