shallow .setState bug from v3.4.2 occurs in v3.6.0 when render return an array

[almeida-samuel]

The Component

import React from 'react';
class DankComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {dankField: true}
    this.toogleDankField = this.toogleDankField.bind(this);
  }

  toogleDankField() {
    this.setState({dankField: !this.state.dankField})
  }

  render() {
    return [
      <button onClick={this.toogleDankField}>Dank Button</button>,
      <NotDankComponent dankField={this.state.dankField}/>
    ];
  }
}

The Test

import React from 'react';
import { shallow } from 'enzyme';
import DankComponent from 'components/DankComponent';

describe('<DankComponent />', () => {
  let wrapper;
  let props = {};

  const mountComponent = (props = {}) => {
    wrapper = shallow(<DankComponent {...props} />);
  };

  describe('at initial mount', () => {
    beforeEach(() => {
      mountContainer(props);
    });

    describe('when button is clicked', () => {
      it('change state value of dankField to true', () => {
        const button = wrapper.at(0).at(0);
        button.simulate('click')
        expect(wrapper).toMatchSnapshot();
      });
    })
  });
});

The Error

 Method “setState” is only meant to be run on a single node. 2 found instead.
 toogleDankField() {
  this.setState({dankField: !this.state.dankField})
        ^
 }

Expected behavior
The test should pass.

Desktop (please complete the following information):

• "enzyme": "3.6.0"
• "enzyme-adapter-react-16": "1.5.0"
• "react": "16.5.2"
• "jest": "20.0.4"

[almeida-samuel]

The error vanishes if we wrap the array content returned by render in a <div> or any other component.

[ljharb]

enzyme does not yet support components rendering non-nodes (arrays and strings). See #1149.

In the meantime, wrap it in a React.Fragment / <>.