Gathering detailed insights and metrics for @testing-library/jest-native
As of June 2024, the npm registry hosts over 2 million packages, making it one of the largest open-source software repositories in the world.
Installations
npm install @testing-library/jest-nativeScore
55.5
Supply Chain
55.5
Quality
77.7
Maintenance
50
Vulnerability
95.3
License
Releases
49
Contributors
58
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4){kind=avatar}
![allcontributors[bot]](https://avatars.githubusercontent.com/in/23186?v=4){kind=avatar}
![imgbot[bot]](https://avatars.githubusercontent.com/in/4706?v=4){kind=avatar}
Developer
Module System
BETA
CommonJS
Statistics
435 Stars
155 Commits
44 Forks
7 Watching
9 Branches
58 Contributors
Updated on 11 Nov 2024
Bundle Size
79.44 kB
Minified
25.08 kB
Minified + Gzipped
Languages
TypeScript (98.94%)
JavaScript (0.94%)
Shell (0.12%)
Total Downloads
Cumulative downloads
Total Downloads
45,886,406
Last day
2.9%
87,581
Compared to previous day
Last week
4.5%
435,574
Compared to previous week
Last month
4%
1,828,592
Compared to previous month
Last year
46.1%
19,484,454
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
5
Peer Dependencies
3
Dev Dependencies
23
jesthuskyreacteslintprettier@babel/clicommitizentypescript@babel/core@types/jest@types/reactpretty-quickreact-native@babel/runtimesemantic-release@types/react-nativereact-test-renderer@callstack/eslint-configcz-conventional-changelog@types/react-test-renderer@testing-library/react-nativemetro-react-native-babel-preset@relmify/jest-serializer-strip-ansi
Versions
[!CAUTION] This package is deprecated and is no longer actively maintained.
We encourage you to migrate to React Native Testing Library, v12.4 or later, which includes modern built-in Jest matchers based on the matchers for this repository.
The migration process should be relatively straightforward, we have a migration guide available.
jest-native
Custom jest matchers to test the state of React Native.
Table of Contents
- The problem
- This solution
- Compatibility
- Installation
- Usage
- Matchers
- Inspiration
- Other solutions
- Contributors
The problem
You want to use 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. 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
1yarn add --dev @testing-library/jest-native
Using npm
1npm 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
Extending Jest matchers
Import @testing-library/jest-native/extend-expect once (for instance in your
tests setup file) and you're good
to go:
1import '@testing-library/jest-native/extend-expect';
Alternatively, you can selectively import only the matchers you intend to use, and extend jest's
expect yourself:
1import { toBeEmptyElement, toHaveTextContent } from '@testing-library/jest-native'; 2 3expect.extend({ toBeEmptyElement, toHaveTextContent });
TypeScript support
In order to setup proper TypeScript type checking use either one of the following approches.
1. Use TypeScript Jest setup file.
Use jest-setup.ts file (instead of jest-setup.js file) which is added to Jest config's setupFilesAfterEnv option.
The Jest setup file should contain following line:
1import '@testing-library/jest-native/extend-expect';
This should enable TypeScript checkign for both tsc and VS Code intellisense.
2. Use declarations.d.ts file
Alternatively, create declarations.d.ts file at the root level of your project, if it does not exist already.
Add following line at the top of your declarations.d.ts:
/// <reference types="@testing-library/jest-native" />
This should enable TypeScript checkign for both tsc and VS Code intellisense.
Matchers
jest-native has only been tested to work with
React Native Testing Library. Keep in
mind that these queries are intended only to work with elements corresponding to
host components.
toBeDisabled
1toBeDisabled();
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 :
disabledaccessibilityState={{ disabled: true }}editable={false}(forTextInputonly)
Examples
1const { getByTestId } = render( 2 <View> 3 <Button disabled testID="button" title="submit" onPress={(e) => e} /> 4 <TextInput accessibilityState={{ disabled: true }} testID="input" value="text" /> 5 </View>, 6); 7 8expect(getByTestId('button')).toBeDisabled(); 9expect(getByTestId('input')).toBeDisabled();
toBeEnabled
1toBeEnabled();
Check whether or not an element is enabled from a user perspective.
Works similarly to expect().not.toBeDisabled().
Examples
1const { getByTestId } = render( 2 <View> 3 <Button testID="button" title="submit" onPress={(e) => e} /> 4 <TextInput testID="input" value="text" /> 5 </View>, 6); 7 8expect(getByTestId('button')).toBeEnabled(); 9expect(getByTestId('input')).toBeEnabled();
toBeEmptyElement
1toBeEmptyElement();
Check that the given element has no content.
Examples
1const { getByTestId } = render(<View testID="empty" />); 2 3expect(getByTestId('empty')).toBeEmptyElement();
Note
This matcher has been previously namedtoBeEmpty(), but we changed that name in order to avoid conflict with Jest Extendend matcher with the same name.
toContainElement
1toContainElement(element: ReactTestInstance | null);
Check if an element contains another element as a descendant. Again, will only work for native elements.
Examples
1const { queryByTestId } = render( 2 <View testID="grandparent"> 3 <View testID="parent"> 4 <View testID="child" /> 5 </View> 6 <Text testID="text-element" /> 7 </View>, 8); 9 10const grandparent = queryByTestId('grandparent'); 11const parent = queryByTestId('parent'); 12const child = queryByTestId('child'); 13const textElement = queryByTestId('text-element'); 14 15expect(grandparent).toContainElement(parent); 16expect(grandparent).toContainElement(child); 17expect(grandparent).toContainElement(textElement); 18expect(parent).toContainElement(child); 19expect(parent).not.toContainElement(grandparent);
toBeOnTheScreen
1toBeOnTheScreen();
Check that the element is present in the element tree.
You can check that an already captured element has not been removed from the element tree.
Note
This matcher requires React Native Testing Library v10.1 or later, as it includes thescreenobject.Note
If you're using React Native Testing Library v12 or later, you need to install Jest Native v5.4.2 or later.
Examples
1render( 2 <View> 3 <View testID="child" /> 4 </View>, 5); 6 7const child = screen.getByTestId('child'); 8expect(child).toBeOnTheScreen(); 9 10screen.update(<View />); 11expect(child).not.toBeOnTheScreen();
toHaveProp
1toHaveProp(prop: string, value?: any);
Check that the element has a given prop.
You can optionally check that the attribute has a specific expected value.
Examples
1const { queryByTestId } = render( 2 <View> 3 <Text allowFontScaling={false} testID="text"> 4 text 5 </Text> 6 <Button disabled testID="button" title="ok" /> 7 </View>, 8); 9 10expect(queryByTestId('button')).toHaveProp('accessible'); 11expect(queryByTestId('button')).not.toHaveProp('disabled'); 12expect(queryByTestId('button')).not.toHaveProp('title', 'ok');
toHaveTextContent
1toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean });
Check if an element or its children have the supplied text.
This will perform a partial, case-sensitive match when a string match is provided. To perform a
case-insensitive match, you can use a RegExp with the /i modifier.
To enforce matching the complete text content, pass a RegExp.
Examples
1const { queryByTestId } = render(<Text testID="count-value">2</Text>); 2 3expect(queryByTestId('count-value')).toHaveTextContent('2'); 4expect(queryByTestId('count-value')).toHaveTextContent(2); 5expect(queryByTestId('count-value')).toHaveTextContent(/2/); 6expect(queryByTestId('count-value')).not.toHaveTextContent('21');
toHaveStyle
1toHaveStyle(style: object[] | object);
Check if an element has the supplied styles.
You can pass either an object of React Native style properties, or an array of objects with style properties. You cannot pass properties from a React Native stylesheet.
Examples
1const styles = StyleSheet.create({ text: { fontSize: 16 } }); 2 3const { queryByText } = render( 4 <Text 5 style={[ 6 { color: 'black', fontWeight: '600', transform: [{ scale: 2 }, { rotate: '45deg' }] }, 7 styles.text, 8 ]} 9 > 10 Hello World 11 </Text>, 12); 13 14expect(getByText('Hello World')).toHaveStyle({ color: 'black' }); 15expect(getByText('Hello World')).toHaveStyle({ fontWeight: '600' }); 16expect(getByText('Hello World')).toHaveStyle({ fontSize: 16 }); 17expect(getByText('Hello World')).toHaveStyle([{ fontWeight: '600' }, { color: 'black' }]); 18expect(getByText('Hello World')).toHaveStyle({ color: 'black', fontWeight: '600', fontSize: 16 }); 19expect(getByText('Hello World')).toHaveStyle({ transform: [{ scale: 2 }, { rotate: '45deg' }] }); 20expect(getByText('Hello World')).not.toHaveStyle({ color: 'white' }); 21expect(getByText('Hello World')).not.toHaveStyle({ transform: [{ scale: 2 }] }); 22expect(getByText('Hello World')).not.toHaveStyle({ 23 transform: [{ rotate: '45deg' }, { scale: 2 }], 24});
toBeVisible
1toBeVisible();
Check that the given element is visible to the user.
An element is visible if all the following conditions are met:
- it does not have its style property
displayset tonone. - it does not have its style property
opacityset to0. - it is not a
Modalcomponent or it does not have the propvisibleset tofalse. - it is not hidden from accessibility as checked by
isHiddenFromAccessibilityfunction from React Native Testing Library - its ancestor elements are also visible.
Examples
1const { getByTestId } = render(<View testID="empty-view" />); 2 3expect(getByTestId('empty-view')).toBeVisible();
1const { getByTestId } = render(<View testID="view-with-opacity" style={{ opacity: 0.2 }} />); 2 3expect(getByTestId('view-with-opacity')).toBeVisible();
1const { getByTestId } = render(<Modal testID="empty-modal" />); 2 3expect(getByTestId('empty-modal')).toBeVisible();
1const { getByTestId } = render( 2 <Modal> 3 <View> 4 <View testID="view-within-modal" /> 5 </View> 6 </Modal>, 7); 8 9expect(getByTestId('view-within-modal')).toBeVisible();
1const { getByTestId } = render(<View testID="invisible-view" style={{ opacity: 0 }} />); 2 3expect(getByTestId('invisible-view')).not.toBeVisible();
1const { getByTestId } = render(<View testID="display-none-view" style={{ display: 'none' }} />); 2 3expect(getByTestId('display-none-view')).not.toBeVisible();
1const { getByTestId } = render( 2 <View style={{ opacity: 0 }}> 3 <View> 4 <View testID="view-within-invisible-view" /> 5 </View> 6 </View>, 7); 8 9expect(getByTestId('view-within-invisible-view')).not.toBeVisible();
1const { getByTestId } = render( 2 <View style={{ display: 'none' }}> 3 <View> 4 <View testID="view-within-display-none-view" /> 5 </View> 6 </View>, 7); 8 9expect(getByTestId('view-within-display-none-view')).not.toBeVisible();
1const { getByTestId } = render( 2 <Modal visible={false}> 3 <View> 4 <View testID="view-within-not-visible-modal" /> 5 </View> 6 </Modal>, 7); 8 9// Children elements of not visible modals are not rendered. 10expect(queryByTestId('view-within-modal')).toBeNull();
1const { getByTestId } = render(<Modal testID="not-visible-modal" visible={false} />); 2 3expect(getByTestId('not-visible-modal')).not.toBeVisible();
1const { getByTestId } = render(<View testID="test" accessibilityElementsHidden />); 2 3expect(getByTestId('test')).not.toBeVisible();
1const { getByTestId } = render( 2 <View testID="test" importantForAccessibility="no-hide-descendants" />, 3); 4 5expect(getByTestId('test')).not.toBeVisible();
toHaveAccessibilityState
1toHaveAccessibilityState(state: {
2 disabled?: boolean;
3 selected?: boolean;
4 checked?: boolean | 'mixed';
5 busy?: boolean;
6 expanded?: boolean;
7});Check that the element has given accessibility state entries.
This check is based on accessibilityState prop but also takes into account the default entries
which have been found by experimenting with accessibility inspector and screen readers on both iOS
and Android.
Some state entries behave as if explicit false value is the same as not having given state entry,
so their default value is false:
disabledselectedbusy
The remaining state entries behave as if explicit false value is different than not having given
state entry, so their default value is undefined:
checkedexpanded
This matcher is compatible with *ByRole and *ByA11State queries from React Native Testing
Library.
Examples
1render(<View testID="view" accessibilityState={{ expanded: true, checked: true }} />);
2
3// Single value match
4expect(screen.getByTestId('view')).toHaveAccessibilityState({ expanded: true });
5expect(screen.getByTestId('view')).toHaveAccessibilityState({ checked: true });
6
7// Can match multiple entries
8expect(screen.getByTestId('view')).toHaveAccessibilityState({ expanded: true, checked: true });Default values handling:
1render(<View testID="view" />);
2
3// Matching states where default value is `false`
4expect(screen.getByTestId('view')).toHaveAccessibilityState({ disabled: false });
5expect(screen.getByTestId('view')).toHaveAccessibilityState({ selected: false });
6expect(screen.getByTestId('view')).toHaveAccessibilityState({ busy: false });
7
8// Matching states where default value is `undefined`
9expect(screen.getByTestId('view')).not.toHaveAccessibilityState({ checked: false });
10expect(screen.getByTestId('view')).not.toHaveAccessibilityState({ expanded: false });toHaveAccessibilityValue
1toHaveAccessibilityValue(value: {
2 min?: number;
3 max?: number;
4 now?: number;
5 text?: string | RegExp;
6});Check that the element has given accessibilityValue prop entries.
This matcher is compatible with *ByRole and *ByA11Value queries from React Native Testing
Library.
Examples
1render(<View testID="view" accessibilityValue={{ min: 0, max: 100, now: 65 }} />); 2 3const view = screen.getByTestId('view'); 4 5// Single value match 6expect(view).toHaveAccessibilityValue({ now: 65 }); 7expect(view).toHaveAccessibilityValue({ max: 0 }); 8 9// Can match multiple entries 10expect(view).toHaveAccessibilityValue({ min: 0, max: 100 }); 11expect(view).toHaveAccessibilityValue({ min: 0, max: 100, now: 65 }); 12 13// All specified entries need to match 14expect(view).not.toHaveAccessibilityValue({ now: 45 }); 15expect(view).not.toHaveAccessibilityValue({ min: 20, max: 100, now: 65 });
1render(<View testID="view" accessibilityValue={{ text: 'Almost full' }} />); 2 3const view = screen.getByTestId('view'); 4expect(view).toHaveAccessibilityValue({ text: 'Almost full' }); 5expect(view).toHaveAccessibilityValue({ text: /full/ });
Inspiration
This library was made to be a companion for React Native Testing Library.
It was inspired by jest-dom, the companion library for DTL. We emulated as many of those helpers as we could while keeping in mind the guiding principles.
Other solutions
None known, you can add the first!
Contributors
Thanks goes to these wonderful people (emoji key):
 Brandon Carroll 💻 📖 🚇 ⚠️ |  Santi 💻 |  Marnus Weststrate 💻 |  Matthieu Harlé 💻 |  Alvaro Catalina 💻 |  ilker Yılmaz 📖 |  Donovan Hiland 💻 ⚠️ |
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 12/23 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/validate.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/testing-library/jest-native/validate.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/testing-library/jest-native/validate.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/validate.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/testing-library/jest-native/validate.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/testing-library/jest-native/validate.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/testing-library/jest-native/validate.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/validate.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/testing-library/jest-native/validate.yml/main?enable=pin
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 26 are checked with a SAST tool
Score
4.3
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to @testing-library/jest-native
@teamteanpm2024/dolores-beatae-possimus
1.0.6
react-native-a11y-engine
3.2.8
Make accessibility-related assertions on React Native code using React Test Renderer
@teamteanpm2024/voluptatibus-reprehenderit-odit
1.1.5
[![NPM version][npm-version-image]][npm-url] [![NPM downloads][npm-downloads-image]][npm-downloads-url] [![MIT License][license-image]][license-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][coveralls-image]][coveralls-url] [![FOSSA
@npmtuanmap/recusandae-recusandae-nam-et
7.12.191