mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
78 lines
2.7 KiB
Markdown
78 lines
2.7 KiB
Markdown
import { PackageManagerTabs } from '@rspress/core/theme';
|
|
|
|
# Quick Start
|
|
|
|
## Installation
|
|
|
|
Open a Terminal in your project's folder and run:
|
|
|
|
<PackageManagerTabs
|
|
command={{
|
|
npm: 'npm install -D @testing-library/react-native',
|
|
yarn: 'yarn add -D @testing-library/react-native',
|
|
pnpm: 'pnpm add -D @testing-library/react-native',
|
|
bun: 'bun add -D @testing-library/react-native',
|
|
}}
|
|
/>
|
|
|
|
This library has a peer dependency on [Test Renderer](https://github.com/mdjastrzebski/test-renderer). Make sure to install it:
|
|
|
|
<PackageManagerTabs
|
|
command={{
|
|
npm: 'npm install -D test-renderer',
|
|
yarn: 'yarn add -D test-renderer',
|
|
pnpm: 'pnpm add -D test-renderer',
|
|
bun: 'bun add -D test-renderer',
|
|
}}
|
|
/>
|
|
|
|
Test Renderer has better compatibility with React 19 and improved type safety compared to the deprecated [React Test Renderer](https://reactjs.org/docs/test-renderer.html).
|
|
|
|
## Agent docs in the package
|
|
|
|
RNTL ships package-specific documentation for coding agents in `node_modules/@testing-library/react-native/docs/`.
|
|
Add this snippet to your project's `AGENTS.md` or `CLAUDE.md` file so agents use the docs for the installed package version:
|
|
|
|
```md
|
|
# React Native Testing Library in this project
|
|
|
|
This project uses `@testing-library/react-native`. Its APIs and testing conventions can differ from your training data.
|
|
Before writing or changing RNTL tests, read the relevant guide in
|
|
`node_modules/@testing-library/react-native/docs/`, starting with
|
|
`node_modules/@testing-library/react-native/docs/guides/llm-guidelines.md`.
|
|
Prefer those package docs over stale assumptions, and follow deprecation notices.
|
|
```
|
|
|
|
### Jest matchers
|
|
|
|
RNTL automatically extends Jest with React Native-specific matchers. The only thing you need to do is to import anything from `@testing-library/react-native` which you already need to do to access the `render` function.
|
|
|
|
### ESLint plugin
|
|
|
|
Set up [`eslint-plugin-testing-library`](https://github.com/testing-library/eslint-plugin-testing-library) to avoid common Testing Library mistakes and bad practices.
|
|
|
|
Install the plugin (assuming you already have `eslint` installed & configured):
|
|
|
|
<PackageManagerTabs
|
|
command={{
|
|
npm: 'npm install -D eslint-plugin-testing-library',
|
|
yarn: 'yarn add -D eslint-plugin-testing-library',
|
|
pnpm: 'pnpm add -D eslint-plugin-testing-library',
|
|
bun: 'bun add -D eslint-plugin-testing-library',
|
|
}}
|
|
/>
|
|
|
|
Then, add this to your ESLint config (e.g., `.eslintrc.js`). Extend the `react` plugin:
|
|
|
|
```js title=.eslintrc.js
|
|
module.exports = {
|
|
overrides: [
|
|
{
|
|
// Test files only
|
|
files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
|
|
extends: ['plugin:testing-library/react'],
|
|
},
|
|
],
|
|
};
|
|
```
|