@testing-library/angular vs @testing-library/react vs @testing-library/vue vs jest-dom
Testing Libraries for JavaScript Frameworks
Search packages..
@testing-library/angular@testing-library/react@testing-library/vuejest-domSimilar Packages:

Testing Libraries for JavaScript Frameworks

Testing libraries provide essential tools for developers to ensure their applications function correctly and maintain high quality. These libraries focus on enabling developers to write tests that simulate user interactions, validate component behavior, and ensure that the UI renders as expected. They are tailored to specific frameworks, allowing for a more seamless integration with the framework's architecture and best practices. By utilizing these libraries, developers can create robust test suites that enhance code reliability and facilitate easier maintenance over time.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
@testing-library/angular0782150 kB621 days agoMIT
@testing-library/react019,545337 kB762 months agoMIT
@testing-library/vue01,12230.5 kB362 years agoMIT
jest-dom0---7 years ago-

Feature Comparison: @testing-library/angular vs @testing-library/react vs @testing-library/vue vs jest-dom

User-Centric Testing

  • @testing-library/angular:

    This library promotes testing Angular components from the user's perspective. It encourages developers to focus on how users interact with the application rather than the implementation details, leading to more meaningful tests that reflect real-world usage.

  • @testing-library/react:

    This library is designed to test React components in a way that mimics user behavior. It emphasizes querying the DOM in ways that a user would, ensuring that tests are both effective and maintainable by focusing on the output rather than the internal workings of components.

  • @testing-library/vue:

    Similar to its counterparts, this library focuses on user interactions in Vue applications. It allows developers to write tests that validate component behavior based on how users would engage with the UI, ensuring that the application meets user expectations.

Integration with Frameworks

  • @testing-library/angular:

    Built specifically for Angular, this library integrates seamlessly with Angular's testing utilities, making it easier to set up and run tests that leverage Angular's features and lifecycle hooks.

  • @testing-library/react:

    This library is tailored for React, utilizing React's testing capabilities and lifecycle methods. It provides a smooth integration with Jest, making it easy to write and run tests that are consistent with React's paradigms.

  • @testing-library/vue:

    Designed for Vue, this library integrates well with Vue's testing ecosystem, allowing developers to leverage Vue's reactivity and lifecycle hooks while writing tests that are intuitive and straightforward.

Custom Matchers

  • @testing-library/angular:

    While this package focuses on Angular testing, it can be complemented with jest-dom for enhanced assertions. This combination allows for more expressive tests that can check for specific conditions and states in the DOM.

  • @testing-library/react:

    This library works well with jest-dom, providing custom matchers that enhance the testing experience. Developers can write more readable and expressive assertions, improving the clarity of their tests.

  • @testing-library/vue:

    By using jest-dom alongside this library, developers can take advantage of custom matchers that simplify DOM assertions, making tests easier to understand and maintain.

Learning Curve

  • @testing-library/angular:

    The learning curve is moderate, especially for those familiar with Angular. Developers need to understand Angular's component architecture and lifecycle to effectively utilize this library for testing.

  • @testing-library/react:

    This library is relatively easy to learn for developers already familiar with React. Its API is intuitive and designed to align with React's component-based architecture, making it accessible for newcomers and experienced developers alike.

  • @testing-library/vue:

    Similar to the React version, this library has a gentle learning curve for those already acquainted with Vue. Its focus on user interactions makes it straightforward for developers to adopt and implement.

Community and Support

  • @testing-library/angular:

    Supported by a growing community, this library benefits from extensive documentation and examples, making it easier for developers to find help and resources as they learn to test Angular applications.

  • @testing-library/react:

    One of the most popular testing libraries for React, it has a large community and a wealth of resources, tutorials, and examples available, which can significantly aid developers in writing effective tests.

  • @testing-library/vue:

    This library is gaining traction within the Vue community, with increasing documentation and community support available, helping developers to effectively implement testing in their Vue applications.

How to Choose: @testing-library/angular vs @testing-library/react vs @testing-library/vue vs jest-dom

  • @testing-library/angular:

    Choose this package if you are working with Angular applications. It provides utilities for testing Angular components and directives, focusing on user-centric testing approaches that encourage best practices in Angular development.

  • @testing-library/react:

    Select this package for React applications. It emphasizes testing components in a way that resembles how users interact with them, promoting a more realistic testing environment and ensuring that your components behave as expected in real-world scenarios.

  • @testing-library/vue:

    Opt for this package when developing Vue applications. It offers a set of testing utilities specifically designed for Vue components, enabling developers to write tests that reflect user interactions and component behavior effectively.

  • jest-dom:

    Use jest-dom in conjunction with any of the above packages to enhance your assertions in tests. It provides custom matchers for Jest, allowing for more expressive and readable tests that can check the state of the DOM in a way that aligns with user expectations.

Similar Npm Packages to @testing-library/angular

@testing-library/angular is a testing utility for Angular applications that provides a simple and effective way to test components and user interactions. It is part of the Testing Library family, which emphasizes testing components in a way that resembles how users interact with them. This approach helps ensure that your tests are more reliable and maintainable. While @testing-library/angular is a powerful tool for Angular developers, there are several alternatives available for testing in different frameworks or environments. Here are a few notable options:

  • @testing-library/dom is a library that provides a set of utilities for testing DOM nodes in a way that is agnostic of any specific framework. It allows developers to query and interact with elements in the DOM, making it suitable for testing vanilla JavaScript applications or any framework that manipulates the DOM directly. If you need a lightweight solution for testing DOM interactions without being tied to a specific framework, @testing-library/dom is a great choice.
  • @testing-library/react is designed specifically for testing React components. It provides utilities to render components, query the DOM, and simulate user interactions, all while encouraging best practices in testing. If you are working with React and want to ensure your components behave as expected from a user's perspective, @testing-library/react is the ideal tool for the job.
  • @testing-library/vue is tailored for testing Vue.js components. Similar to its React counterpart, it provides utilities to render Vue components, interact with the DOM, and assert on the output. If you are developing Vue applications, @testing-library/vue will help you write tests that focus on user interactions and component behavior.
  • chai is an assertion library that can be used with various testing frameworks. It provides a range of assertion styles (e.g., BDD, TDD) and is often used in conjunction with other libraries like Mocha. If you prefer a flexible assertion library that can work with different testing setups, Chai is a solid choice.
  • enzyme is a testing utility for React that allows for shallow rendering, full DOM rendering, and static rendering of components. While it provides powerful capabilities for testing React components, it is worth noting that the React Testing Library (including @testing-library/react) has gained popularity for its user-centric approach. If you need more control over component rendering and testing, Enzyme may still be a suitable option.
  • jest is a widely-used testing framework that comes with built-in assertion capabilities, mocking, and coverage reporting. It is particularly popular in the React ecosystem but can be used with any JavaScript project. If you are looking for an all-in-one testing solution that integrates well with various libraries, Jest is an excellent choice.
  • mocha is a flexible JavaScript test framework that allows for asynchronous testing and supports various assertion libraries, including Chai. It is often used in conjunction with other tools to create a comprehensive testing setup. If you prefer a customizable testing framework that can adapt to your needs, Mocha is a great option.

To explore how @testing-library/angular compares with its alternatives, check out the comparison: Comparing @testing-library/angular vs @testing-library/dom vs @testing-library/react vs @testing-library/vue vs chai vs enzyme vs jest vs mocha.

Similar Npm Packages to @testing-library/react

@testing-library/react is a popular testing utility for React applications that encourages good testing practices. It provides a set of APIs to help developers test their components in a way that resembles how users interact with them. By focusing on user interactions rather than implementation details, it promotes writing tests that are more maintainable and reliable. This library is widely used for unit and integration testing in React applications, making it easier to ensure that components behave as expected.

While @testing-library/react is a powerful tool for testing React components, there are several alternatives available for testing in different frameworks or with additional features:

  • @testing-library/angular is the Angular counterpart of @testing-library/react. It provides similar utilities for testing Angular components and applications, allowing developers to write tests that focus on user interactions and behavior. If you are working with Angular and want to adopt the same testing philosophy as @testing-library/react, this library is an excellent choice.
  • @testing-library/vue serves the same purpose for Vue.js applications. It offers a set of utilities to facilitate testing Vue components in a user-centric way. By using @testing-library/vue, developers can ensure that their Vue components are tested in a manner similar to how they would be used in a real application, promoting better test quality and maintainability.
  • jest-dom is an extension for Jest that provides custom matchers for asserting on DOM nodes. While it is not a testing library in itself, it complements testing libraries like @testing-library/react by offering additional matchers that make it easier to write assertions about the state of the DOM. If you are using Jest for your testing needs, integrating jest-dom can enhance your testing experience by providing more expressive assertions.

To see how these packages compare, check out the comparison: Comparing @testing-library/angular vs @testing-library/react vs @testing-library/vue vs jest-dom.

Similar Npm Packages to @testing-library/vue

@testing-library/vue is a testing utility for Vue.js applications that promotes best practices in testing by focusing on the way users interact with your components. It encourages developers to write tests that resemble how users would actually use the application, making it easier to ensure that components behave as expected in real-world scenarios. With its simple API, @testing-library/vue allows you to render Vue components, query elements, and simulate user interactions, all while maintaining a clear and readable test structure.

One of the primary alternatives to @testing-library/vue is @vue/test-utils. This official utility library for Vue.js provides a set of tools for unit testing Vue components. It allows developers to mount components, access their instance properties, and perform assertions on their behavior. While @vue/test-utils is highly flexible and powerful, it requires a deeper understanding of Vue's internals, which may lead to more complex tests compared to the user-centric approach of @testing-library/vue.

When deciding between these two libraries, consider your testing philosophy and the complexity of your components. If you prefer a more user-focused testing approach that emphasizes how users interact with your application, @testing-library/vue is a great choice. On the other hand, if you need more control over the component's internals and want to perform detailed unit tests, @vue/test-utils might be more suitable.

For a comprehensive comparison of these testing libraries, check out the following link: Comparing @testing-library/vue vs @vue/test-utils.

Similar Npm Packages to jest-dom

jest-dom is a popular testing utility for Jest, specifically designed to enhance the experience of testing DOM nodes in React applications. It provides a set of custom matchers that extend Jest's built-in assertions, allowing developers to write more expressive and readable tests for their components. With jest-dom, you can easily assert the presence, state, and attributes of DOM elements, making your tests more intuitive and easier to maintain. While jest-dom is a powerful tool for testing, there are several alternatives available in the React testing ecosystem. Here are a few notable ones:

  • chai-dom is an extension for the Chai assertion library that adds custom matchers for asserting on DOM elements. It provides a similar functionality to jest-dom, enabling developers to write more readable assertions for their DOM elements. If you are already using Chai for your testing framework, chai-dom is a great choice to enhance your DOM assertions and improve the overall readability of your tests.
  • enzyme is a widely used testing utility for React that allows developers to manipulate, traverse, and simulate events on React components. While it provides a robust API for testing React components, it focuses more on component testing rather than direct DOM assertions. enzyme is particularly useful for shallow rendering and testing component behavior, making it a good choice if you need to test component logic in addition to DOM interactions.
  • react-testing-library is a popular library that encourages testing React components in a way that resembles how users interact with them. It promotes best practices by focusing on the behavior of components rather than their implementation details. While react-testing-library does not provide custom matchers like jest-dom, it works seamlessly with it, allowing you to write tests that are both user-centric and expressive.

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

README for @testing-library/angular

@testing-library/angular

Octopus with the Angular logo

Simple and complete Angular testing utilities that encourage good testing practices.


Read The Docs | Edit the docs


Build Status version downloads MIT License

All Contributors PRs Welcome Code of Conduct Discord

Watch on GitHub Star on GitHub Tweet

Open in GitHub Codespaces

Table of Contents

The problem

You want to write maintainable tests for your Angular components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

This solution

The @testing-library/angular is a very lightweight solution for testing Angular components. It provides light utility functions on top of Angular and @testing-library/dom, in a way that encourages better testing practices. Its primary guiding principle is:

The more your tests resemble the way your software is used, the more confidence they can give you.

Example

counter.component.ts

@Component({
  selector: 'atl-counter',
  template: `
    <span>{{ hello() }}</span>
    <button (click)="decrement()">-</button>
    <span>Current Count: {{ counter() }}</span>
    <button (click)="increment()">+</button>
  `,
})
export class CounterComponent {
  counter = model(0);
  hello = input('Hi', { alias: 'greeting' });

  increment() {
    this.counter.set(this.counter() + 1);
  }

  decrement() {
    this.counter.set(this.counter() - 1);
  }
}

counter.component.spec.ts

import { render, screen, fireEvent, aliasedInput } from '@testing-library/angular';
import { CounterComponent } from './counter.component';

describe('Counter', () => {
  it('should render counter', async () => {
    await render(CounterComponent, {
      inputs: {
        counter: 5,
        // aliases need to be specified this way
        ...aliasedInput('greeting', 'Hello Alias!'),
      },
    });

    expect(screen.getByText('Current Count: 5')).toBeVisible();
    expect(screen.getByText('Hello Alias!')).toBeVisible();
  });

  it('should increment the counter on click', async () => {
    await render(CounterComponent, { inputs: { counter: 5 } });

    const incrementButton = screen.getByRole('button', { name: '+' });
    fireEvent.click(incrementButton);

    expect(screen.getByText('Current Count: 6')).toBeVisible();
  });
});

See more examples

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies. Starting from ATL version 17, you also need to install @testing-library/dom:

npm install --save-dev @testing-library/angular @testing-library/dom

Or, you can use the ng add command. This sets up your project to use Angular Testing Library, which also includes the installation of @testing-library/dom.

ng add @testing-library/angular

You may also be interested in installing jest-dom so you can use the custom jest matchers.

Docs

Version compatibility

AngularAngular Testing Library
21.x19.x
20.x18.x, 17.x, 16.x, 15.x, 14.x, 13.x
19.x17.x, 16.x, 15.x, 14.x, 13.x
18.x17.x, 16.x, 15.x, 14.x, 13.x
17.x17.x, 16.x, 15.x, 14.x, 13.x
16.x14.x, 13.x
>= 15.114.x, 13.x
< 15.112.x, 11.x
14.x12.x, 11.x

Guiding Principles

The more your tests resemble the way your software is used, the more confidence they can give you.

We try to only expose methods and utilities that encourage you to write tests that closely resemble how your Angular components are used.

Utilities are included in this project based on the following guiding principles:

  1. If it relates to rendering components, it deals with DOM nodes rather than component instances, nor should it encourage dealing with component instances.
  2. It should be generally useful for testing individual Angular components or full Angular applications.
  3. Utility implementations and APIs should be simple and flexible.

At the end of the day, what we want is for this library to be pretty light-weight, simple, and understandable.

Contributors

Thanks goes to these people (emoji key):

Tim Deschryver
Tim Deschryver
๐Ÿ’ป ๐Ÿ“– ๐Ÿš‡ โš ๏ธ		Michaรซl De Boey
Michaรซl De Boey
๐Ÿ“–		Ignacio Le Fluk
Ignacio Le Fluk
๐Ÿ’ป โš ๏ธ		Tamรกs Szabรณ
Tamรกs Szabรณ
๐Ÿ’ป		Gregor Woiwode
Gregor Woiwode
๐Ÿ’ป		Toni Villena
Toni Villena
๐Ÿ› ๐Ÿ’ป ๐Ÿ“– โš ๏ธ		ShPelles
ShPelles
๐Ÿ“–
Miluoshi
Miluoshi
๐Ÿ’ป โš ๏ธ		Nick McCurdy
Nick McCurdy
๐Ÿ“–		Srinivasan Sekar
Srinivasan Sekar
๐Ÿ“–		Bitcollage
Bitcollage
๐Ÿ“–		Emil Sundin
Emil Sundin
๐Ÿ’ป		Ombrax
Ombrax
๐Ÿ’ป		Rafael Santana
Rafael Santana
๐Ÿ’ป โš ๏ธ ๐Ÿ›
Benjamin Blackwood
Benjamin Blackwood
๐Ÿ“– โš ๏ธ		Gustavo Porto
Gustavo Porto
๐Ÿ“–		Bo Vandersteene
Bo Vandersteene
๐Ÿ’ป		Janek
Janek
๐Ÿ’ป โš ๏ธ		Gleb Irovich
Gleb Irovich
๐Ÿ’ป โš ๏ธ		Arjen
Arjen
๐Ÿ’ป ๐Ÿšง		Suguru Inatomi
Suguru Inatomi
๐Ÿ’ป ๐Ÿค”
Amit Miran
Amit Miran
๐Ÿš‡		Jan-Willem Willebrands
Jan-Willem Willebrands
๐Ÿ’ป		Sandro
Sandro
๐Ÿ’ป ๐Ÿ›		Michael Westphal
Michael Westphal
๐Ÿ’ป โš ๏ธ		Lukas
Lukas
๐Ÿ’ป		Matan Borenkraout
Matan Borenkraout
๐Ÿšง		mleimer
mleimer
๐Ÿ“– โš ๏ธ
MeIr
MeIr
๐Ÿ› โš ๏ธ		John Dengis
John Dengis
๐Ÿ’ป โš ๏ธ		Rokas Brazdลพionis
Rokas Brazdลพionis
๐Ÿ’ป		Mateus Duraes
Mateus Duraes
๐Ÿ’ป		Josh Joseph
Josh Joseph
๐Ÿ’ป โš ๏ธ		Torsten Knauf
Torsten Knauf
๐Ÿšง		antischematic
antischematic
๐Ÿ› ๐Ÿค”
Florian Pabst
Florian Pabst
๐Ÿ’ป		Mark Goho
Mark Goho
๐Ÿšง ๐Ÿ“–		Jan-Willem Baart
Jan-Willem Baart
๐Ÿ’ป โš ๏ธ		S. Mumenthaler
S. Mumenthaler
๐Ÿ’ป โš ๏ธ		Andrei Alecu
Andrei Alecu
๐Ÿ’ป ๐Ÿค” ๐Ÿ“–		Daniel Ramรญrez Barrientos
Daniel Ramรญrez Barrientos
๐Ÿ’ป		Mahdi Lazraq
Mahdi Lazraq
๐Ÿ’ป โš ๏ธ
Arthur Petrie
Arthur Petrie
๐Ÿ’ป		Fabien Dehoprรฉ
Fabien Dehoprรฉ
๐Ÿ’ป		Jamie Vereecken
Jamie Vereecken
๐Ÿ’ป		Christian24
Christian24
๐Ÿ’ป ๐Ÿ‘€		Michal ล trajt
Michal ล trajt
๐Ÿ’ป ๐Ÿ›		J. Degand
J. Degand
๐Ÿ’ป		Maksim Popov
Maksim Popov
๐Ÿ’ป

This project follows the all-contributors specification. Contributions of any kind welcome!

Docs

Read The Docs | Edit the docs

FAQ

I am using Reactive Forms and the jest-dom matcher toHaveFormValues always returns an empty object or there are missing fields. Why?

Only form elements with a name attribute will have their values passed to toHaveFormsValues.

Issues

Looking to contribute? Look for the Good First Issue label.

๐Ÿ› Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

๐Ÿ’ก Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a ๐Ÿ‘. This helps maintainers prioritize what to work on.

See Feature Requests

โ“ Questions

For questions related to using the library, please visit a support community instead of filing an issue on GitHub.

Getting started with GitHub Codespaces

To get started, create a codespace for this repository by clicking this ๐Ÿ‘‡

Open in GitHub Codespaces

A codespace will open in a web-based version of Visual Studio Code. The dev container is fully configured with software needed for this project.

Note: Dev containers is an open spec which is supported by GitHub Codespaces and other tools.

LICENSE

MIT

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.