Mocha ES6 相关导入

Question

我正在尝试使用 Mocha 和 Enzyme 测试我的一个 React 组件。在我的测试文件中，我有一个像这样的导入语句：

import MyComponent from '../../../src/components/MyComponent';

在那个组件中，我需要一个来自上面目录的助手：

import {COLORS}     from "../../helpers/THEME";

我的问题是，COLORS 似乎未定义。我已经用下面目录中的其他文件尝试过它，但它不起作用。这似乎与 import {...} from ... 语法有关。

知道我做错了什么吗？

主题导出：

const COLORS = {
    white: "#ffffff",
    black: "#000000",
};

const BUTTON = {
    color: 'blue',
    width: 30
};

export default {
    COLORS,
    BUTTON,
};

Answer 1

如果您使用的是 Babel 6，那么您的 export default 实际上会导出一个对象，其键 default 设置为您的两个对象。

export default { COLORS, BUTTONS };

//> { default: { COLORS: { hex: '#fff' }, BUTTONS: {} } };

这是进行导出的正确方法，而 Babel 5.x 正在这样做 "wrong" 而不是根据规范。

为了能够将您的对象与 export default 一起使用，您需要使用完整的 ES6 方式并执行

import theme from './THEME';
console.log(theme.COLORS);
//> { hex: '#fff' }

这里有 A good read here 详细说明。

Mocha ES6 相关导入

Mocha ES6 Relative Import

mocha.js

ecmascript-6

babeljs