js 测试在测试 tsx 文件时不起作用答案

【问题标题】：js tests do not work when it s tsx files testedjs 测试在测试 tsx 文件时不起作用
【发布时间】：2023-04-10 00:30:01
【问题描述】：

我遇到了一个我不太了解的问题，所以我请求您尝试帮助我解决和理解它。

我几天以来一直在进行测试以稳定我的应用程序。我的应用程序是用 ReactJs 和 typeScript 编写的，但我的测试只写成 Js（因为我认为这对类型测试不是很有用，没关系）

因此，对于 ts 测试，它工作得非常好 12 个套件中的 9 个通过了，但是 12 个套件中的 3 个对 tsx 文件进行了测试，然后并没有真正起作用……就像开玩笑一样，请注意理解 tsx 文件，对吗？

我遇到了这样的错误：

● 测试套件无法运行

SyntaxError: /Users/***/function.spec.js: Unexpected token, expected "," (44:16)

  42 |     }
  43 |     wrapper = mount(
> 44 |       <Provider store={store}>
     |                 ^
  45 |         <HookWrapper />
  46 |       </Provider>
  47 |     );

  at Object._raise (../../../../../usr/local/lib/node_modules/jest/node_modules/@babel/parser/src/parser/error.js:60:45)

或其他类似的：

● 测试套件无法运行

SyntaxError: /Users/***/index.spec.js: Unexpected token, expected "," (32:34)

  30 |   it("Run file/index is ran", async () => {
> 32 |     wrapper = shallow(<ComponentFile {...minProps} />);
     |                                   ^
  33 |     expect(wrapper).toBeTruthy();
  34 |   });
  35 |

  at Object._raise (../../../../../usr/local/lib/node_modules/jest/node_modules/@babel/parser/src/parser/error.js:60:45)

jest.config.js

module.exports = {
  verbose: true,
  collectCoverage: true,
  coveragePathIgnorePatterns: [],
  forceCoverageMatch: [" */*.spec.js"],
  testEnvironment: "jsdom",
  moduleFileExtensions: ["ts", "tsx", "js"],
};

我过了一天才明白出了什么问题，但无事可做...我尝试了很多开玩笑的配置，因为我认为问题来自它，但我没有成功

【问题讨论】：

标签： reactjs typescript jestjs

【解决方案1】：

自从整整两天以来，我搜索了很多关于发生的事情，我发现了问题！我不确定这是否会对每个人都有帮助，但对我来说它有效。

我想说的是我对设置的感觉很棒（问题来自这里）但我太专注于 babel.config.js / babel.config.js / tsconfig.js / 和一般的笑话.config.js ......但问题是我认为 steupTests.js 默认情况下是由 jest 在 npm 测试/编译中找到的（无论如何），但我完全错了，最后我将它包含在我的 jest.config.js 中setupFilesAfterEnv: ["./src/setupTests.js"] 现在我所有的套件测试都通过了

我给你我的配置：

jest.config.js

module.exports = {
    clearMocks: true,

    coverageDirectory: "coverage",
  
    coveragePathIgnorePatterns: ["/node_modules/"],
  
    moduleNameMapper: {
      "\\.(css|less)$": "identity-obj-proxy",
    },
  
    testMatch: [
      // "**/__tests__/**/*.[jt]s?(x)",
      "**/?(*.)+(spec|test).[tj]s?(x)",
    ],
  
    testPathIgnorePatterns: ["/node_modules/"],

    verbose: true,
    setupFilesAfterEnv: ["./src/setupTests.js"],
  
  };

tsconfig.js：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "types": ["jest", "node"],
    "noEmit": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react"
  },
  "include": ["src"]
}

babel.config.js

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

希望它能对你们中的一些人有所帮助，问候！

【讨论】：