question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

3.4.3 breaks tests with "ShallowWrapper::setState() can only be called on root"

See original GitHub issue

Describe the bug Not sure why, but the 3.4.3 release broke my tests. I receive Error: ShallowWrapper::setState() can only be called on the root errors all over the place. Seems to be related to #1756.

The relevant test is attached. I was able to figure out that componentDidMount is called twice with the 3.4.3 release, which was not the case before.

To Reproduce

  it('<MyComponent />', async () => {
    fetch.mockResponse(JSON.stringify(jsonData));
    const wrapper = shallow(<MyComponent />, { disableLifecycleMethods: true });
    await wrapper.instance().componentDidMount();
    wrapper.update();
    expect(fetch.mock.calls.length).toEqual(1);
    expect(wrapper.find(Table).length).toEqual(1);
  });

The second call to componentDidMount has the following stack trace:

  console.error console.js:253
        at MyComponent.componentDidMount (/src/components/MyComponent.jsx:42:13)
        at /node_modules/enzyme/build/ShallowWrapper.js:204:20
        at Object.batchedUpdates (/node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:342:22)
        at new ShallowWrapper (/node_modules/enzyme/build/ShallowWrapper.js:203:24)
        at ShallowWrapper.wrap (/node_modules/enzyme/build/ShallowWrapper.js:1763:16)
        at ShallowWrapper.find (/node_modules/enzyme/build/ShallowWrapper.js:815:21)
        at ShallowWrapper.exists (/node_modules/enzyme/build/ShallowWrapper.js:1711:52)
        at Object._callee$ (/src/components/tests/MyComponent.spec.jsx:38:20)
        at tryCatch (/node_modules/regenerator-runtime/runtime.js:62:40)
        at Generator.invoke [as _invoke] (/node_modules/regenerator-runtime/runtime.js:296:22)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
koba04commented, Aug 17, 2018

This will be fixed by #1768

2reactions
monkencommented, Aug 17, 2018
import React, { Fragment, Component } from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';

class Table extends Component {
  render() {
    return (<table />);
  }
}

class MyComponent extends Component {

  state = {
    showTable: false,
  }

  componentDidMount() {
    this.setState({ showTable: true });
  }

  render() {
    const { showTable } = this.state;
    return (<Fragment>{showTable ? <Table /> : null}</Fragment>);
  }
}


describe('<MyContainer />', () => {
  it('should call `componentDidUpdate` when component’s `setState` is called', () => {
    const wrapper = shallow(<MyComponent />, { disableLifecycleMethods: true });
    expect(wrapper.find(Table).length).toEqual(0);
    wrapper.instance().componentDidMount();
    wrapper.update();
    expect(wrapper.find(Table).length).toEqual(1);
  });
});

Output:

 FAIL  src/components/tests/foo.spec.jsx
  <MyContainer />
    ✕ should call `componentDidUpdate` when component’s `setState` is called (11ms)

  ● <MyContainer /> › should call `componentDidUpdate` when component’s `setState` is called

    ShallowWrapper::setState() can only be called on the root
Read more comments on GitHub >

github_iconTop Results From Across the Web

3.4.3 breaks tests with "ShallowWrapper::setState() can only ...
3 release broke my tests. I receive Error: ShallowWrapper::setState() can only be called on the root errors all over the place. Seems to...
Read more >
ShallowWrapper::setState() can only be called on class ...
A HOC should either expose original component that will be available, e.g. WrappedComponent property. ... This way it can be tested like:
Read more >
enzyme | Yarn - Package Manager
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, ......
Read more >
How to Test React Components: the Complete Guide
Let's start with a basic React Hooks component and test the state and props. const App = () => { const [state, setState]...
Read more >
The Complete Beginner's Guide to Testing React Apps
false-positive: the test passes even if the code is broken. ... ShallowWrapper::state() can only be called on class components.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found