Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.0.0-beta.0] Cannot assert descendant not present #207

Open
ZebraFlesh opened this issue Nov 19, 2017 · 2 comments
Open

[1.0.0-beta.0] Cannot assert descendant not present #207

ZebraFlesh opened this issue Nov 19, 2017 · 2 comments

Comments

@ZebraFlesh
Copy link

Given this component and the following tests:

 const Test = ({ className, shouldDisplay }) => shouldDisplay ? <div className={className}></div> : null;
const thing = mount(<Test className="foo" shouldDisplay={true} />);
expect(thing).to.have.descendants('.foo');

const thing2 = mount(<Test className="foo" shouldDisplay={false} />);
expect(thing2).to.not.have.descendants('.foo');

The not descendants test on thing2 fails with the message: AssertionError: expected <Test /> not to have descendants '.foo' HTML: Not available due to: Cannot read property 'outerHTML' of null

Switching the last expectation to the following:
expect(thing2.find('.foo')).to.not.exist;

it still fails with the same error: AssertionError: expected the node in <Test /> not to exist HTML: Not available due to: Cannot read property 'outerHTML' of null

This is with enzyme 3.2.0 and react 15.4.2. With enzyme 2.x and the pre-1.0 releases, these tests worked just fine.

@deployable
Copy link

deployable commented Feb 8, 2018

I think I ran into the same enzyme issue here: enzymejs/enzyme#1519

Both the Test component and the div are being picked up by the class selector as they are both in enzymes dom representation when using mount. The same can happen for #id selectors.

This results in code like this:

expect( wrapper.find('.foo').hostNodes().length ).to.equal(0)

or use a more complete selector

expect(thing2).to.not.have.descendants('div.foo');

@deployable
Copy link

It might be useful if chai-enzyme included a .htmlDescendants() or something similar to remove the React components from results. Possibly .reactDescendants() as well if you wanted the opposite, but I believe the opposite of hostNodes() would need to be added to enzyme for that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants