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

Posted 2021-05-06

这是我的测试文件

// /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/...）导入组件？

答案

我的文件结构与您的模式完全相同。为了让Jest使用以/开头的进口，我使用babel-plugin-module-resolver及其方便的root选项。我对jest的.babelrc看起来像这样：

{
  "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的冲突。

另一答案

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

在其中你将添加NODE_PATH=src/

就这样

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

之后，您将完成项目并相应地更新一些import语句。