Question

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

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

在该组件中，我需要上面目录中的帮助程序：

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

我的问题是，COLORS似乎未定义。我已尝试使用下面目录中的其他文件，但它不起作用。它似乎是来自...语法的导入{...}。

我在这里做错了什么想法？

从主题出口：

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这样做是“错误的”，而不是根据规范。

为了能够将您的对象与export default一起使用，您可以使用完整的ES6方式进行操作

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

有A good read here解释这是详细信息。

摩卡ES6相对导入

1 个答案: