Is componentDidMount supposed to run with shallow rendering in Enzyme?

javascript reactjs unit-testing enzyme
Dimitris Karagiannis picture Dimitris Karagiannis · Nov 15, 2017 · Viewed 11.2k times · Source

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

Answer

Martin Dawson picture Martin Dawson · Nov 16, 2017

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 :(.

Related questions

Figuring out how to mock the window size changing for a react component test

So basically when the component mounts, I have an event listener listen for resize events. It toggles the isMobileView state and then passes it into the children as a prop. So it's imperative that this works and is tested. I'm …

Read More
Check if child component rendered - Jest, Enzyme

In my unit test, I want to test whether the parent component is successfully rendering its child component. Here is the code: describe('Parent Component', () => { it('renders Child component', () => { const wrapper = shallow(<Parent store={store} />); expect(…

Read More
Unit testing React click outside component

Using the code from this answer to solve clicking outside of a component: componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventListener('mousedown', this.handleClickOutside); } setWrapperRef(node) { this.wrapperRef = node; } handleClickOutside(event) { if (this.wrapperRef && !this.wrapperRef.contains(…

Read More