Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@testing-library/react

Package Overview
Dependencies
Maintainers
15
Versions
117
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@testing-library/react

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

  • 15.0.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
11M
increased by6.41%
Maintainers
15
Weekly downloads
 
Created

What is @testing-library/react?

The @testing-library/react package is a set of utilities that allow you to work with React components in a way that simulates user interaction as closely as possible. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary aim is to test the component the way users would. Therefore, it avoids including details about the component's internal structure, such as state or lifecycle methods, and instead focuses on making tests easy to write and understand.

What are @testing-library/react's main functionalities?

Rendering Components

This feature allows you to render a React component into a container which is appended to document.body. It provides utility functions to interact with the rendered component.

import { render } from '@testing-library/react';
const { getByText } = render(<button>Click me</button>);
expect(getByText(/click me/i)).toBeInTheDocument();

Querying Elements

Provides various methods to query elements from the rendered component, such as getByText, getByRole, etc., making it easier to assert their presence and properties.

import { screen } from '@testing-library/react';
render(<div>Hello World</div>);
expect(screen.getByText('Hello World')).toBeInTheDocument();

User Events Simulation

Enables the simulation of user actions like clicking, typing, etc., on the rendered components. This is crucial for testing interactive elements.

import { render, fireEvent } from '@testing-library/react';
const { getByLabelText, getByText } = render(<label htmlFor='checkbox'>Check this box</label>
<input id='checkbox' type='checkbox' />);
fireEvent.click(getByText('Check this box'));
expect(getByLabelText('Check this box')).toBeChecked();

Other packages similar to @testing-library/react

Keywords

FAQs

Package last updated on 13 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc