Reactjs 创建react应用程序、代码拆分和笑话

我正在使用CreateReact应用程序开发一个应用程序，并尝试将代码分成模块，实现react路由器应用程序示例中描述的方式。 除了单元测试之外，一切都很好：我在为路由组件运行jest测试时遇到了这个错误：

TypeError: Cannot read property 'contextTypes' of undefined

管线组件如下所示：

export class IntroPage extends React.Component {
    render() {
        return (
            <div></div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        ...
    }
};

module.exports = connect(mapStateToProps)(IntroPage);

export类IntroPage扩展React.Component{
render（）{
返回(
);
}
}
常量mapStateToProps=（状态）=>{
返回{
...
}
};
module.exports=connect（mapStateToProps）（介绍页）；

还有一个测试：

import React from 'react';
import {shallow} from 'enzyme';
import {IntroPage} from '../IntroPage';

it('should render without crashing', () => {
    shallow(
        <IntroPage {...props}/> // IntroPage is undefined
    )
});

从“React”导入React；
从“酶”导入{shall}；
从“../IntroPage”导入{IntroPage}；
它（'应该在不崩溃的情况下渲染'，（）=>{
浅薄的(
//介绍页未定义
)
});

我必须如何导出/导入组件才能正确测试它们

---

谢谢。

通过这篇文章找到了解决方案：

---

使用es6模块导出时，我只需在require语句中添加“default”。

如果您在Babel中传输：

export class IntroPage extends React.Component {
   ...
}

您会注意到，Babel将其移动到

exports

变量

Object.defineProperty(exports, "__esModule", {
    value: true
});
... more good stuff
...
var IntroPage = exports.IntroPage = function (_React$Component) {

因此，您可以将以下内容记录到console.log中：

console.log(exports);
console.log(module.exports);
console.log(module);

并选中导出变量和模块对象。 此处的

模块中。导出

应与

导出

相同

如果键入：

 module.exports = connect(mapStateToProps)(IntroPage);

在组件文件的末尾，您将用新值覆盖

模块.exports

这是问题的核心

解决方案是什么？ 我认为您已经找到了一个，但最好不要将commonJS与ES6导出混合使用，因为ES6导出将转换为commonJS语法

---

---

同时选中“”

为什么在一个文件中同时使用ES6导出语法和CommonJS module.exports？这是不受支持的。CommonJS语法支持兼容性，但您不应该在任何新代码中使用它。混合它们在语义上是错误的，因为它们有相互冲突的含义。我知道，但如果我像在es6中那样导出组件（导出默认值），它将不起作用。我必须说我的路由定义如下所示：导出默认值{childRoutes:[{path:'/'，component:require（'./components/app/app'）}，{path:'*'，onEnter:（nextState，replace）=>replace（'/'）}；这是react路由器示例中公开的方法。谢谢。我知道混合语法不是一个好主意，但因为这是react路由器示例中的方法，我认为这是一个好方法。>但最好不要将commonJS与ES6导出混合。你是什么意思？我仍然在将语法与我找到的解决方案混合？我想我没有。顺便说一句，react路由器并不是一个优秀的产品。当你把它放在一个页面上时，它会很重，你在Facebook的默认react项目文档中找不到它，如果你搜索

react router alternative

，你会发现以后不使用它的更多理由。当然，但我正在一步一步地做：）