Simon Tegg simontegg

Idiomatic React Testing Patterns

Testing React components seems simple at first. Then you need to test something that isn't a pure interaction and things seem to break down. These 4 patterns should help you write readable, flexible tests for the type of component you are testing.

Setup

I recommend doing all setup in the most functional way possible. If you can avoid it, don't set variables in a beforeEach. This will help ensure tests are isolated and make things a bit easier to reason about. I use a pattern that gives great defaults for each test example but allows every example to override props when needed:

	/*
	Make the function more readable and maintainable
	*/

	function doStuff(text) {
	const lowerCased = text.toLocaleLowerCase();
	const words = lowerCased.split(' ');
	words.reverse();

	const trimmedWords = [];

	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);
	});

	function termFreqMap(str) {
	var words = str.split(' ');
	var termFreq = {};
	words.forEach(function(w) {
	termFreq[w] = (termFreq[w] \|\| 0) + 1;
	});
	return termFreq;
	}

	function addKeysToDict(map, dict) {