Enzyme: parents: cannot read property 'reverse' of null

Created on 21 Aug 2018  路  3Comments  路  Source: enzymejs/enzyme

Describe the bug
Calling parents sequentially on two different sibling nodes breaks. I'm on:

  • enzyme 3.4.4
  • enzyme-adapter-react-16 1.2.0
TypeError: Cannot read property 'reverse' of null
    at parentsOfNode (http://localhost:9876/base/frontend/react-specs.js:41255:32)
    at ShallowWrapper.<anonymous> (http://localhost:9876/base/frontend/react-specs.js:62256:50)
    at ShallowWrapper.single (http://localhost:9876/base/frontend/react-specs.js:62811:25)
    at ShallowWrapper.parents (http://localhost:9876/base/frontend/react-specs.js:62255:41)
    at UserContext.<anonymous> (http://localhost:9876/base/frontend/react-specs.js:248367:18)
    at attempt (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4289:46)
    at QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4217:20)
    at QueueRunner.execute (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4199:10)
    at Spec.queueRunnerFactory (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:909:35)
    at Spec.execute (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:526:10)

To Reproduce
The following test will reproduce the issue:

it('breaks', () => {
  class Test extends React.Component {
    render() {
      return (
        <div>
          <div className="a">
            <div>A child</div>
          </div>
          <div className="b">
            <div>B child</div>
          </div>
        </div>
      );
    }
  }

  const wrapper = shallow(<Test />);

  const aChild = wrapper.find({ children: 'A child' });
  const bChild = wrapper.find({ children: 'B child' });

  aChild.parents({ className: 'a' });
  bChild.parents({ className: 'b' });
});

Expected behavior
It should not throw an error.

Desktop (please complete the following information):

  • OS: macOS 10.13.6
  • Browser Chrome
  • Version 68.0.3440.106 (Official Build) (64-bit)

Additional context
In the above example, changing the order of accessing parents works:

const aChild = wrapper.find({ children: 'A child' });
aChild.parents({ className: 'a' });

const bChild = wrapper.find({ children: 'B child' });
bChild.parents({ className: 'b' });
shallow bug help wanted

Most helpful comment

Your test case was very helpful; there's something very worrying going on here.

I've put up #1781 to track a fix.

All 3 comments

Related to #410; thanks for the report.

Your test case was very helpful; there's something very worrying going on here.

I've put up #1781 to track a fix.

Thanks for digging into it! @juanca and I may look into your PR, as well, and see if we can help

Was this page helpful?
0 / 5 - 0 ratings