The only React.js component test you'll ever need (Enzyme + Chai)

my-component.spec.js

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../src/my-component';

const wrapper = shallow(<MyComponent/>);

describe('(Component) MyComponent', () => {
  it('renders without exploding', () => {
    expect(wrapper).to.have.length(1);
  });
});

I like to write renders with minimum props without exploding tests too, which test if the prop type documentation is up to date and the component really renders with just isRequired props.

Yaaaas! Before Enzyme & shallow render, this could be quite challenging to setup, but has always provided the best time-invested vs bugs-caught balance.

also it's good to know if it renders w/o crashes in the real browser env and with browser/lifecycle events fired. This is why it's useful to render it, for example, in jsdom (for auto tests) and other environments by dispatching actions in some order (could be recorded and saved).

@amannn Great suggestion (renders with minimum props without exploding). Do you have a quick example of how to do this?

@amannn also interested in an example

@thevangelist

Good sanity-check/smoke test

Just wanted to let everyone know that the Chai length method has been deprecated in favor of lengthOf, http://chaijs.com/api/bdd/#method_length

So, the test would look like this:

     expect(wrapper).to.have.lengthOf(1);

@vjwilson

Good to know. Thanks!

For some reason mocha is not resolving my base path, i.e: my important main component has other components imported using import statements & my app structure , i get the error that cannot find module 'component:

- app    
   components
     componentA
     componentB
     index.js(exports all components)    
   containers
     containerA
     containerB
     index.js(exports all containers)   
   test
     sometest.test.js
   index.js                                               
 -someTest.test.js

@jefffriesen @rublev I believe he's just referring to rendering with Props and ensuring that doesn't blow up. We use this as a basis: https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/props.md

Is this still useful now that create-react-app let's you know when ever one of your components won't render or am I missing something?

@chiedo not everyone uses create-react-app so yes, super useful still

What is the meaning / understanding of the length property of a react component?
This line puzzles me:

expect(wrapper).to.have.length(1);

I have tested this code and it fails if an exception is thrown.
If nothing is rendered, the test still passes.

Could someone enlighten me?

@michel-weber I'm assuming this is Chai syntax. (http://chaijs.com/api/bdd/)

@michel-weber (and others ending up here) the wrapper returned by shallow is not an instance of a React component.
It is an array-like object (having a length property).

It is the same as what you get back from wrapper.find('...something...'). Which is an array of items that match your selector.
With the result of shallow this is generally only one component. But one or more doesn't matter in this case. What matters is that it isn't zero, as that lets you know rendering failed.

Also, without chai, you'd write assert(wrapper.length === 1);.

For those of us using Jest, you would check the length with expect(wrapper).toHaveLength(1)

@chiedo Does it do that? I'm not seeing where this happens.

For those in 2018 using create-react-app: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#testing-components

tl;dr; use:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});