Question

我正在迁移React应用程序以使用打字稿。我添加了一个打字稿组件，并导入了另一个React组件。该应用程序可以编译并顺利运行。但是，当我运行测试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"
}

不要忘记将esm添加到devDependencies：

npm install --save-dev esm

因此在package.json中它将成为

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

Mocha + Webpack + Typescript（反应）：错误找不到模块（Typescript组件）

1 个答案: