False positives with .to.exist

[AlexEscalante]

I am using Mocha, Enzyme and Chai, and I am getting false positives on tests like these:

import React from 'react';
import {shallow} from 'enzyme';
import {expect} from 'chai';

it('renders a barcode', () => {
  const wrapper = shallow(<ReceiptPage {...props} />);

  expect(wrapper.find('bogus')).to.exist;
});

That test should not pass and it does. I should be doing something wrong, but I can't figure out what… Any ideas?

[lucasfcosta]

Hi @AlexEscalante, thanks for your issue! 😄
Can you give me some more details about this? I'd like to know what does wrapper.find('bogus') returns, is it really undefined or is it null?
As you can see here the code for our exist assertion is really simple, I can't really think of why this is happening.

I noticed that we're using != here. It works, but perhaps writing <whatever> !== undefined && <whatever> !== null would be more explicit and it would also meet most of JS code recommendations.

EDIT:
I also noticed we need more tests for that and we also need to put that assertion on the assert interface.
I have a PR almost done for that, I'll be submiting it by today's night :)

[keithamus]

AFAICT this is because ShallowWrapper#find returns a new wrapper object, so that you can chain those kinds of commands. A Wrapper "exists" and so the assertion is failing because Wrapper !== null && Wrapper !== undefined.

I would recommend, @AlexEscalante, using something like chai-enzyme - which overrides .to.exist to detect for Enzyme Wrapper objects, and so would return correctly. Alternatively, you could reword your assertion to something like expect(wrapper.find('bogus')).to.have.lengthOf(0);.

Hopefully this helps. I'll close the issue for now but let us know if you have any more problems with it.

[AlexEscalante]

I tried using chai-enzyme but had no luck:

import chai, {expect} from 'chai';
import chaiEnzyme from 'chai-enzyme';

chai.use(chaiEnzyme());

With that setup, every time I get a wrapper:

const wrapper = shallow(<ReceiptPage {...props} />);

... I get an error:

 TypeError: (0 , _enzyme2.default) is not a function

These are the versions I am using:

"chai": "3.5.0",
"chai-enzyme": "0.5.1",
"enzyme": "2.2.0",
"cheerio": "0.20.0",
"react": "15.0.2"

I didn't find any reference to this issue, neither here nor in the chai-enzyme project which is strange, isn't? What would you suggest?

I am aware I could use the .to.have.lengthOf() syntax, but I find the to.exist or to.be.present syntax semantically superior…