enzyme vs @vue/test-utils vs react-testing-library
JavaScript Testing Utilities Comparison
Search packages..
1 Year
enzyme@vue/test-utilsreact-testing-librarySimilar Packages:
What's JavaScript Testing Utilities?

JavaScript testing utilities are essential tools for developers to ensure the reliability and functionality of their applications. These libraries provide various methods and utilities to facilitate the testing of components, enabling developers to write unit tests, integration tests, and end-to-end tests efficiently. They help in validating the behavior of components, ensuring that they render correctly, respond to user interactions, and maintain the expected state throughout the application lifecycle. By using these testing utilities, developers can catch bugs early in the development process, leading to more robust and maintainable codebases.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
enzyme963,45019,949-2815 years agoMIT
@vue/test-utils962,2711,0571.51 MB368 months agoMIT
react-testing-library29,392---6 years ago-
Feature Comparison: enzyme vs @vue/test-utils vs react-testing-library

Component Rendering

  • enzyme:

    Enzyme offers both shallow and full DOM rendering options, allowing developers to test components in isolation or within a full DOM context. Shallow rendering is particularly useful for unit tests, as it prevents child components from rendering, while full DOM rendering is suitable for integration tests.

  • @vue/test-utils:

    @vue/test-utils allows you to mount Vue components in isolation, providing options to simulate props, slots, and events. This enables thorough testing of component rendering and behavior, ensuring that components function correctly in various scenarios.

  • react-testing-library:

    React Testing Library focuses on rendering components in a way that closely resembles how they will be used in a real application. It encourages testing components as users would interact with them, using methods like getByText and fireEvent to simulate user actions.

User Interaction Simulation

  • enzyme:

    Enzyme allows for simulating events on components, enabling developers to test how components react to user interactions. It provides a variety of methods to simulate events like clicks, form submissions, and more, making it versatile for testing user interactions.

  • @vue/test-utils:

    @vue/test-utils provides methods to trigger events and simulate user interactions, such as clicks and input changes, making it easy to test how components respond to user actions and ensuring that event handlers work as expected.

  • react-testing-library:

    React Testing Library emphasizes user interaction simulation by providing utilities to fire events and assert the resulting changes in the DOM. This approach ensures that tests reflect real user behavior, leading to more reliable and meaningful test outcomes.

Learning Curve

  • enzyme:

    Enzyme has a moderate learning curve, especially for developers new to React. While it offers powerful features, understanding its API and the differences between shallow and full DOM rendering may take some time for beginners.

  • @vue/test-utils:

    @vue/test-utils has a relatively gentle learning curve for developers familiar with Vue.js. Its API is straightforward, and it integrates seamlessly with Vue's reactivity system, making it easy to get started with testing Vue components.

  • react-testing-library:

    React Testing Library is designed to be intuitive and easy to learn, especially for developers who are already familiar with React. Its focus on user-centric testing helps reduce the complexity often associated with testing, making it accessible for newcomers.

Community and Ecosystem

  • enzyme:

    Enzyme has a strong community backing and is widely used in the React ecosystem. However, it has faced some challenges with updates and compatibility with the latest React features, which may affect its long-term viability compared to alternatives.

  • @vue/test-utils:

    @vue/test-utils is well-supported within the Vue.js community, with extensive documentation and resources available. It integrates well with other Vue ecosystem tools, such as Vuex and Vue Router, providing a cohesive testing experience.

  • react-testing-library:

    React Testing Library has gained significant popularity in the React community due to its focus on best practices and user-centric testing. Its active community and ongoing development ensure that it stays up-to-date with the latest React features and testing methodologies.

Integration with Testing Frameworks

  • enzyme:

    Enzyme is compatible with various testing frameworks, including Jest and Mocha, providing flexibility in how tests are structured and executed. It allows for a wide range of testing styles, from unit tests to integration tests.

  • @vue/test-utils:

    @vue/test-utils integrates seamlessly with popular testing frameworks like Jest and Mocha, allowing developers to leverage existing testing setups and write comprehensive tests for Vue components with ease.

  • react-testing-library:

    React Testing Library works well with Jest and other testing frameworks, providing a straightforward setup for testing React components. Its API is designed to complement these frameworks, making it easy to write and run tests.

How to Choose: enzyme vs @vue/test-utils vs react-testing-library
  • enzyme:

    Choose Enzyme if you are working with React applications and prefer a library that allows for shallow rendering and full DOM rendering. Enzyme provides a rich API for traversing and manipulating React component trees, making it ideal for unit testing and component testing in React applications.

  • @vue/test-utils:

    Choose @vue/test-utils if you are working with Vue.js applications and need a library specifically designed to test Vue components. It provides a simple API for mounting components and simulating user interactions, making it easy to test the behavior and rendering of Vue components.

  • react-testing-library:

    Choose React Testing Library if you want to focus on testing the behavior of your components from the user's perspective. It encourages good testing practices by promoting testing based on how users interact with your application, rather than the implementation details of the components.

Similar Npm Packages to enzyme

enzyme is a popular testing utility for React that makes it easier to assert, manipulate, and traverse React component output. Developed by Airbnb, enzyme provides a robust API that allows developers to test React components in a variety of ways, including shallow rendering, full DOM rendering, and static rendering. This flexibility makes it a valuable tool for unit testing and integration testing in React applications. However, there are several alternatives available that also cater to testing needs in the JavaScript ecosystem. Here are a few notable alternatives:

  • chai is an assertion library for Node.js and browsers that can be paired with any testing framework. It provides a rich set of assertions for writing tests, making it easier to express expectations in a readable manner. While chai is not specifically designed for React, it can be used alongside other testing libraries like Mocha or Jest to enhance the testing experience. If you prefer a BDD-style assertion library that integrates well with various testing frameworks, chai is a solid choice.

  • jest is a widely-used testing framework developed by Facebook, particularly popular in the React community. It comes with a built-in assertion library and supports features like mocking, snapshot testing, and code coverage analysis. Jest is known for its ease of use and zero-config setup, making it an excellent choice for testing React applications. Many developers opt for Jest as their primary testing framework due to its comprehensive features and seamless integration with React.

  • mocha is a flexible testing framework for Node.js and browsers that allows developers to write tests in a variety of styles, including BDD and TDD. Mocha does not come with an assertion library by default, but it can be easily paired with libraries like chai for assertions. While it requires a bit more setup compared to Jest, Mocha's flexibility and extensive ecosystem make it a popular choice for many developers looking for a customizable testing solution.

  • react-testing-library is a library that focuses on testing React components in a way that resembles how users interact with them. It encourages better testing practices by promoting tests that are more aligned with user behavior rather than implementation details. React Testing Library is often used in conjunction with Jest, making it a powerful combination for testing React applications. If your goal is to write tests that prioritize user experience and interaction, React Testing Library is an excellent alternative to enzyme.

For a comprehensive comparison of these testing libraries, check out the following link: Comparing chai vs enzyme vs jest vs mocha vs react-testing-library.

Similar Npm Packages to @vue/test-utils

@vue/test-utils is the official unit testing utility library for Vue.js applications. It provides a set of utility functions to facilitate the testing of Vue components, making it easier to mount components, simulate user interactions, and assert expected outcomes. With its focus on Vue's reactivity system, @vue/test-utils allows developers to write tests that are both efficient and easy to maintain. This library is essential for ensuring that Vue components behave as expected and helps in catching bugs early in the development process.

While @vue/test-utils is specifically designed for Vue.js, there are alternatives available for testing components in other frameworks, such as React. Here are a couple of notable alternatives:

  • enzyme is a popular testing utility for React that allows developers to manipulate, traverse, and simulate runtime given the output of React components. It provides a variety of methods for shallow rendering, full DOM rendering, and static rendering, making it versatile for different testing scenarios. Enzyme is particularly useful for unit testing React components, as it allows for detailed inspection of component behavior and state. However, it is worth noting that enzyme is primarily compatible with React class components and may require additional configuration for functional components.

  • react-testing-library is another widely-used testing library for React applications. It encourages testing from the user's perspective by focusing on how components behave in the context of the application rather than their implementation details. This library promotes best practices by encouraging developers to write tests that resemble how users interact with the application, making the tests more reliable and maintainable. react-testing-library is ideal for integration and end-to-end testing, as it helps ensure that components work together as intended.

To see how @vue/test-utils compares with enzyme and react-testing-library, check out the comparison: Comparing @vue/test-utils vs enzyme vs react-testing-library.

Similar Npm Packages to react-testing-library

react-testing-library is a popular testing utility for React applications that encourages good testing practices. It provides a simple and accessible API to render components and interact with them in a way that resembles how users would interact with the application. By focusing on testing components from the user's perspective, react-testing-library helps developers create more reliable and maintainable tests. While it is a powerful tool for testing React applications, there are several alternatives worth considering:

  • cypress is an end-to-end testing framework that allows developers to test their applications in a real browser environment. Unlike react-testing-library, which focuses on unit and integration testing of React components, cypress is designed for testing the entire application flow, including user interactions, API calls, and UI behavior. It provides a rich set of features, including time travel debugging, automatic waiting, and a powerful assertion library. If you need to test the complete user experience of your application, cypress is an excellent choice.
  • enzyme is another testing utility for React that allows developers to test components in isolation. It provides a more in-depth API for rendering components, allowing for shallow rendering, full DOM rendering, and static rendering. While enzyme is powerful and flexible, it encourages a different testing philosophy compared to react-testing-library, as it often focuses on the implementation details of components rather than user interactions. If you prefer a more detailed approach to testing and need to inspect component internals, enzyme may be the right tool for you.
  • jest-dom is an extension of the Jest testing framework that provides custom matchers for asserting on DOM nodes. It enhances the testing experience by allowing developers to write more expressive and readable assertions when testing React components. While jest-dom is not a standalone testing library, it complements react-testing-library by providing additional matchers that make it easier to assert on the state of the DOM. If you're already using Jest for your testing needs, incorporating jest-dom can improve the quality of your tests.

To explore how these testing libraries compare, check out the comparison: Comparing cypress vs enzyme vs jest-dom vs react-testing-library.

README for enzyme

Enzyme

Join the chat at https://gitter.im/airbnb/enzyme

npm Version License Build Status Coverage Status

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

Upgrading from Enzyme 2.x or React < 16

Are you here to check whether or not Enzyme is compatible with React 16? Are you currently using Enzyme 2.x? Great! Check out our migration guide for help moving on to Enzyme v3 where React 16 is supported.

Installation

To get started with enzyme, you can simply install it via npm. You will need to install enzyme along with an Adapter corresponding to the version of react (or other UI Component library) you are using. For instance, if you are using enzyme with React 16, you can run:

npm i --save-dev enzyme enzyme-adapter-react-16

Each adapter may have additional peer dependencies which you will need to install as well. For instance, enzyme-adapter-react-16 has peer dependencies on react and react-dom.

At the moment, Enzyme has adapters that provide compatibility with React 16.x, React 15.x, React 0.14.x and React 0.13.x.

The following adapters are officially provided by enzyme, and have the following compatibility with React:

| Enzyme Adapter Package | React semver compatibility | | --- | --- | | enzyme-adapter-react-16 | ^16.4.0-0 | | enzyme-adapter-react-16.3 | ~16.3.0-0 | | enzyme-adapter-react-16.2 | ~16.2 | | enzyme-adapter-react-16.1 | ~16.0.0-0 \|\| ~16.1 | | enzyme-adapter-react-15 | ^15.5.0 | | enzyme-adapter-react-15.4 | 15.0.0-0 - 15.4.x | | enzyme-adapter-react-14 | ^0.14.0 | | enzyme-adapter-react-13 | ^0.13.0 |

Finally, you need to configure enzyme to use the adapter you want it to use. To do this, you can use the top level configure(...) API.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

3rd Party Adapters

It is possible for the community to create additional (non-official) adapters that will make enzyme work with other libraries. If you have made one and it's not included in the list below, feel free to make a PR to this README and add a link to it! The known 3rd party adapters are:

| Adapter Package | For Library | Status | | --- | --- | --- | | enzyme-adapter-preact-pure | preact | (stable) | |enzyme-adapter-inferno|inferno|(work in progress)|

Running Enzyme Tests

Enzyme is unopinionated regarding which test runner or assertion library you use, and should be compatible with all major test runners and assertion libraries out there. The documentation and examples for enzyme use mocha and chai, but you should be able to extrapolate to your framework of choice.

If you are interested in using enzyme with custom assertions and convenience functions for testing your React components, you can consider using:

Using Enzyme with Mocha

Using Enzyme with Karma

Using Enzyme with Browserify

Using Enzyme with SystemJS

Using Enzyme with Webpack

Using Enzyme with JSDOM

Using Enzyme with React Native

Using Enzyme with Jest

Using Enzyme with Lab

Using Enzyme with Tape and AVA

Basic Usage

Shallow Rendering

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

Read the full API Documentation

Full DOM Rendering

import React from 'react';
import sinon from 'sinon';
import { expect } from 'chai';
import { mount } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal('baz');
    wrapper.setProps({ bar: 'foo' });
    expect(wrapper.props().bar).to.equal('foo');
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount((
      <Foo onButtonClick={onButtonClick} />
    ));
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });

  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
    Foo.prototype.componentDidMount.restore();
  });
});

Read the full API Documentation

Static Rendered Markup

import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  it('renders three `.foo-bar`s', () => {
    const wrapper = render(<Foo />);
    expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);
  });

  it('renders the title', () => {
    const wrapper = render(<Foo title="unique" />);
    expect(wrapper.text()).to.contain('unique');
  });
});

Read the full API Documentation

React Hooks support

Enzyme supports react hooks with some limitations in .shallow() due to upstream issues in React's shallow renderer:

  • useEffect() and useLayoutEffect() don't get called in the React shallow renderer. Related issue

  • useCallback() doesn't memoize callback in React shallow renderer. Related issue

ReactTestUtils.act() wrap

If you're using React 16.8+ and .mount(), Enzyme will wrap apis including .simulate(), .setProps(), .setContext(), .invoke() with ReactTestUtils.act() so you don't need to manually wrap it.

A common pattern to trigger handlers with .act() and assert is:

const wrapper = mount(<SomeComponent />);
act(() => wrapper.prop('handler')());
wrapper.update();
expect(/* ... */);

We cannot wrap the result of .prop() (or .props()) with .act() in Enzyme internally since it will break the equality of the returned value. However, you could use .invoke() to simplify the code:

const wrapper = mount(<SomeComponent />);
wrapper.invoke('handler')();
expect(/* ... */);

Future

Enzyme Future

Contributing

See the Contributors Guide

In the wild

Organizations and projects using enzyme can list themselves here.

License

MIT

Terms & PrivacyProduct HuntJSON to TypeScriptCopilotChat for Web Dev