摩卡 + Webpack + 打字稿 (反应): 错误找不到模块 (打字稿组件).

Question

我正在迁移一个反应应用程序以使用打字稿。我添加了一个打字稿组件并导入到另一个反应组件中。该应用程序编译并运行流畅。但是，当我yarn test运行测试时，Mocha 找不到我的打字稿组件：

Error: Cannot find module './manage_new/TypescriptFile'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/home/dan/Documents/my-ui/src/ui/main/Modal.jsx:7:1)
at Module._compile (module.js:652:30)
at loader (/home/dan/Documents/my-ui/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .jsx] (/home/dan/Documents/my-ui/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:565:32)...

错误出现在我导入打字稿组件的地方import { TypescriptFile } from './manage_new/TypescriptFile'.临时周转解决方案是使用扩展导入的：'./manage_new/TypescriptFile.tsx有效。但是，这不是理想的方式。我想让它使用通常的导入来工作。

webpack.config.babel.js 文件有一些条目，如下所示：

resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
alias: getAlias(),
},
module: {
rules: [
  {
    test: /.(js|jsx)$/,
    use: {
      loader: 'babel-loader',
      // options: ### to fully enable hot load / HMR, we use settings from package.json: babel.presets ###
    },
    exclude: /node_modules/
  },
 {
    test: /.(ts|tsx)$/,
    use: {
      loader: 'ts-loader',
    },
    exclude: /node_modules/
  }
]}

tsconfig.json 有条目：

{
"compilerOptions": {
"outDir": "./dist/",
"baseUrl": "src/",
"noImplicitAny": true,
"module": "es6",
"target": "es6",
"jsx": "react",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"strictNullChecks": true
  },
"include": [
"./src/**/*"
]

我运行的命令是：

yarn run cross-env NODE_PATH=./src BABEL_ENV=test node --inspect node_modules/mocha/bin/_mocha --compilers jsx:babel-register --require source-map-support/register -r mock-local-storage -r ./ui-test.helper.js "src/**/*.test@(.js|.jsx)" --reporter progress

如果有人能帮助我解决这个问题，以便我可以让 Mocha 正确找到我的 Typescript 组件，那就太好了。谢谢。

Answer 1

我看到了类似的问题，我通过添加--require ts-node/register来修复它。所以下面的代码可能适合你，虽然我还没有在 react 上测试过它

npx mocha --require ts-node/register --require esm src/**/*.spec.ts

或者在package.json脚本中（两个选项都有效，选择您喜欢的任何一个）：

"scripts": {
    "test": "mocha -r esm -r ts-node/register src/**/*.spec.ts",
    "test-ts": "ts-mocha -r esm -p tsconfig.json src/**/*.spec.ts"
}

并且不要忘记在devDependencies中添加esm：

npm install --save-dev esm

所以在package.json中它将是

"devDependencies": {
    "esm": "^3.2.25"
}