While writing the test case in JEST for React file I am getting this error. Following is my sample code:
search_basr_test.js
jest.autoMockOff();
global.React = require('react/addons');
jest.setMock('../stores/browser_store.jsx');
beforeEach(function() {
var search_bar = require('../components/search_bar.jsx');
});
var TestUtils = React.addons.TestUtils;
describe("Test", function() {
it("should render Test", function() {
var test = TestUtils.renderIntoDocument(<search_bar/>);
expect(test).toBeDefined();
});
it("renders a list in a box with proper CSS classes", function() {
var test = TestUtils.renderIntoDocument(<search_bar/>);
let box = TestUtils.findRenderedDOMComponentWithTag(test, "div");
expect(box.className).toEqual("sidebar__collapse");
});
});
search_bar.jsx
return (
<div>
<div
className='sidebar__collapse'
onClick={this.handleClose}
>
<span className='fa fa-angle-left'></span>
</div>
<span
className='search__clear'
onClick={this.clearFocus}
>
{'Cancel'}
</span>
}
Anyone out there to help me out from this??
A composite component is a component which contains React Component (not div, span, ...) The method 'findRenderedDOMComponentWithTag' takes in parameter a composite component.
Try to parse the component directly in your case (jquery, js, ...) because it is not a composite one
This is late, but I just ran into this, and I haven't found a great answer for it.
My solution was to make a wrapper component in the test file
import { Component } from "react";
class Wrapper extends Component {
render() {
return <YourComponent {...this.props} />
}
}
and instead of calling
TestUtils.renderIntoDocument(
<YourComponent />
);
call
TestUtils.renderIntoDocument(
<Wrapper />
);
Doing this ensures that your component is a composite component and isn't a stateless function.
Hope this helps anyone else in the future!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With