React integration with cucumberjs

Question

I am working on a React-Nextjs project and trying to integrate the BDD tool cucumber for specification and feature level testing. Though am having some trouble integrating cucumber with React when using enzyme to shallow render the component:

Here's the errors am getting: TypeError: Cannot read property 'contextTypes' of undefined at const wrapper = shallow(<Referrer/>);

Code for cucumber step test file:

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

The component is a simple UI component, pretty straight forward, here's its structure:

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

I am using "cucumber": "^2.3.1", "enzyme": "^2.6.0", I am not sure how to resolve this, no help so far online, I have been trying to debug for last couple hours but no luck.

Exact error snippet:

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 undefined at const wrapper = shallow(<Referrer/>);

I didnt need any, the issue was how I was importing the component. — user988544, Jan 29 '19 at 20:21

score 2 · Accepted Answer · answered Jun 22 '17 at 21:04

I realized what was wrong, my Referrer component is being exported as a default, though I wasn't importing it correctly. I had to import it as import Referrer from "./../../components/Referrer"; instead of import {Referrer} from "./../../components/Referrer";

React integration with cucumberjs

1 Answers1