与 cucumberjs 的反应集成答案

【问题标题】：React integration with cucumberjs与 cucumberjs 的反应集成
【发布时间】：2017-06-21 18:41:54
【问题描述】：

我正在开发一个 React-Nextjs 项目并尝试集成 BDD 工具 cucumber 以进行规范和功能级别测试。虽然在使用 enzyme 浅渲染组件时将 cucumber 与 React 集成时遇到了一些问题：

出现以下错误： TypeError: Cannot read property 'contextTypes' of undefinedconst wrapper = shallow(<Referrer/>);

黄瓜步骤测试文件代码：

import React from 'react';
import { defineSupportCode } from "cucumber";
import { shallow } from "enzyme";
import {Referrer} from "./../../components/Referrer";

defineSupportCode(({ Given, When, Then }) => {
    Given("I want to do something", function (callback) {
        // Write code here that turns the phrase above into concrete actions
        callback();
    });

    When("Xyz link is clicked", function (callback) {
        const wrapper = shallow(<Referrer/>);
        ... // Write code here that turns the phrase above into concrete actions
    });

    Then("Appropriate action happens", function (callback) {
        // Write code here that turns the phrase above into concrete actions
        callback();
    });
});

该组件是一个简单的 UI 组件，非常简单，它的结构如下：

import React from "react"; // eslint-disable-line no-unused-vars

export default class Referrer extends React.Component {
    render () {
        return (
            <div className="some-class" id="some-id">
              // html tags
              <style jsx>{`
                .some-class {
                  //styling
                }

                .some-class2 {
                  //styling
                }
              `}
              </style>
            </div>
        );
    }
}

我正在使用"cucumber": "^2.3.1"，"enzyme": "^2.6.0"，我不知道如何解决这个问题，到目前为止没有在线帮助，我一直在尝试调试过去几个小时但没有运气。

准确的错误sn-p：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

TypeError: Cannot read property 'contextTypes' of undefinedconst wrapper = shallow(<Referrer/>);

【问题讨论】：

你有任何 babel 预设让它工作吗？
我不需要，问题是我是如何导入组件的。

标签： reactjs webpack cucumber enzyme next.js

【解决方案1】：

我意识到出了什么问题，我的Referrer 组件被默认导出，尽管我没有正确导入它。我必须将其导入为 import Referrer from "./../../components/Referrer"; 而不是 import {Referrer} from "./../../components/Referrer";

【讨论】：