我正在为组件编写一个测试,以测试其功能之一,但遇到错误:
ShallowWrapper can only wrap valid elements
Panel.jsx
(简体):
class Panel extends Component {
static propTypes = {
...
};
static defaultProps = {
...
};
constructor(props) {
super(props);
...
this.makeConfigArray = this.makeConfigArray.bind(this);
this.filterSelected = this.filterSelected.bind(this);
}
makeConfigArray() {
...
}
filterSelected(filters) {
...
}
render() {
return (
<div>
<ReactFilterSentence
filters={this.makeConfigArray()}
label="Filter Page"
isPersistent
onChange={(...args) => this.filterSelected(args)}
/>
<span className="page-filter__config-form-separator" />
</div>
);
}
}
export default Panel;
测试文件如下-
panel-test.jsx
:
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import Panel from '../../src/components/Panel.jsx';
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-15');
Enzyme.configure({ adapter: new Adapter() });
describe('<Panel /> component', () => {
let props;
const getPanelWrapper = () => shallow(<Panel {...props}/>);
it('should make regions filter query string', () => {
const regions =
{
"key":"region",
"value":
[
"Nordic > Nordic > Denmark",
"Nordic > Finland",
"Nordic > Norway",
"Nordic > Sweden"
]
};
const expected = "regions=DK+FI+NO+SE";
expect(getPanelWrapper().instance().makeRegionsQueryString(regions)).to.equal(expected);
});
});
为什么会有这样的想法!