[Fix] shallow: .parents: ensure that one .find call does not affect another

[ljharb]

Fixes #1780.

These tests are failing; anyone who can help by posting a link to their branch would be very appreciated.

[jgzuke]

@ljharb I believe this should this be const aChildParents = aChild.parents('.a');? (which fixes this test)

[ljharb]

thanks, i'll fix that

[jgzuke]

It looks like this issue is coming from the changes in #1499, the state is changing when getNodeInternal calls update. If we remove the update calls from getNode(s)Internal these tests pass.

The test can be reduced to

it.only('works when calling parents after getNodesInternal', () => {
  class Test extends React.Component {
    render() {
      return (
        <div>
          <div className="a">
            <div>A child</div>
          </div>
        </div>
      );
    }
  }

  const wrapper = shallow(<Test />);

  const aChild = wrapper.find({ children: 'A child' });
  expect(aChild.debug()).to.equal(`<div>
A child
</div>`);
  expect(aChild).to.have.lengthOf(1);

  // Fails when uncommented
  // wrapper.update();

  const aChildParents = aChild.parents('.a');
  expect(aChildParents.debug(`<div className="a">
<div>A child</div>
</div>`));
  expect(aChildParents).to.have.lengthOf(1);
});

[jgzuke]

@ljharb when update gets called we get a new (but identical) root tree. The problem is when we call parents and go to get the pathToNode from our node to its root, the this[ROOT] references a different tree than this[NODES] (this[NODES] references the old tree) so we never find a match and always return null from pathToNode.

To illustrate

class Test extends React.Component {
  render() {
    return (
      <div>
        <div className="a">
          <div>A child</div>
        </div>
      </div>
    );
  }
}

const wrapper = shallow(<Test />);

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

const oldNode = aChild[NODES];
const oldRoot = aChild.root()[NODES];

wrapper.update();

const newNode = aChild[NODES];
const newRoot = aChild.root()[NODES];

console.log(oldNode === newNode); // true
console.log(oldRoot === newRoot); // false

Im not really sure what the correct fix is here. Im also not sure why we are updating on all getNode(s)Internal calls. But it seems like given that the a nodes parent can always be updated, we need some way to keep our non root [NODES] references up to date?

Im also not sure whether this affects anything else besides the pathToNode, it seems like any time we save a reference to the non root node this could come up

[ljharb]

I think you're exactly right, and it's the reason I had to do the weird hierarchy stuff for simulateError's componentStack.

I think that wrapper.update() should update the non-root NODES list as well, such that === holds.

[jgzuke]

@ljharb 👍 I will try to make that change