使用绝对路径导入反应组件

Question

这是我的测试文件

// /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 中导入模块没有问题。

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

原文由 spondbob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我的文件结构和你的完全一样。为了教 Jest 使用以 / 开头的导入，我使用 babel-plugin-module-resolver 及其方便的 root 选项。我的 .babelrc 对于 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 的冲突。

原文由 PEM 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 nishit chittora 发布，翻译遵循 CC BY-SA 4.0 许可协议