这是我的测试文件
// /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/...
)?
6条答案
按热度按时间ldxq2e6h1#
解决相对路径导入问题的更好方法是创建与
package.json
文件相邻的jsconfig.json
文件。那么
import { action1 } from "actions/myAction";
将工作c86crjj02#
如果您使用的是Create React App,则可以在项目根目录的
jsconfig.json
(需要在新的JavaScript模板中创建)或tsconfig.json
(已在TypeScript模板中创建)中设置绝对导入路径,以满足您的使用需求。示例:
官方文件:www.example.comhttps://create-react-app.dev/docs/importing-a-component/#absolute-imports
cwdobuhd3#
另一个解决方案是在项目的根目录中创建一个
.env
文件。在其中添加
NODE_PATH=src/
就是这样
保存文件并在终端中重新启动您的开发环境。
然后,您将检查项目并相应地更新一些import语句。
wgxvkvu94#
我的文件结构和你的完全一样,为了教Jest使用以
/
开头的导入,我使用babel-plugin-module-resolver和它的root
选项,我的.babelrc
看起来像这样:当我使用定制了根导入的Meteor时,我将Jest的用法和配置隐藏到存储库根目录下的
.jest
目录中,这样我就可以拥有一个特定的.babelrc
,而不会冒与Meteor的.babelrc
冲突的风险。5us2dqdw5#
使用webpack(v4)和babel,你可以在你的目录中提供绝对路径。按照以下步骤在你的.babelrc文件中,为插件创建这个条目。确保你的package.json中也有babel-plugin-root-import。
现在,如果遇到eslint问题,可以在eslintrc中添加以下代码行:
现在,为了使您的编辑器识别这些路径,您可以在jsconfig文件中创建这个条目。
希望这些条目能有所帮助。
gwbalxhn6#
我在package.json文件中有jest配置(在“jest”键下)。所以我只是在那里添加了这一行:
这对我很有效。我希望它能帮助其他人。