So I have a component that I import to do some testing with Jest.
class MyComponent extends Component {
render() {
return (
<div>
<OtherComponent />
</div>
);
}
}
export { MyComponent };
where the other component is defined as:
class OtherComponent extends Component { ... }
export default connect(...)(OtherComponent);
My test is as follows:
import React from 'react';
import { shallow } from 'enzyme';
import { MyComponent } from '../../components/MyComponent';
// ...
Just the fact that inside MyComponent there is OtherComponent, that is connected to Redux using connect makes the import above in the test file fail:
Invariant Violation: _registerComponent(...): Target container is not a DOM element.
at invariant (node_modules/fbjs/lib/invariant.js:44:15)
at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:311:76)
at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
at Object.<anonymous> (my-app-directory/index.js:30:46)
at Object.<anonymous> (my-app-directory/components/OtherComponent.js:x:xx)
at Object.<anonymous> (my-app-directory/components/MyComponent.js:x:xx)
at Object.<anonymous> (my-app-directory/test/components/MyComponent.test.js:x:xx)
at handle (node_modules/worker-farm/lib/child/index.js:41:8)
at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
at emitTwo (events.js:106:13)
at process.emit (events.js:191:7)
at process.nextTick (internal/child_process.js:744:12)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
So how can I test my component if the nested component is connected to Redux? O_O'
Aucun commentaire:
Enregistrer un commentaire