Enzyme: Document how to test for null/false

[silvenon]

I would like to add to the docs a good way to test for null, but I'm not sure which one is it.

This is the component:

import React, { PropTypes } from 'react';

const Component = (props) => {
  return props.returnNull ? null : <div />;
};

Component.propTypes = {
  returnNull: PropTypes.bool
};

export default Component;

I want to test if setting the flag to true will return null:

import React from 'react';
import { shallow } from 'reagent';
import { expect } from 'chai';
import Component from './Component';

describe('<Component />', () => {
  it('returns null if the flag is on', () => {
    const wrapper = shallow(
      <Component returnNull={true} />
    );
    expect(wrapper.text()).to.equal('');
  });
});

What is the correct way to do it? Would it perhaps be better if wrapper.type() returned null instead of throwing?

[lelandrichardson]

@silvenon good question.

I think I like changing wrapper.type() to return null.

At the moment, you could just check whether or not wrapper.get(0) is falsy or not

[silvenon]

Thanks, I'll use that workaround in the meantime. I can send a PR if you guys decide you want that approach.

[ewendel]

I would love this as well!
Can it be that enzyme doesn't like components returning arrays of elements? I am getting the same error.

[ljharb]

@ewendel doesn't a react component typically always return a single root element? i feel like React throws an invariant violation if not.

[ewendel]

No. You can return null or an empty string (perhaps also an empty array), and something in React will replace this with a <noscript>-tag before it hits the real DOM.

This is essential in components that handle conditional rendering - its a pity that enzyme apparently doesn't support this.

[ljharb]

@ewendel right, i mean that either it returns "nothing" - which could be null, or an empty string, or undefined, possibly a few others - or a single component. React.render([], document.body) in 0.13 throws an invariant violation for me, as does React.render([React.createElement('div')], document.body), whereas React.render(React.createElement('div'), document.body) works. Am I missing something about "components returning arrays of elements"?

[ewendel]

You are absolutely correct, I don't know what I was talking about. I have an <If>-component that will return null if a certain prop is falsy, which gives the error.

[Villanuevand]

Thanks, @lelandrichardson your answers works for me.

[fauna5]

rendered.getNode() seems syntactically nicer and returns null

[dupski]

Also wrapper.html() comes out as null too

[trevordmiller]

For me, wrapper.html() returns "<div><!-- react-empty: 2 --></div>" - depends on which version of React you are using. I think the initial suggested expect(wrapper.text()).toBe('') is the best way to do this without tying yourself to a React implementation.

[dignite]

When using getNode(), a warning says to use getElement() instead.

[camjc]

Can you not also do
expect(wrapper.equals(null)).toBe(true);
?
Whats the cost/benefit of this over getNode?

[doque]

wrapper.get(0).toBeNull() works for us.

[briandipalma]

When using getNode(), a warning says to use getElement() instead.

Yep, Rich @fauna5 was using the old API, it's now

wrapper.getElement()

// In Jest
expect(wrapper.getElement()).toBe(null);

Which as mentioned is semantically clear.

[jeserkin]

For some reason in my case, when I match snapshot I see, that it renders null, but when I test with any suggested method for null, I get e.g. <inject-..... /> as wrapper.getElement()

[ljharb]

Since enzyme has no support for snapshots, I’m not sure what might be doing that. Maybe something in your Babel config?

[jeserkin]

Sorry. Was my mistake. The underlying problem did come from mocked mobx store. Did it wrong way and content was partially rendered. Changed the way it was mocked and all was fine.
Thank you.

[ahuggins]

In case this helps anyone else. I ended up doing this:

const wrap = mount(
    <SomeComponent
       someProp={whateverNeedsToBePassedThatWillCauseNullReturn} />
);

expect(wrap.html() === null).to.be.true;

Or if this is a bad idea, then let me know.

[ljharb]

@ahuggins I'd suggest not using .html(), if possible - enzyme now has an isEmptyRender method that would be better.