Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The only React.js component test you'll ever need (Enzyme + Chai)
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);
});
});
@amannn

This comment has been minimized.

Copy link

amannn commented Aug 5, 2016

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.

@mars

This comment has been minimized.

Copy link

mars commented Aug 7, 2016

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

@fckt

This comment has been minimized.

Copy link

fckt commented Aug 7, 2016

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

@jefffriesen

This comment has been minimized.

Copy link

jefffriesen commented Sep 5, 2016

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

@rublev

This comment has been minimized.

Copy link

rublev commented Sep 9, 2016

@amannn also interested in an example

@vjwilson

This comment has been minimized.

Copy link

vjwilson commented Oct 2, 2016

@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);
@bryantee

This comment has been minimized.

Copy link

bryantee commented Jan 31, 2017

@vjwilson

Good to know. Thanks!

@jasan-s

This comment has been minimized.

Copy link

jasan-s commented Feb 27, 2017

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
@MatthewEdge

This comment has been minimized.

Copy link

MatthewEdge commented Mar 1, 2017

@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

@chiedo

This comment has been minimized.

Copy link

chiedo commented Apr 27, 2017

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?

@gretzky

This comment has been minimized.

Copy link

gretzky commented Aug 13, 2017

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

@michel-weber

This comment has been minimized.

Copy link

michel-weber commented Oct 5, 2017

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?

@theploki

This comment has been minimized.

Copy link

theploki commented Oct 11, 2017

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

@smhg

This comment has been minimized.

Copy link

smhg commented Mar 11, 2018

@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);.

@kristremblay

This comment has been minimized.

Copy link

kristremblay commented Apr 8, 2018

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

@jacobweber

This comment has been minimized.

Copy link

jacobweber commented Jun 19, 2018

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

@yagudaev

This comment has been minimized.

Copy link

yagudaev commented Aug 8, 2018

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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.