使用绝对路径导入React组件

海绵宝宝

这是我的测试文件

// /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/...)中的绝对路径导入组件

PEM

我的文件结构与您的文件结构完全相同。要教Jest使用以a开头的导入/,我使用babel-plugin-module-resolver及其方便的root选项。My .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的冲突。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

创建绝对路径

对ClassLoader使用绝对路径getResourceAsStream()

导入具有绝对路径的组件时,Jest提供了“无法找到模块”

使用ES6语法和绝对路径导入外部模块

使用baseUrl导入模块时,如何使tsc解析绝对路径?

如何在Expo和React Native中使用绝对路径导入?

如何使用react-router v4重定向到绝对路径?

使用绝对路径而不是相对路径与JetBrains WebStorm自动导入进行反应

如何解决使用绝对路径导入?

在打字稿中使用绝对路径进行导入

无法使用绝对路径导入

React&FuseBox别名设置-绝对路径

在使用ParcelJS构建的Cypress测试中,如何在绝对路径中使用导入?

如何在Create React App项目中避免很长的路径并使用绝对路径?

JSDoc注释未显示在绝对路径导入上

React Router Link绝对路径

Jsoup绝对路径

如何使用文件的绝对路径打开文件?

使用'find'命令获取文件的绝对路径

使用Process调用exe而没有绝对路径

从绝对路径+相对或绝对路径创建新的绝对路径

在绝对路径中使用通配符创建文件

使用React + Webpack时如何使用绝对路径导入自定义scss?

Apache Camel - ftp 组件 - 需要使用绝对路径

在 Angular 2 + Electron 中使用绝对路径

通过绝对路径在Java中导入类

使用 Pathlib 确定绝对路径

强制 OpenWindow 使用绝对路径而不使用 http

如何在 React 或 Next.js 中使用绝对路径而不是相对路径?