Effortless Assertions and Testing with Enzyme Matchers 6

March 26, 2018

Enzyme Matchers allows you to run common assertions on your React components using Enzyme in a Jest or Jasmine environment. With it, you can easily test styles, disabled states, stylesheet classes, text and more. With version 6.0, Enzyme Matchers simplifies setup of your test environment in Jest, making it even easier to get started with.

Built–In Matchers for Common Test Patterns

The assertions in Enzyme Matchers make it easier to test your React components, and can even simplify the testing of certain styles.

expect(wrapper.props().style).toEqual(expect.objectContaining({ backgroundColor: 'red' });

becomes:

expect(wrapper).toHaveStyle('backgroundColor', 'red');

You can also easily test if your mounted components contain other React components.

const List = () => ( <ul> <li><Dog name="Leo" /></li> <li><Dog name="Dixie" /></li> </ul> ); const wrapper = mount(<List />); expect(wrapper).toContainReact(<Dog name="Leo" />); expect(wrapper).not.toContainReact(<Dog name="Milo" />);

Assertions for matching classes, html markup, refs, state, and more are also included.

Simplified Test Environment Setup

With Enzyme Matchers 6, getting your Jest test environment running has never been easier. The React 16 Enzyme adapter is applied by default, so you no longer have to manually set one up. If you need to change the version, you can do so inside your package.json’s jest object. The jest-environment-enzyme package eliminates the need to import React, shallow, mount, or render to every test file. A corresponding eslint-config-jest-enzyme package takes care of any linting issues around those global variables.

How To Get Started

To start using Enzyme Matchers and the simplified test environment using yarn or npm install, add jest-enzyme jest-environment-enzyme to your dev dependencies. You can also install eslint-config-jest-enzyme if you’re using ESLint. The assertions in Enzyme Matchers are included with jest-enzyme.

All you have to add to your package.json is:

"jest": { "testEnvironment": "enzyme", "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js" }

To learn more about Enzyme Matchers visit the GitHub repo or send a tweet to Blaine Kasten.

Related Posts

Victory Native Turns 40

November 17, 2023
Victory Native XL is a ground-up rewrite of Victory Native that diverges from the Victory Web API to leverage modern tooling in the React Native space to offer peak performance and flexibility.

Empowering Users: Developing Accessible Mobile Apps using React Native

June 26, 2023
Robust technical accessibility strategies and best practices we implemented for a mobile voting application using React Native.

Build a Text Summarizer in 100 Lines of Code with Vercel AI SDK

June 16, 2023
Vercel recently announced their AI SDK. I wanted to see just how easy it was to get up and running with this Vercel AI SDK and build something simple, but with some potential usefulness.