Home

Author: Dennis O'Keeffe

Section: Testing

Enzyme

Resources

Usage

When testing React components for our expected UI, we use AirBnb's Enzyme library on top:

// Assuming component maybe the following: // <PageHome> // <SectionOne /> // <SectionTwo /> // <PageHome /> const wrapper = Enzyme.shallow(<PageHome />); describe(chalk.magenta('PageHome Enzyme tests'), () => { it('PageHome child React component SectionHome to exist', () => { expect(wrapper.find('SectionOne').exists()).to.equal(true); // evaluates to true }); });

In more advanced use, this can become incredibly useful for ensuring that a number of elements renders correctly from default JSON data or an external resource.

Repository

https://github.com/okeeffed/developer-notes-nextjs/content/testing/enzyme

Sections


Related