使用绝对路径导入react组件

IT技术 reactjs webpack jestjs enzyme
2021-05-22 23:20:53

这是我的测试文件

// /imports/components/main.test.js
import React from 'react'
import { shallow, mount } from 'enzyme'
import Main from './main'
import TextInput from "/imports/ui/textInput"
...

而 main.js 有

// /imports/components/main.js
import { action1 } from "/imports/actions/myAction"

但是当我运行测试时它会抛出一个错误，说

Cannot find module '/imports/actions/myAction' from 'main.js'

如果我评论import './main'，导入 TextInput 也会发生同样的事情。我在 node_modules 中导入module没有问题。

如何告诉 Jest 或 webpack 使用项目目录（即import Foo from /imports/...）中的绝对路径导入组件？

4个回答

解决相对路径导入问题的更好方法是创建与jsconfig.json文件相邻的package.json文件。

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

然后import { action1 } from "actions/myAction";会工作

如果您使用 Create React App，您可以在项目根目录的a jsconfig.json（需要在新的 JavaScript 模板中tsconfig.json创建）或（已在 TypeScript 模板中创建）中设置绝对导入路径，以供您使用。

例子：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

官方文档：https : //create-react-app.dev/docs/importing-a-component/#absolute-imports

另一种解决方案是.env在项目的根目录中创建一个文件。

在其中，您将添加 NODE_PATH=src/

就这样

保存文件并在终端中重新启动您的开发环境。

之后，您将检查您的项目并相应地更新一些导入语句。

我的文件结构与您的完全相同。为了教 Jest 使用以 a 开头的导入/，我使用了babel-plugin-module-resolver及其方便的root选项。我的.babelrcfor Jest 看起来像这样：

{
  "presets": ["es2015", "meteor"],
  "plugins": [
    "transform-class-properties",
    "transform-react-constant-elements",
    "transform-react-inline-elements",
    "transform-react-remove-prop-types",
      ["module-resolver", {
      "root": ["../"],
      "alias": {
        "react-router-dom": "react-router-dom/umd/react-router-dom.min.js",
        "redux": "redux/dist/redux.min.js",
        "react-redux": "react-redux/dist/react-redux.min.js"
      }
    }]
  ]
}

由于我使用的是自定义其根导入的 Meteor，我将我的 Jest 用法和配置隐藏到.jest我的存储库根目录中的一个目录中，这样我就可以在.babelrc不冒与 Meteor 的冲突的情况下进行特定操作。

其它你可能感兴趣的问题
上一篇React-Apollo，不要在组件加载时运行查询 下一篇Tinkerine 3D 打印机