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.

[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.