VS Code imports using the require syntax in React test cases

user_7004388 0
Viewed 416

Little lately, I have found that my react project in the VS Code IDE is using require syntax in the test cases when I'm doing auto import from the suggestions. Could anyone please help?

I'm using React testing library and here's how it looks like.

const { render } = require("@testing-library/react");
const { default: Home } = require("../Home");

describe("Home", () => {
  it("should render Search page", () => {
    const { container } = render(<Home />);
  });
});

I have a jsconfig.json file as follows

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": [
    "src"
  ],
}
react-testing-library visual-studio-code reactjs javascript
1 Answers

From the new feature CommonJS auto imports, we know:

If VS Code detects that you are working in a CommonJS style JavaScript module, auto imports will now use require instead of import.

You can set compilerOptions.module to es2015 for jsconfig.json. So that the js file will be detected as ESM, auto imports will use import instead of require.

jsconfig.json:

{
  "compilerOptions": {
    "module": "es2015"
  },
}

// auto imports use `import` keyword.
import { render } from 'react-dom';

describe('Home', () => {
  it('should render Search page', () => {
    render
  });
});

For more info about when VS code uses require, see shouldUseRequire function.

P.S If it does not work, try to reload the window of VS code after adding this configuration.

user_64635580
Related