Menu
From my understanding and from what I have read so far in various answers, not all lifecycle methods are supposed to be run with shallow rendering. Especially componentDidMount
However, I notice that when I do
beforeEach(function () {
fakeComponentDidMount = sinon.stub(Component.prototype, 'componentDidMount');
fakeComponentDidMount.callsFake(function () {});
wrapper = shallow(<Component {...props} />);
});
afterEach(function () {
fakeComponentDidMount.restore();
});
it('calls componentDidMount', function () {
expect(fakeComponentDidMount.called).to.equal(true);
});
the test passes.
So, am I doing something wrong here or have I understood something wrong?
For reference
302
As of Enzyme v3, the shallow API does call React lifecycle methods such as componentDidMount and componentDidUpdate . You can read more about this in the version 3 migration guide.
Shallow rendering lets you render a component “one level deep” and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.
The difference between shallow() and mount() is that shallow() tests components in isolation from the child components they render while mount()goes deeper and tests a component's children.
Shallow tests might be good quick win practice optimizing tests. Isolation. It's quite common to add a new dependency to a resuable directive or component. It tends to break other tests because something is missing in dependency injection tree.
Shallow Rendering API. Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components. As of Enzyme v3, the shallow API does call React lifecycle methods such as componentDidMount and componentDidUpdate.
shallow (<Component />) for Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components.
The only way to test componentDidMount and componentDidUpdate. Full rendering including child components. Requires a DOM (jsdom, domino). More constly in execution time. If react is included before JSDOM, it can require some tricks: only calls render but renders all children.
So yes, the componentDidMount does get called using the shallow. Sorry, something went wrong. and then when i am trying to spy the same func1 () in the immediate test case-4, it is throwing the error that you cannot wrap the already wrapped function ..
Yes it is in enzyme 3.0.
https://github.com/airbnb/enzyme/blob/master/CHANGELOG.md#300
LifeCycleExperimental which was previously an option that you had to manually set to true on shallow is now enabled by default because it is now stable.
This is much nicer than having to resort to mount when wanting to test lifecycles.
There is absolutely no excuse to not use shallow for unit tests now :)... Well apart from when you need to test refs :(.
136
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
