TypeError: Cannot read property 'reverse' of null

[vladkosinov]

Thank you very much for this library! ❤️

I'm trying to test a library which provides some Higher-order Component, but I get a weird bug.

Example:

Enhancer:

function enhance(ComposedComponent) {
    class Enhancer extends Component {
        render() {
            const newProps = Object.assign({}, this.props, {
                someAdditionalProp: true    
            });
            return createElement(WrappedComponent, newProps);
        }
    }

    return Enhancer;
}

Component to enchace:

class Foo extends Component {
    render() {
        return (<div>Bla bla</div>);
    }
}
const FooEnhanced = enhance(Foo);

Main component:

class App extends React.Component {
    render() {
        return (
            <div>
                <FooEnhanced />
            </div>
        );
    }
}

I want to ensure that the Enhancer adds additional prop 'someAdditionalProp' to composed components, so I'm doing the following:

const wrapper = mount(<App />);
const enhancedComponents = wrapper
    .find(App)
    .children()
    .findWhere(n => typeof n.type() !== 'string')
    .findWhere(n => n.parent().is(FooEnhanced));

enhancedComponents.forEach(node => {
    expect(node.prop('someAdditionalProp')).to.be.a('boolean');
});

And get error message:

/Users/vladkosinov/projects/test/node_modules/enzyme/build/MountedTraversal.js:199
  return pathToNode(inst, root).reverse();
                               ^

TypeError: Cannot read property 'reverse' of null
    at parentsOfInst (/Users/vladkosinov/projects/test/node_modules/enzyme/build/MountedTraversal.js:199:32)
    at ReactWrapper.<anonymous> (/Users/vladkosinov/projects/test/node_modules/enzyme/build/ReactWrapper.js:841:54)
    at ReactWrapper.single (/Users/vladkosinov/projects/test/node_modules/enzyme/build/ReactWrapper.js:1297:19)
    at ReactWrapper.parents (/Users/vladkosinov/projects/test/node_modules/enzyme/build/ReactWrapper.js:840:41)
    at ReactWrapper.<anonymous> (/Users/vladkosinov/projects/test/node_modules/enzyme/build/ReactWrapper.js:860:21)
    at /Users/vladkosinov/projects/test/node_modules/enzyme/build/ReactWrapper.js:1166:21
    at Array.map (native)
    at ReactWrap%

Essentially, the error occurs when we attempt to call the parent method on ReactWrapper around Foo:

const wrapper = mount(<App />);
const foo = wrapper.find(Foo).parent()

Any ideas on how to solve this problem? 😊

[aweary]

Hey @vlkosinov thanks so much for the issue report. This does indeed seem to be a bug in enzyme. I was able to create a simple repro case you can see here:

https://github.com/Aweary/enzyme-test-repo/blob/issue-410/test.js

class App extends React.Component {
  render() {
    return (
      <div>Hello, world</div>
    );
  }
}

describe('Repro case for issue #401', () => {
  it('shouldnt throw when calling parent() in findWhere()', () => {
    const wrapper = mount(<App/>);
    wrapper.findWhere(n => n.parent())
  });

The issue appears to be calling parent on a node returned from findWhere. I'll take a look at this today.

[aweary]

I think either pathToNode is returning null when it shouldn't or parent should have a null check. @lelandrichardson what do you think?

[jguillen1984]

Just a heads up this issue still persists, I just ran into this issue myself on "enzyme": "2.4.1"

[just-boris]

Currently, I could reproduce the problem with simplest code example: see #769.

Also, I tried to fix it but didn't succeed, because there is something wrong with MountedTraversal.childrenOfInst function, but is seemed to me very hard to fix it, without breaking a lot of user calls for this function.

[nbkhope]

I just ran into this problem. Does anybody know a good solution?

[yashnerella]

Did anyone get a solution for this? Is there any temporary workaround?

[ljharb]

The tests are in #769; I'm not aware of a fix yet.

[yashnerella]

Thanks, I will check it out

[fisx]

Is this related to #534? (Not sure, but even if it's clearly not, it may be worth pointing that out.)

[aliwoodman]

👍

[ljharb]

@vlkosinov is this still an issue in enzyme 3?

[timrsmith]

@ljharb It appears to be. I'm seeing it in 3.2.0, e.g. with something like:

const wrapper = mount(<Account />),
      mobileParent = wrapper.find({role: 'input', name: 'mobile'}).parent()

[nbkhope]

Is this somehow related to gettting the parent() of a parent()?

Previously my enzyme v2 tests succeeded, but now in v3 doing:

shallowWrapper.find('SomeComponent').parent().parent()

gives out the error:

TypeError: Cannot read property 'reverse' of null

      at parentsOfNode (node_modules/enzyme/build/RSTTraversal.js:134:32)
      at ShallowWrapper.<anonymous> (node_modules/enzyme/build/ShallowWrapper.js:1087:50)
      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1620:25)
      at ShallowWrapper.parents (node_modules/enzyme/build/ShallowWrapper.js:1086:41)
      at ShallowWrapper.<anonymous> (node_modules/enzyme/build/ShallowWrapper.js:1106:21)
      at node_modules/enzyme/build/ShallowWrapper.js:1468:21
      at Array.map (native)
      at ShallowWrapper.flatMap (node_modules/enzyme/build/ShallowWrapper.js:1467:45)
      at ShallowWrapper.parent (node_modules/enzyme/build/ShallowWrapper.js:1105:21)
      at Object.<anonymous> (someTestFile.test.js:462:60)
      at process._tickCallback (internal/process/next_tick.js:109:7)

[positonic]

For me the easiest work around is to select the parent, and find() within that, rather than going to the node and looking for the parent.