我正在开发一个 React-Nextjs 项目并尝试集成 BDD 工具 cucumber用于规范和功能级别测试。虽然我在集成时遇到一些麻烦cucumber
使用 enzyme
时与 React浅层渲染组件:
这是出现的错误:
TypeError: Cannot read property 'contextTypes' of undefined
在const wrapper = shallow(<Referrer/>);
cucumber 步骤测试文件代码:
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"
,我不知道如何解决这个问题,到目前为止在线上没有任何帮助,我在过去的几个小时里一直在尝试调试,但没有成功。
确切的错误片段:
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
在const wrapper = shallow(<Referrer/>);
最佳答案
我意识到出了什么问题,我的 Referrer
组件正在默认导出,尽管我没有正确导入它。我必须将其导入为 import Referrer from "./../../components/Referrer";
而不是 import {Referrer} from "./../../components/Referrer";
关于reactjs - React 与 cucumberjs 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44683865/