玩笑/反应-类型错误：无法读取未定义的属性“touchStart”

Question

我已经使用 react、webpack 和 jest/enzyme 创建了项目来测试组件。 在 webpack 中为文件添加了别名，并且在“moduleNameMapper”中的 jest.config.js 中添加了相同的别名。 但是在运行测试时出现以下错误：

测试套件无法运行

TypeError: Cannot read property 'touchStart' of undefined

  2 | // import ReactSixteenAdapter from 'enzyme-adapter-react-16';
  3 | // import Enzyme from 'enzyme';
> 4 | import Adapter from 'enzyme-adapter-react-16';
    | ^
  5 | import Enzyme, { shallow, configure } from 'enzyme';
  6 | import WelcomeBody from '../components/welcome/WelcomeBody';
  7 | 

  at Object.<anonymous> (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:64:36)
  at Object.<anonymous> (node_modules/enzyme-adapter-react-16/src/index.js:2:18)
  at Object.<anonymous> (app/src/__tests__/WelcomeBody.test.js:4:1)

有人可以帮助解决这个问题。

Answer 1

如果您使用的是 TypeScript，请确保 tsconfig 文件中的“esModuleInterop”为真。 这是一个示例：

"compilerOptions": {
"target": "es2019",
    "moduleResolution": "node",
    "module": "commonjs",
    "lib": ["es2019"],
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "resolveJsonModule": true,
    "alwaysStrict": true,
    "removeComments": true,
    "noImplicitReturns": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@src/*": ["./src/*"],
      "@test/*": ["./test/*"]
    },
    "rootDirs": [
      "./src",
      "./test"
    ],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },