DOM Testing Library

octopus

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

[**Read the docs**](https://testing-library.com/dom) | [Edit the docs](https://github.com/testing-library/testing-library-docs)

[![Build Status][build-badge]][build] [![Code Coverage][coverage-badge]][coverage] [![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] [![All Contributors][all-contributors-badge]](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] [![Discord][discord-badge]][discord] [![Watch on GitHub][github-watch-badge]][github-watch] [![Star on GitHub][github-star-badge]][github-star] [![Tweet][twitter-badge]][twitter]
TestingJavaScript.com Learn the smart, efficient way to test any JavaScript application.
## Table of Contents - [The Problem](#the-problem) - [This Solution](#this-solution) - [Installation](#installation) - [Documentation](#documentation) - [Guiding Principles](#guiding-principles) - [Contributors](#contributors) - [LICENSE](#license) ## The Problem You want to write maintainable tests for your Web UI. 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 `DOM Testing Library` is a very light-weight solution for testing DOM nodes (whether simulated with [`JSDOM`](https://github.com/jsdom/jsdom) as provided by default with [Jest][] or in the browser). The main utilities it provides involve querying the DOM for nodes in a way that's similar to how the user finds elements on the page. In this way, the library helps ensure your tests give you confidence in your UI code. The `DOM Testing Library`'s primary guiding principle is: > [The more your tests resemble the way your software is used, the more > confidence they can give you.][guiding-principle] ## Installation This module is distributed via [npm][npm] which is bundled with [node][node] and should be installed as one of your project's `devDependencies`: ``` npm install --save-dev @testing-library/dom ``` > [**Docs**](https://testing-library.com/docs/install) ## Documentation Read the docs (and discover framework and tool-specific implementations) at [testing-library.com](https://testing-library.com/dom) ## Guiding Principles > [The more your tests resemble the way your software is used, the more > confidence they can give you.][guiding-principle] We try to only expose methods and utilities that encourage you to write tests that closely resemble how your web pages 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 the application components in the way the user would use it. We _are_ making some trade-offs here because we're using a computer and often a simulated browser environment, but in general, utilities should encourage tests that use the components the way they're intended to be used. 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][emojis]):

Kent C. Dodds

πŸ’» πŸ“– πŸš‡ ⚠️

Greg BergΓ©

πŸ€”

Ryan Castner

πŸ“–

Daniel Sandiego

πŸ’»

PaweΕ‚ MikoΕ‚ajczyk

πŸ’»

Alejandro ÑÑñez Ortiz

πŸ“–

Matt Parrish

πŸ› πŸ’» πŸ“– ⚠️

Justin Hall

πŸ“¦

Anto Aravinth

πŸ’» ⚠️ πŸ“–

Jonah Moses

πŸ“–

Łukasz Gandecki

πŸ’» ⚠️ πŸ“–

Ivan Babak

πŸ› πŸ€” πŸ’» πŸ“–

Jesse Day

πŸ’»

Ernesto GarcΓ­a

πŸ’¬ πŸ’» πŸ“–

Josef Maxx Blake

πŸ’» πŸ“– ⚠️

Alex Cook

πŸ“– πŸ’‘ πŸ‘€

Daniel Cook

πŸ’» πŸ“– ⚠️

Thomas Chia

πŸ› πŸ’»

Tim Deschryver

πŸ’» ⚠️ πŸ‘€

Alex Krolick

πŸ’»

Maddi Joyce

πŸ’»

Peter Kamps

πŸ› πŸ’» ⚠️

Jonathan Stoye

πŸ“– πŸ’»

Sanghyeon Lee

πŸ’‘

Justice Mba

πŸ’» πŸ“– πŸ€”

Wayne Crouch

πŸ’»

Ben Elliott

πŸ’»

Ruben Costa

πŸ’»

Robert Smith

πŸ› πŸ€” πŸ“–

dadamssg

πŸ’»

Neil Kistner

πŸ’» ⚠️

Ben Chauvette

πŸ’»

Jeff Baumgardt

πŸ’» πŸ“–

Matan Kushner

πŸ’» πŸ“– πŸ€” ⚠️

Alex Wendte

πŸ’» πŸ“– ⚠️

Tamas Fodor

πŸ“–

Benjamin Eckardt

πŸ’»

Ryan Campbell

πŸ“–

Taylor Briggs

⚠️

John Gozde

πŸ’»

C. T. Lin

πŸ“–

Terrence Wong

πŸ’»

Soo Jae Hwang

πŸ’»

Royston Shufflebotham

πŸ› πŸ’» πŸ“– ⚠️

Vadim Brodsky

πŸ’»

Eunjae Lee

πŸ’»

David Peter

πŸ’»

Shy Alter

πŸ’» πŸ“–

Łukasz Makuch

πŸ“¦

Tyler Haas

πŸ’» ⚠️

Vesa Laakso

πŸ’» ⚠️

Tulsi Sapkota

πŸ’»

Tiago Nunes

πŸ’» ⚠️

JaxCavalera

πŸ’» πŸ‘€

bopfer

⚠️

Jan Pfitzner

πŸ’»

David

πŸ’»

Diego Hernandez

πŸ’» ⚠️

Alex Young

πŸ’»

Paul Armstrong

πŸ’» ⚠️

TamΓ‘s SzabΓ³

πŸ’» ⚠️

Dylan Piercey

πŸ’» ⚠️

Michael Lasky

πŸ’» ⚠️ πŸ“–

Sebastian Silbermann

πŸ’» ⚠️ πŸ“– πŸš‡ πŸ‘€

Dylan Vann

πŸ’»

AdriΓ  Fontcuberta

πŸ’» ⚠️ πŸ“–

Thomas Lombart

πŸ’»

Sam Horton

πŸ’» ⚠️

Andrew Hill

πŸ’»

Jan Amann

πŸ’» ⚠️

Brais PiΓ±eiro

πŸ’» ⚠️

Dominykas BlyΕΎΔ—

πŸ’» ⚠️

Olzhas Askar

πŸ’» ⚠️ πŸ“–

Max Belsky

πŸ’» ⚠️

Michael Mantel

⚠️

Tom Nagle

πŸ’»

Westbrook Johnson

πŸ’»

Mohammad Aziz

πŸ’» ⚠️

seetdev

⚠️ πŸ’»

Xavier Garcia Buils

πŸ’» ⚠️

aw-davidson

πŸ’» ⚠️

MichaΓ«l De Boey

πŸ’»

Minh Nguyen

πŸ’»

Egill SveinbjΓΆrnsson

πŸ’»

Pavel Pustovalov

πŸ“–

Adam Palaniuk

πŸ’» ⚠️

Yama-Tomo

πŸ’» ⚠️

Aaron Pettengill

πŸ’» ⚠️

Kate W. Boyd

πŸ’»

Rahul Suryakanth

πŸ’» ⚠️

Jamie

πŸ’» ⚠️

Nicolas Stepien

πŸ’»

Ken Powers

πŸ’»

MichaΕ‚ Zdunek

πŸ’»

Ali Nasserzadeh

πŸ’»

Darek Kay

πŸ“– πŸ’» ⚠️

Lukas

πŸ’» ⚠️

Tom Crockett

πŸ’» ⚠️

Kevin Brewer

πŸ’» ⚠️

Ben Monro

πŸ’» πŸ€” ⚠️ πŸ“–

Stephan Meijer

πŸ€” πŸ’» ⚠️

JoΓ£o Forja

πŸ’» ⚠️

Nick McCurdy

πŸ“– πŸ’» ⚠️ πŸ‘€ πŸš‡

Caleb Meredith

πŸ’»

Marco Moretti

πŸ’» ⚠️ πŸ‘€

Travis Jefferson

πŸ’» ⚠️

Maciej Jastrzebski

πŸ›

Geoff Harcourt

πŸ’»

Josh Goldberg

πŸ’» ⚠️

Ken Gregory

πŸ’» ⚠️

Jacob Paris

πŸ’» ⚠️

keiya sasaki

πŸ“–

Idan Entin

πŸ’» ⚠️

Deniz Susman

πŸ’»

Bianca Del Carretto

⚠️ πŸ’»

Josh Lalonde

πŸ’» ⚠️

Ioannis Papadopoulos

πŸ’» ⚠️

Maxwell Newlands

πŸ’» ⚠️

Jared Luxenberg

πŸ’» ⚠️

snizhana

πŸ’» ⚠️

Michael van Engelshoven

πŸ‘€

Asher Tuggle

πŸ›

Winter LaMon

πŸ’» ⚠️

Victor Cordova

πŸ’» ⚠️

slowselfip

πŸ›

Dmitry Semigradsky

πŸ’»

Adam

πŸ’» ⚠️

balavishnuvj

πŸ’»

Chris Colborne

πŸ’»

Romain Trotard

πŸ’»

Thomas Marshall

πŸ’» ⚠️

johnjessewood

πŸ› πŸ’»

Ari PerkkiΓΆ

πŸ› πŸ’» πŸ“–

Nathan Force

πŸ’»

Philipp Fritsche

πŸ’»

Renato Alencar

πŸ’» ⚠️

Simen Bekkhus

πŸ›

Dan Abramov

πŸ› πŸ‘€

Matan Borenkraout

πŸ’»

simcha90

πŸ’»

Amit Miran

πŸš‡

Dominik Lesch

πŸ“–

Gareth Jones

πŸ’» ⚠️

Rayat Rahman

πŸ’»

Nik Savchenko

πŸ’»

Kevin Fleischman

πŸ’» ⚠️

Beth Hitch

πŸ’»

Jack Laurence

πŸ’»

SantoJambit

πŸ’»

Yashu Mittal

πŸ“–

Ian VanSchooten

πŸ’»

Vanya Prokopovich

πŸ›

James Nail

πŸ›

Rob Caldecott

πŸ›

Dennis273

πŸ’»

Jackson Hardaker

⚠️

Robin Drexler

πŸ’»
This project follows the [all-contributors][all-contributors] specification. Contributions of any kind welcome! ## LICENSE [MIT](LICENSE) [npm]: https://www.npmjs.com/ [node]: https://nodejs.org [build-badge]: https://img.shields.io/github/workflow/status/testing-library/dom-testing-library/validate?logo=github&style=flat-square [build]: https://github.com/testing-library/dom-testing-library/actions?query=workflow%3Avalidate [coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/dom-testing-library.svg?style=flat-square [coverage]: https://codecov.io/github/testing-library/dom-testing-library [version-badge]: https://img.shields.io/npm/v/@testing-library/dom.svg?style=flat-square [package]: https://www.npmjs.com/package/@testing-library/dom [downloads-badge]: https://img.shields.io/npm/dm/@testing-library/dom.svg?style=flat-square [npmtrends]: http://www.npmtrends.com/@testing-library/dom [license-badge]: https://img.shields.io/npm/l/@testing-library/dom.svg?style=flat-square [license]: https://github.com/testing-library/dom-testing-library/blob/main/LICENSE [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square [prs]: http://makeapullrequest.com [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square [coc]: https://github.com/testing-library/dom-testing-library/blob/main/CODE_OF_CONDUCT.md [github-watch-badge]: https://img.shields.io/github/watchers/testing-library/dom-testing-library.svg?style=social [github-watch]: https://github.com/testing-library/dom-testing-library/watchers [github-star-badge]: https://img.shields.io/github/stars/testing-library/dom-testing-library.svg?style=social [github-star]: https://github.com/testing-library/dom-testing-library/stargazers [twitter]: https://twitter.com/intent/tweet?text=Check%20out%20dom-testing-library%20by%20%40testing-library%20https%3A%2F%2Fgithub.com%2Ftesting-library%2Fdom-testing-library%20%F0%9F%91%8D [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/testing-library/dom-testing-library.svg?style=social [emojis]: https://github.com/all-contributors/all-contributors#emoji-key [all-contributors]: https://github.com/all-contributors/all-contributors [all-contributors-badge]: https://img.shields.io/github/all-contributors/testing-library/dom-testing-library?color=orange&style=flat-square [set-immediate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate [guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106 [jest]: https://facebook.github.io/jest [discord-badge]: https://img.shields.io/discord/723559267868737556.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square [discord]: https://discord.gg/testing-library