jest-native

Custom jest matchers to test the state of React Native.

[![Build Status](https://travis-ci.org/testing-library/jest-native.svg?branch=main)](https://travis-ci.org/testing-library/jest-native) [![Code Coverage](https://img.shields.io/codecov/c/github/testing-library/jest-native.svg?style=flat-square)](https://codecov.io/github/testing-library/jest-native) [![version](https://img.shields.io/npm/v/@testing-library/jest-native.svg?style=flat-square)](https://www.npmjs.com/package/@testing-library/jest-native) [![downloads](https://img.shields.io/npm/dm/@testing-library/jest-native.svg?style=flat-square)](http://www.npmtrends.com/@testing-library/jest-native) [![MIT License](https://img.shields.io/npm/l/@testing-library/jest-native.svg?style=flat-square)](https://github.com/testing-library/jest-native/blob/main/LICENSE) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/testing-library/jest-native/blob/main/CODE_OF_CONDUCT.md) [![Discord](https://img.shields.io/discord/723559267868737556.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square)](https://discord.gg/testing-library) [![Watch on GitHub](https://img.shields.io/github/watchers/testing-library/jest-native.svg?style=social)](https://github.com/testing-library/jest-native/watchers) [![Star on GitHub](https://img.shields.io/github/stars/testing-library/jest-native.svg?style=social)](https://github.com/testing-library/jest-native/stargazers) ## Table of Contents - [The problem](#the-problem) - [This solution](#this-solution) - [Compatibility](#compatibility) - [Installation](#installation) - [Usage](#usage) - [Matchers](#matchers) - [`toBeDisabled`](#tobedisabled) - [`toBeEnabled`](#tobeenabled) - [`toBeEmptyElement`](#tobeemptyelement) - [`toContainElement`](#tocontainelement) - [`toBeOnTheScreen`](#tobeonthescreen) - [`toHaveProp`](#tohaveprop) - [`toHaveTextContent`](#tohavetextcontent) - [`toHaveStyle`](#tohavestyle) - [`toBeVisible`](#tobevisible) - [`toHaveAccessibilityState`](#tohaveaccessibilitystate) - [`toHaveAccessibilityValue`](#tohaveaccessibilityvalue) - [Inspiration](#inspiration) - [Other solutions](#other-solutions) - [Contributors](#contributors) ## The problem You want to use [jest](https://facebook.github.io/jest/) to write tests that assert various things about the state of a React Native app. As part of that goal, you want to avoid all the repetitive patterns that arise in doing so like checking for a native element's props, its text content, its styles, and more. ## This solution The `jest-native` library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain. ## Compatibility These matchers should, for the most part, be agnostic enough to work with any React Native testing utilities, but they are primarily intended to be used with [React Native Testing Library](https://github.com/callstack/react-native-testing-library). Any issues raised with existing matchers or any newly proposed matchers must be viewed through compatibility with that library and its guiding principles first. ## Installation This module should be installed as one of your project's `devDependencies`: #### Using `yarn` ```sh yarn add --dev @testing-library/jest-native ``` #### Using `npm` ```sh npm install --save-dev @testing-library/jest-native ``` You will need `react-test-renderer`, `react`, and `react-native` installed in order to use this package. ## Usage Import `@testing-library/jest-native/extend-expect` once (for instance in your [tests setup file](https://jestjs.io/docs/configuration#setupfilesafterenv-array)) and you're good to go: ```javascript import '@testing-library/jest-native/extend-expect'; ``` Alternatively, you can selectively import only the matchers you intend to use, and extend jest's `expect` yourself: ```javascript import { toBeEmptyElement, toHaveTextContent } from '@testing-library/jest-native'; expect.extend({ toBeEmptyElement, toHaveTextContent }); ``` ## Matchers `jest-native` has only been tested to work with [React Native Testing Library](https://github.com/callstack/react-native-testing-library). Keep in mind that these queries are intended only to work with elements corresponding to [host components](https://reactnative.dev/architecture/glossary#react-host-components-or-host-components). ### `toBeDisabled` ```javascript toBeDisabled(); ``` Check whether or not an element is disabled from a user perspective. This matcher will check if the element or its parent has any of the following props : - `disabled` - `accessibilityState={{ disabled: true }}` - `editable={false}` (for `TextInput` only) #### Examples ```javascript const { getByTestId } = render(