React项目运行npm run start_windows时编译.test.js文件报错如何解决

当前报错为create-react-app默认ESLint规则扫描src目录下所有JS文件触发，.test.js文件中handleChangeShownOut函数内直接引用未声明的isShown、setIsShown变量，触发no-undef规则阻断启动流程。react-scripts默认打包不会将测试文件纳入生产产物，仅为开发阶段ESLint校验拦截。

两种实现方式二选一即可：

• 方式1：修改package.json的ESLint配置
  在现有eslintConfig字段中新增ignorePatterns配置，修改后如下：

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ],
  "ignorePatterns": ["**/*.test.js", "**/*.test.jsx", "src/tests/**/*"]
}

• 方式2：根目录新建.eslintignore文件
  写入以下内容即可：

**/*.test.js
**/*.test.jsx
src/tests/

配置完成后重启启动命令，ESLint就会跳过所有测试文件的校验，不会再触发报错。

如果不需要排除测试文件校验，直接修复测试代码中缺失变量声明的问题即可，两种修改方式二选一：

1. 补充缺失的变量声明，修改后测试代码如下：

import { configure, shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import React from "react";
import renderer from "react-test-renderer";
import Teleletture from "../directory";

configure({ adapter: new Adapter() });


it("Teleletture renders correctly", () => {
  // 补充声明缺失的变量
  const [isShown, setIsShown] = React.useState({
    algoritmo: false,
    output: false,
  });
  const tree = renderer
    .create(
      <Teleletture
        handleChangeShownOut={function handleChangeShownOut() {
          if (isShown.output == true) {
            setIsShown({ ...isShown, output: false });
          } else {
            setIsShown({ ...isShown, output: true });
          }
        }}
        isShown={isShown}
      />
    )
    .toJSON();
  expect(tree).toMatchInlineSnapshot(`
    Array [
      <div
        style={
          Object {
            "borderColor": "#c9c9c9",
            "borderRadius": "5px",
            "borderStyle": "solid",
            "height": "100%",
            "verticalAlign": "middle",
            "width": "100%",
          }
        }
      >
        <div>
          [...]
      </div>,
    ]
  `);
});

2. 若不需要测试回调逻辑，直接把回调改为空mock函数即可：handleChangeShownOut={() => {}}

修改完成后测试可正常运行，也不会触发ESLint报错。

内容的提问来源于stack exchange，提问作者simoneG