Jest Snapshot 测试 returns 查找扩展名为 .ts 的文件时出错，尽管测试文件是 .tsx

Question

这是我在名为 Carousel.Snapshots.test.tsx

的文件中的测试

describe('Carousel Snapshot', () => {
  it('renders as expected', () => {
    const props = getPropsForSnapshot();

    const tree = renderer.create(<Carousel {...props} />);
    console.debug(tree);
    expect(tree).toMatchSnapshot();
    
  });
});

当我运行和

开玩笑时

jest  -c ./config/jest.config.js --detectOpenHandles --forceExit --watch

开玩笑 returns 这个错误：

 FAIL  .../carousel/Carousel.Snapshots.test.tsx
  ● Test suite failed to run

    Could not find source file: '...\carousel\Carousel.Snapshots.test.ts'.

      at getValidSourceFile (node_modules/typescript/lib/typescript.js:157093:29)
      at Object.getSemanticDiagnostics (node_modules/typescript/lib/typescript.js:157351:36)
      at TsCompiler._doTypeChecking (node_modules/ts-jest/dist/compiler/ts-compiler.js:302:119)
      at TsCompiler.getCompiledOutput (node_modules/ts-jest/dist/compiler/ts-compiler.js:133:18)
      at TsJestCompiler.getCompiledOutput (node_modules/ts-jest/dist/compiler/ts-jest-compiler.js:13:39)
      at TsJestTransformer.process (node_modules/ts-jest/dist/ts-jest-transformer.js:182:37)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.421 s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

它似乎在寻找扩展名为 .ts 的文件版本，但文件有一个 .tsx extension.Here 我的笑话配置

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  rootDir: '../',
  testPathIgnorePatterns: [
    '<rootDir>/dist/',
    '<rootDir>/node_modules/',
    '<rootDir>/src/server',
  ],
  moduleNameMapper: {
    "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest-tools/fileMock.js",
    "\.(css|less)$": "<rootDir>/config/jest-tools/styleMock.js"
  },
  setupFiles: [
    "<rootDir>/config/jest-tools/testSetup.js"
  ],
};

我原以为快照测试会成功

Answer 1

解决方案是 tsconfig.json 文件。

添加

esModuleInterop: true

编译器选项解决了我的问题。

{
  "compilerOptions": {
    "outDir": "./build/", // path to output directory
    "sourceMap": true, // allow sourcemap support
    "strictNullChecks": true, // enable strict null checks as a best practice
    "module": "esnext", // specifiy module code generation
    "jsx": "react", // use typescript to transpile jsx to js
    "target": "es5", // specify ECMAScript target version
    "strict": true /* Enable all strict type-checking options. */,
    "allowJs": true, // allow a partial TypeScript and JavaScript codebase
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true, // disallow implicit any type
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "lib": ["esnext", "es2019", "es2017", "es7", "es6", "dom", "dom.iterable"],
    "baseUrl": ".",
    "paths": {
      "~/*": [ "./src/app/*" ],
      "-/*": [ "./*" ]
    },
    "esModuleInterop": true
  },
  "include": ["./src"],
  "exclude": [
    ".storybook",
    "config",
    "public",
    "webpack",
    "storybook-static",
    "./node_modules/**/*"
  ]
}

添加后，笑话测试运行符合预期

Jest Snapshot 测试 returns 查找扩展名为 .ts 的文件时出错，尽管测试文件是 .tsx

Jest Snapshot test returns an error looking for the file with a .ts extension though the test file is a .tsx

typescript

reactjs

jestjs

它似乎在寻找扩展名为 .ts 的文件版本，但文件有一个 .tsx extension.Here 我的笑话配置