在 React 测试用例中使用 require 语法导入 VS Code

问题描述

最近，我发现我在 VS Code IDE 中的 react 项目在测试用例中使用了 require 语法，当我从建议中进行自动导入时.有人可以帮忙吗?

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?

我正在使用 React 测试库，这是它的外观.

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 />);
  });
});

我有一个 jsconfig.json 文件如下

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": [
    "src"
  ],
}

推荐答案

来自新功能 CommonJS 自动导入，我们知道:

From the new feature CommonJS auto imports, we know:

如果 VS Code 检测到您正在使用 CommonJS 风格的 JavaScript 模块，自动导入现在将使用 require 而不是 import.

您可以将 compilerOptions.module 设置为 es2015 用于 jsconfig.json.为了将 js 文件检测为 ESM，自动导入将使用 import 而不是 require.

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
  });
});

有关 VS 代码何时使用 require 的更多信息，请参阅 shouldUseRequire 函数.

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

P.S 如果还是不行，请在添加此配置后尝试重新加载 VS Code 的窗口.

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

这篇关于在 React 测试用例中使用 require 语法导入 VS Code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！