Unit Testing React Component with Jest and Enzyme (Without Snapshot Test)

Samuel Hutama
Dec 24, 2018 · 4 min read

Prerequisites

Our unit tests will NOT use Snapshot Test

Enzyme Shallow Test and Deep Test

import {
configure,
shallow,
mount,
ShallowWrapper,
ReactWrapper
} from 'enzyme';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as Adapter from 'enzyme-adapter-react-16';
import { SomeComponent } from './someComponent';
describe('react unit tests', () => {
configure({
adapter: new Adapter()
});
describe('shallow tests', () => {
let shallowWrapper: ShallowWrapper;
beforeEach(() => {
shallowWrapper = shallow(<SomeComponent />);
});
});
describe('full DOM tests', () => {
let reactWrapper: ReactWrapper;
beforeEach(() => {
reactWrapper = mount(<SomeComponent />);
});
});
});

Enzyme’s Shallow

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ChildComponent } from './childComponent';
interface ISomeComponentProps { }export class SomeComponent extends
React.Component<ISomeComponentProps> {
render(): JSX.Element {
return (
<div>
<h1>Some Title</h1>
<p>First Paragraph</p>
<p className="random-class">
Second Paragraph with a class
</p>
<p id="randomId">Second Paragraph with an id</p>
<ChildComponent />
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
interface IChildComponentProps { }export class ChildComponent extends
React.Component<IChildComponentProps> {
render(): JSX.Element {
return (
<div>
<p id="childId">Child component content</p>
</div>
);
}
}
beforeEach(() => {
shallowWrapper = shallow(<SomeComponent />);
});
it('able to find an html element', () => {
expect(shallowWrapper.find('h1').html()).toContain('Some Title');
expect(shallowWrapper.find('p').length).toBe(3);
});
it('able to find an html element by class', () => {
expect(shallowWrapper.find('.random-class').html())
.toContain('Second Paragraph with a class');
});
it('able to find an html element by id', () => {
expect(shallowWrapper.find('#randomId').html())
.toContain('Second Paragraph with an id');
});
import { SomeComponent } from './someComponent';
import { ChildComponent } from './childComponent';
// ....it('able to find a React Component', () => {
expect(shallowWrapper.find(ChildComponent).length).toBe(1);
expect(shallowWrapper.find('#childId').exists())
.toBeFalsy();
});

Enzyme’s Mount

describe('full DOM tests', () => {
let reactWrapper: ReactWrapper;
beforeEach(() => {
reactWrapper = mount(<SomeComponent />);
});
it('Child React Component html content would be rendered', () => {
expect(reactWrapper.find(ChildComponent).length).toBe(1);
expect(reactWrapper.find('p').length).toBe(4);
expect(reactWrapper.find('#childId').html())
.toContain('Child component content');
});
});

Conclusion

Samuel Hutama

Written by

Samuel is a Full Stack Developer who is working at @PaladorTeam.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade