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"
],
}
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
requireinstead ofimport.
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.