Question

我正在使用create-react-app开发一个应用程序，我正在尝试将我的代码拆分为模块，实现react-router huge-apps示例中描述的方式。除了单元测试之外，一切都运行良好：在运行路径组件的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);

和测试：

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

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

如何导出/导入我的组件以便能够正确测试它们。

感谢。

Answer 1

如果你在巴别塔中透露：

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);

并检查exports变量和module对象。此处module.exports应与exports相同。

如果输入：

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

在组件文件的末尾，您将使用新值覆盖module.exports。

这是问题的核心。

解决方案？

我认为你已经找到了一个，但最好不要将commonJS与ES6导出混合，因为ES6导出将被转换为commonJS语法。

同时检查＆＃34; What is export default in JavaScript?＆＃34;

Answer 2

使用此帖子找到解决方案：React router dynamic routes not rendering component

我只需添加＆＃39;默认＆＃39;使用es6模块导出时的require语句。

create-react-app，代码分割和开玩笑

2 个答案:

解决方案？