5

我在使用 Enzyme 和 Mocha 测试我的 React 项目时遇到了很多麻烦。我有一个这样的测试：

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';

import { ChipInput} from '../client/components/Chips';

describe('<ChipInput />', _ => {
  it('rocks', done => {
    done();
  });
});

当ChipInput被导入时，该文件会导入具有绝对路径的内容，例如/lib/collections/tags，然后 Mocha 出错，因为它显然只执行相对路径。我如何让这个工作？

编辑：

实际错误：

Error: Cannot find module '/lib/collections/tags'

发生这种情况是因为从/tests/ChipInput-test.js导入ChipInput组件/client/components/Chips/index.js，该组件具有以下几行：

import React from 'react';
import {
  MapsLocalOffer as TagIcon,
  ImageRemoveRedEye as InsightIcon,
  EditorInsertChart as TestIcon,
  SocialPerson as UserIcon,
} from 'material-ui/svg-icons';

import { Tag } from '/lib/collections/tags'; // error thrown here
import { Insight } from '/lib/collections/insights';
// import { Test } from '/lib/collections/tests';
import Chip from './Chip';
import ChipDisplay from './ChipDisplay';
import ChipInput from './ChipInput';
import * as chipTypes from './chip-types';
4

3 回答 3

2

对于从谷歌访问这里的任何人，虽然 ffxsam 的答案会起作用，但有很多方法可以做到这一点。Node 的 require 允许通过环境变量或以编程方式设置基数，允许使用不需要前导斜杠 ( require("my/module");vs require("/my/module");) 的简单绝对路径。

我使用 gulp 作为任务运行程序，所以我首选的技术是app-module-path在我的 gulpfile 顶部执行以下操作（只要您还没有遇到任何 absolute requires，这将在任何地方工作）：

require('babel-core/register'); //for mocha to use es6

require('app-module-path').addPath(__dirname + '/src'); //set root path

//I also use webpack to pull in other extensions, so I
//want mocha to noop out on them
require.extensions['.css'] = _.noop;
require.extensions['.scss'] = _.noop;
require.extensions['.png'] = _.noop;
require.extensions['.jpg'] = _.noop;
require.extensions['.jpeg'] = _.noop;
require.extensions['.gif'] = _.noop;

如需更完整的概要，请查看 github 用户 branneman 的此要点：https ://gist.github.com/branneman/8048520

于 2017-02-22T01:50:30.987 回答
1

这是解决方案，又好又简单！

https://github.com/mantrajs/babel-root-slash-import

基本上，安装所说的包：

npm install babel-root-slash-import --save-dev

将插件添加到.babelrc：

{
  "plugins": [
    "babel-root-slash-import"
  ]
}

很高兴去。

于 2016-05-17T18:00:55.667 回答
1

这已经有一段时间了，但我想在这里分享我的解决方案，以防万一，以上所有解决方案都不适用于您的具体情况。我一直在寻找解决我们的单元测试失败的解决方案“错误：找不到模块'components/shared/xyz'，我们的'components'文件夹在'client/src'文件夹下，所以我想出了以下解决方案这对我们有用。

npm install babel-plugin-module-resolver --save-dev

{
  'plugins': [
      'babel-plugin-module-resolver',
      { 'root': ['client/src'] }
   ]
}
于 2020-03-24T05:47:00.613 回答