Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions README-v13.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@

## The problem

You want to write maintainable tests for your React Native 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 tests 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.
You want to write maintainable tests for your React Native components. Your tests should avoid implementation details and focus on giving you confidence. They should remain maintainable so refactors (changes to implementation but not functionality) don't break your tests and slow you and your team down.

## This solution

The React Native Testing Library (RNTL) is a comprehensive solution for testing React Native components. It provides React Native runtime simulation on top of `react-test-renderer`, in a way that encourages better testing practices. Its primary guiding principle is:
The React Native Testing Library (RNTL) tests React Native components. It simulates the React Native runtime on top of `react-test-renderer` and 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.

Expand Down Expand Up @@ -48,8 +48,8 @@ You can use the built-in Jest matchers automatically by having any import from `
import { render, screen, userEvent } from '@testing-library/react-native';
import { QuestionsBoard } from '../QuestionsBoard';

// It is recommended to use userEvent with fake timers
// Some events involve duration so your tests may take a long time to run.
// Use userEvent with fake timers
// Some events involve duration, so tests may take a long time to run.
jest.useFakeTimers();

test('form submits two answers', async () => {
Expand Down Expand Up @@ -81,33 +81,33 @@ You can find the source of `QuestionsBoard` component and this example [here](ht

React Native Testing Library consists of following APIs:

- [`render` function](https://callstack.github.io/react-native-testing-library/docs/api/render) - render your UI components for testing purposes
- [`screen` object](https://callstack.github.io/react-native-testing-library/docs/api/screen) - access rendered UI:
- [Queries](https://callstack.github.io/react-native-testing-library/docs/api/queries) - find rendered components by various predicates: role, text, test ids, etc
- Lifecycle methods: [`rerender`](https://callstack.github.io/react-native-testing-library/docs/api/screen#rerender), [`unmount`](https://callstack.github.io/react-native-testing-library/docs/api/screen#unmount)
- Helpers: [`debug`](https://callstack.github.io/react-native-testing-library/docs/api/screen#debug), [`toJSON`](https://callstack.github.io/react-native-testing-library/docs/api/screen#tojson), [`root`](https://callstack.github.io/react-native-testing-library/docs/api/screen#root)
- [Jest matchers](https://callstack.github.io/react-native-testing-library/docs/api/jest-matchers) - validate assumptions about your UI
- [User Event](https://callstack.github.io/react-native-testing-library/docs/api/events/user-event) - simulate common user interactions like [`press`](https://callstack.github.io/react-native-testing-library/docs/api/events/user-event#press) or [`type`](https://callstack.github.io/react-native-testing-library/docs/api/events/user-event#type) in a realistic way
- [Fire Event](https://callstack.github.io/react-native-testing-library/docs/api/events/fire-event) - simulate any component event in a simplified way
- [`renderHook` function](https://callstack.github.io/react-native-testing-library/docs/api/misc/render-hook) - render hooks for testing purposes
- [`render` function](https://oss.callstack.com/react-native-testing-library/docs/api/render) - render your UI components for testing purposes
- [`screen` object](https://oss.callstack.com/react-native-testing-library/docs/api/screen) - access rendered UI:
- [Queries](https://oss.callstack.com/react-native-testing-library/docs/api/queries) - find rendered components by various predicates: role, text, test ids, etc
- Lifecycle methods: [`rerender`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#rerender), [`unmount`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#unmount)
- Helpers: [`debug`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#debug), [`toJSON`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#tojson), [`root`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#root)
- [Jest matchers](https://oss.callstack.com/react-native-testing-library/docs/api/jest-matchers) - validate assumptions about your UI
- [User Event](https://oss.callstack.com/react-native-testing-library/docs/api/events/user-event) - simulate common user interactions like [`press`](https://oss.callstack.com/react-native-testing-library/docs/api/events/user-event#press) or [`type`](https://oss.callstack.com/react-native-testing-library/docs/api/events/user-event#type)
- [Fire Event](https://oss.callstack.com/react-native-testing-library/docs/api/events/fire-event) - simulate any component event
- [`renderHook` function](https://oss.callstack.com/react-native-testing-library/docs/api/misc/render-hook) - render hooks for testing purposes
- Miscellaneous APIs:
- [Async utils](https://callstack.github.io/react-native-testing-library/docs/api/misc/async): `findBy*` queries, `waitFor`, `waitForElementToBeRemoved`
- [Configuration](https://callstack.github.io/react-native-testing-library/docs/api/misc/config): `configure`, `resetToDefaults`
- [Accessibility](https://callstack.github.io/react-native-testing-library/docs/api/misc/accessibility): `isHiddenFromAccessibility`
- [Other](https://callstack.github.io/react-native-testing-library/docs/api/misc/other): `within`, `act`, `cleanup`
- [Async utils](https://oss.callstack.com/react-native-testing-library/docs/api/misc/async): `findBy*` queries, `waitFor`, `waitForElementToBeRemoved`
- [Configuration](https://oss.callstack.com/react-native-testing-library/docs/api/misc/config): `configure`, `resetToDefaults`
- [Accessibility](https://oss.callstack.com/react-native-testing-library/docs/api/misc/accessibility): `isHiddenFromAccessibility`
- [Other](https://oss.callstack.com/react-native-testing-library/docs/api/misc/other): `within`, `act`, `cleanup`

## Migration Guides

- [Migration to 13.0](https://callstack.github.io/react-native-testing-library/docs/migration/v13)
- [Migration to built-in Jest Matchers](https://callstack.github.io/react-native-testing-library/docs/migration/jest-matchers)
- [Migration to 13.0](https://oss.callstack.com/react-native-testing-library/docs/migration/v13)
- [Migration to built-in Jest Matchers](https://oss.callstack.com/react-native-testing-library/docs/migration/jest-matchers)

## Troubleshooting

- [Troubleshooting guide](https://callstack.github.io/react-native-testing-library/docs/guides/troubleshooting)
- [Troubleshooting guide](https://oss.callstack.com/react-native-testing-library/docs/guides/troubleshooting)

## Community Resources

Check out our list of [Community Resources about RNTL](https://callstack.github.io/react-native-testing-library/docs/guides/community-resources).
Check out our list of [Community Resources about RNTL](https://oss.callstack.com/react-native-testing-library/docs/guides/community-resources).

## Made with ❤️ at Callstack

Expand Down
50 changes: 18 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@

## The problem

You want to write maintainable tests for your React Native 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 tests 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.
You want to write maintainable tests for your React Native components. Your tests should avoid implementation details and focus on giving you confidence. They should remain maintainable so refactors (changes to implementation but not functionality) don't break your tests and slow you and your team down.

## This solution

The React Native Testing Library (RNTL) is a comprehensive solution for testing React Native components. It provides React Native runtime simulation on top of `test-renderer`, in a way that encourages better testing practices. Its primary guiding principle is:
The React Native Testing Library (RNTL) tests React Native components. It simulates the React Native runtime on top of [Test Renderer](https://github.com/mdjastrzebski/test-renderer) and 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.

Expand All @@ -34,20 +34,12 @@ This project is inspired by [React Testing Library](https://github.com/testing-l
Open a Terminal in your project's folder and run:

```sh
# Yarn install:
yarn add --dev @testing-library/react-native@alpha

# NPM install
npm install --save-dev @testing-library/react-native@alpha
```

This library has a `peerDependencies` listing for [Test Renderer](https://github.com/mdjastrzebski/test-renderer). Make sure to install it as a dev dependency:

```sh
# Yarn install:
yarn add --dev test-renderer

# NPM install
npm install --save-dev test-renderer
```

Expand All @@ -61,10 +53,6 @@ You can use the built-in Jest matchers automatically by having any import from `
import { render, screen, userEvent } from '@testing-library/react-native';
import { QuestionsBoard } from '../QuestionsBoard';

// It is recommended to use userEvent with fake timers
// Some events involve duration so your tests may take a long time to run.
jest.useFakeTimers();

test('form submits two answers', async () => {
const questions = ['q1', 'q2'];
const onSubmit = jest.fn();
Expand Down Expand Up @@ -94,34 +82,32 @@ You can find the source of `QuestionsBoard` component and this example [here](ht

React Native Testing Library consists of following APIs:

- [`render` function](https://callstack.github.io/react-native-testing-library/docs/api/render) - render your UI components for testing purposes
- [`screen` object](https://callstack.github.io/react-native-testing-library/docs/api/screen) - access rendered UI:
- [Queries](https://callstack.github.io/react-native-testing-library/docs/api/queries) - find rendered components by various predicates: role, text, test ids, etc
- Lifecycle methods: [`rerender`](https://callstack.github.io/react-native-testing-library/docs/api/screen#rerender), [`unmount`](https://callstack.github.io/react-native-testing-library/docs/api/screen#unmount)
- Helpers: [`debug`](https://callstack.github.io/react-native-testing-library/docs/api/screen#debug), [`toJSON`](https://callstack.github.io/react-native-testing-library/docs/api/screen#tojson), [`root`](https://callstack.github.io/react-native-testing-library/docs/api/screen#root), [`container`](https://callstack.github.io/react-native-testing-library/docs/api/screen#container)
- [Jest matchers](https://callstack.github.io/react-native-testing-library/docs/api/jest-matchers) - validate assumptions about your UI
- [User Event](https://callstack.github.io/react-native-testing-library/docs/api/events/user-event) - simulate common user interactions like [`press`](https://callstack.github.io/react-native-testing-library/docs/api/events/user-event#press) or [`type`](https://callstack.github.io/react-native-testing-library/docs/api/events/user-event#type) in a realistic way
- [Fire Event](https://callstack.github.io/react-native-testing-library/docs/api/events/fire-event) - simulate any component event in a simplified way
- [`renderHook` function](https://callstack.github.io/react-native-testing-library/docs/api/misc/render-hook) - render hooks for testing purposes
- [`render` function](https://oss.callstack.com/react-native-testing-library/docs/api/render) - render your UI components for testing purposes
- [`screen` object](https://oss.callstack.com/react-native-testing-library/docs/api/screen) - access rendered UI:
- [Queries](https://oss.callstack.com/react-native-testing-library/docs/api/queries) - find rendered components by various predicates: role, text, test ids, etc
- Lifecycle methods: [`rerender`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#rerender), [`unmount`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#unmount)
- Helpers: [`debug`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#debug), [`toJSON`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#tojson), [`root`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#root), [`container`](https://oss.callstack.com/react-native-testing-library/docs/api/screen#container)
- [Jest matchers](https://oss.callstack.com/react-native-testing-library/docs/api/jest-matchers) - validate assumptions about your UI
- [User Event](https://oss.callstack.com/react-native-testing-library/docs/api/events/user-event) - simulate common user interactions like [`press`](https://oss.callstack.com/react-native-testing-library/docs/api/events/user-event#press) or [`type`](https://oss.callstack.com/react-native-testing-library/docs/api/events/user-event#type)
- [Fire Event](https://oss.callstack.com/react-native-testing-library/docs/api/events/fire-event) - simulate any component event
- [`renderHook` function](https://oss.callstack.com/react-native-testing-library/docs/api/misc/render-hook) - render hooks for testing purposes
- Miscellaneous APIs:
- [Async utils](https://callstack.github.io/react-native-testing-library/docs/api/misc/async): `findBy*` queries, `waitFor`, `waitForElementToBeRemoved`
- [Configuration](https://callstack.github.io/react-native-testing-library/docs/api/misc/config): `configure`, `resetToDefaults`
- [Accessibility](https://callstack.github.io/react-native-testing-library/docs/api/misc/accessibility): `isHiddenFromAccessibility`
- [Other](https://callstack.github.io/react-native-testing-library/docs/api/misc/other): `within`, `act`, `cleanup`
- [Async utils](https://oss.callstack.com/react-native-testing-library/docs/api/misc/async): `findBy*` queries, `waitFor`, `waitForElementToBeRemoved`
- [Configuration](https://oss.callstack.com/react-native-testing-library/docs/api/misc/config): `configure`, `resetToDefaults`
- [Accessibility](https://oss.callstack.com/react-native-testing-library/docs/api/misc/accessibility): `isHiddenFromAccessibility`
- [Other](https://oss.callstack.com/react-native-testing-library/docs/api/misc/other): `within`, `act`, `cleanup`

## Migration Guides

- **[Migration to 14.0](https://callstack.github.io/react-native-testing-library/docs/migration/v14)** - Drops React 18, async APIs by default
- [Migration to 13.0](https://callstack.github.io/react-native-testing-library/docs/migration/v13)
- [Migration to built-in Jest Matchers](https://callstack.github.io/react-native-testing-library/docs/migration/jest-matchers)
- **[Migration to 14.0](https://oss.callstack.com/react-native-testing-library/docs/migration/v14)** - Drops React 18, async APIs by default

## Troubleshooting

- [Troubleshooting guide](https://callstack.github.io/react-native-testing-library/docs/guides/troubleshooting)
- [Troubleshooting guide](https://oss.callstack.com/react-native-testing-library/docs/guides/troubleshooting)

## Community Resources

Check out our list of [Community Resources about RNTL](https://callstack.github.io/react-native-testing-library/docs/guides/community-resources).
Check out our list of [Community Resources about RNTL](https://oss.callstack.com/react-native-testing-library/docs/guides/community-resources).

## Made with ❤️ at Callstack

Expand Down
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"type": "git",
"url": "https://www.github.com/callstack/react-native-testing-library.git"
},
"homepage": "https://callstack.github.io/react-native-testing-library",
"homepage": "https://oss.callstack.com/react-native-testing-library",
"author": "Michał Pierzchała <thymikee@gmail.com> (https://github.com/thymikee), Maciej Jastrzębski <mdjastrzebski@gmail.com> (https://github.com/mdjastrzebski)",
"contributors": [
"Augustin Le Fèvre <augustin.le-fevre@klarna.com> (https://github.com/AugustinLF)",
Expand Down Expand Up @@ -39,7 +39,8 @@
"build": "yarn clean && yarn build:js && yarn build:ts",
"release": "release-it",
"release:rc": "release-it --preRelease=rc",
"release:beta": "release-it --preRelease=beta"
"release:beta": "release-it --preRelease=beta",
"release:codemods": "release-it --preRelease=alpha"
},
"files": [
"build/",
Expand Down
Loading