Enzyme: Shallow(<SomeComponent />).is(SomeComponent) returns false

[hesher]

Basically, this fails:

it('should be true', () => {
  const SomeComponent = () => (<div></div>);
  expect(shallow(<SomeComponent />).is(SomeComponent)).to.be.true;
});

while this works:

  // require('jsdom')...
  it('should be true', () => {
    const SomeComponent = () => (<div></div>);
    expect(mount(<SomeComponent />).is(SomeComponent)).to.be.true;
  });

Am I wrong to assume the first one should work too?

[koba04]

This seems like a duplicate of #506.

[hesher]

Looks like the underline reason for this problem is the same as #506 but it manifests differently.

[ljharb]

@hesher the mounted component isn't a SomeComponent. it's a div.

The strange part imo is that the mount test passes.

[koba04]

enzyme doesn't have a test case for mounting a Composite Component.

• https://github.com/airbnb/enzyme/blob/master/test/ReactWrapper-spec.jsx#L1431-L1463
• https://github.com/airbnb/enzyme/blob/master/test/ShallowWrapper-spec.jsx#L1235-L1266

if I put the following test, the test is failed only in mount.

    it('should handle Composite Components', () => {
      const Hello = () => <div>foo</div>;
      const wrapper = mount(<Hello />);
      // const wrapper = shallow(<Hello />);
      expect(wrapper.is('div')).to.equal(true);
    });

Should we fixed it?

[aweary]

@ljharb I think we can fix this in mount by checking if the root node is a composite and passing the results of childrenOfInst to the predicate instead of the node itself.

[ljharb]

@aweary that seems reasonable.

[hanumanthan]

I would like to work on this issue if no one has picked up.

This will be my first contribution to enzyme. Please guide me on this. Thanks

[ljharb]

@hanumanthan Please do! I'm not sure what guidance you need.

[laumair]

@ljharb @hanumanthan Is anybody working on this?

[ljharb]

Not that I'm aware of; please feel free to submit a PR!

[laumair]

@ljharb All right thanks. On it.

[laumair]

@ljharb childrenOfInst returns an empty array with this:

  is(selector) {
    const predicate = buildInstPredicate(selector);
    const cb = n => (typeof typeOfNode(getNode(n)) === 'function' ? predicate(childrenOfInst(getNode(n))) : predicate(n));
    return this.single('is', cb);
  }

it.only('should handle Composite Components', () => {
      const Hello = () => <div>foo</div>;
      const wrapper = mount(<Hello />);
      expect(wrapper.is('div')).to.equal(true);
    });

Or am I missing something? Thanks.

[ljharb]

I'd expect that test to pass; I'm not sure what you're asking otherwise.

[laumair]

@ljharb Yeah I get the idea. I am actually following on @aweary suggestion by passing result of childrenOfInst to predicate but its returning an empty array.

 is(selector) {
    const predicate = buildInstPredicate(selector);
    const cb = n => (typeof typeOfNode(getNode(n)) === 'function' ? predicate(childrenOfInst(getNode(n))) : predicate(n));
    return this.single('is', cb);
  }