mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
fix: update package name in docs (#462)
* fix: package reference in docs * fix: more references to package name * Update README.md Co-authored-by: Michał Pierzchała <thymikee@gmail.com> * Update website/docs/GettingStarted.md Co-authored-by: Michał Pierzchała <thymikee@gmail.com> * Update website/docs/API.md Co-authored-by: Michał Pierzchała <thymikee@gmail.com>
This commit is contained in:
Maciej Jastrzebski
committed by
Michał Pierzchała
Michał Pierzchała
parent
3f88cacbc6
commit
37f0c42a1f
@@ -34,5 +34,5 @@ labels: 'bug report'
|
||||
<!--
|
||||
run following command in terminal of your root project and paste the result down
|
||||
|
||||
`npx envinfo --npmPackages react,react-native,react-test-renderer,react-native-testing-library`
|
||||
-->
|
||||
`npx envinfo --npmPackages react,react-native,react-test-renderer,@testing-library/react-native`
|
||||
-->
|
||||
|
||||
+1
-1
@@ -63,4 +63,4 @@ You can report issues on our [bug tracker](https://github.com/callstack/react-na
|
||||
|
||||
## License
|
||||
|
||||
By contributing to `react-native-testing-library`, you agree that your contributions will be licensed under its **MIT** license.
|
||||
By contributing to `@testing-library/react-native`, you agree that your contributions will be licensed under its **MIT** license.
|
||||
|
||||
@@ -27,14 +27,14 @@ You finally want to approach testing using only best practices, while Enzyme may
|
||||
|
||||
## This solution
|
||||
|
||||
The `react-native-testing-library` is a lightweight solution for testing your React Native components. It provides light utility functions on top of `react-test-renderer` letting you always be up to date with latest React features and write any component tests you like. But really not any, it prevents you from testing implementation details because we stand this is a very bad practice.
|
||||
The React Native Testing Library is a lightweight solution for testing your React Native components. It provides light utility functions on top of `react-test-renderer` letting you always be up to date with latest React features and write any component tests you like. But really not any, it prevents you from testing implementation details because we stand this is a very bad practice.
|
||||
|
||||
This library is a replacement for [Enzyme](http://airbnb.io/enzyme/). It is tested to work with Jest, but it should work with other test runners as well.
|
||||
|
||||
## Example
|
||||
|
||||
```jsx
|
||||
import { render, fireEvent } from 'react-native-testing-library';
|
||||
import { render, fireEvent } from '@testing-library/react-native';
|
||||
import { QuestionsBoard } from '../QuestionsBoard';
|
||||
|
||||
test('form submits two answers', () => {
|
||||
@@ -67,13 +67,13 @@ Open a Terminal in your project's folder and run:
|
||||
#### Using `yarn`
|
||||
|
||||
```sh
|
||||
yarn add --dev react-native-testing-library
|
||||
yarn add --dev @testing-library/react-native
|
||||
```
|
||||
|
||||
#### Using `npm`
|
||||
|
||||
```sh
|
||||
npm install --save-dev react-native-testing-library
|
||||
npm install --save-dev @testing-library/react-native
|
||||
```
|
||||
|
||||
This library has a peerDependencies listing for `react-test-renderer` and, of course, `react`. Make sure to install them too!
|
||||
@@ -115,7 +115,7 @@ As you may have noticed, it's not tied to React Native at all – you can safely
|
||||
|
||||
## API / Usage
|
||||
|
||||
The [public API](https://callstack.github.io/react-native-testing-library/docs/api) of `react-native-testing-library` is focused around these essential methods:
|
||||
The [public API](https://callstack.github.io/react-native-testing-library/docs/api) of `@testing-library/react-native` is focused around these essential methods:
|
||||
|
||||
- [`render`](https://callstack.github.io/react-native-testing-library/docs/api#render) – deeply renders given React element and returns helpers to query the output components.
|
||||
- [`fireEvent`](https://callstack.github.io/react-native-testing-library/docs/api#fireevent) - invokes named event handler on the element.
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// makes it so people can import from 'react-native-testing-library/pure'
|
||||
// makes it so people can import from '@testing-library/react-native/pure'
|
||||
module.exports = require('./build/pure');
|
||||
|
||||
@@ -33,7 +33,7 @@ export function printDeprecationWarning(functionName: string) {
|
||||
|
||||
console.warn(`
|
||||
Deprecation Warning:
|
||||
Use of ${functionName} is not recommended and will be deleted in future versions of react-native-testing-library.
|
||||
Use of ${functionName} is not recommended and will be deleted in future versions of @testing-library/react-native.
|
||||
`);
|
||||
|
||||
warned[functionName] = true;
|
||||
|
||||
+14
-14
@@ -3,7 +3,7 @@ id: api
|
||||
title: API
|
||||
---
|
||||
|
||||
This page gathers public API of `react-native-testing-library` along with usage examples.
|
||||
This page gathers public API of React Native Testing Library along with usage examples.
|
||||
|
||||
## `render`
|
||||
|
||||
@@ -26,7 +26,7 @@ function render(
|
||||
Deeply renders given React element and returns helpers to query the output components structure.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
import { QuestionsBoard } from '../QuestionsBoard';
|
||||
|
||||
test('should verify two questions', () => {
|
||||
@@ -50,7 +50,7 @@ See [Queries](./Queries.md) for a complete list.
|
||||
#### Example
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByText, queryByA11yStates } = render(<Component />);
|
||||
```
|
||||
@@ -134,7 +134,7 @@ Please note that this is done automatically if the testing framework you're usin
|
||||
For example, if you're using the `jest` testing framework, then you would need to use the `afterEach` hook like so:
|
||||
|
||||
```jsx
|
||||
import { cleanup, render } from 'react-native-testing-library/pure';
|
||||
import { cleanup, render } from '@testing-library/react-native/pure';
|
||||
import { View } from 'react-native';
|
||||
|
||||
afterEach(cleanup);
|
||||
@@ -173,7 +173,7 @@ Fires native-like event with data.
|
||||
Invokes a given event handler (whether native or custom) on the element, bubbling to the root of the rendered tree.
|
||||
|
||||
```jsx
|
||||
import { render, fireEvent } from 'react-native-testing-library';
|
||||
import { render, fireEvent } from '@testing-library/react-native';
|
||||
|
||||
test('fire changeText event', () => {
|
||||
const onEventMock = jest.fn();
|
||||
@@ -192,7 +192,7 @@ An example using `fireEvent` with native events that aren't already aliased by t
|
||||
|
||||
```jsx
|
||||
import { TextInput, View } from 'react-native';
|
||||
import { fireEvent, render } from 'react-native-testing-library';
|
||||
import { fireEvent, render } from '@testing-library/react-native';
|
||||
|
||||
const onBlurMock = jest.fn();
|
||||
|
||||
@@ -220,7 +220,7 @@ Invokes `press` event handler on the element or parent element in the tree.
|
||||
|
||||
```jsx
|
||||
import { View, Text, TouchableOpacity } from 'react-native';
|
||||
import { render, fireEvent } from 'react-native-testing-library';
|
||||
import { render, fireEvent } from '@testing-library/react-native';
|
||||
|
||||
const onPressMock = jest.fn();
|
||||
|
||||
@@ -242,7 +242,7 @@ Invokes `changeText` event handler on the element or parent element in the tree.
|
||||
|
||||
```jsx
|
||||
import { View, TextInput } from 'react-native';
|
||||
import { render, fireEvent } from 'react-native-testing-library';
|
||||
import { render, fireEvent } from '@testing-library/react-native';
|
||||
|
||||
const onChangeTextMock = jest.fn();
|
||||
const CHANGE_TEXT = 'content';
|
||||
@@ -264,7 +264,7 @@ Invokes `scroll` event handler on the element or parent element in the tree.
|
||||
|
||||
```jsx
|
||||
import { ScrollView, Text } from 'react-native';
|
||||
import { render, fireEvent } from 'react-native-testing-library';
|
||||
import { render, fireEvent } from '@testing-library/react-native';
|
||||
|
||||
const onScrollMock = jest.fn();
|
||||
const eventData = {
|
||||
@@ -288,7 +288,7 @@ fireEvent.scroll(getByText('scroll-view'), eventData);
|
||||
|
||||
```jsx
|
||||
import { FlatList, View } from 'react-native';
|
||||
import { render, fireEvent } from 'react-native-testing-library';
|
||||
import { render, fireEvent } from '@testing-library/react-native';
|
||||
|
||||
const onEndReached = jest.fn();
|
||||
const { getByType } = render(
|
||||
@@ -337,7 +337,7 @@ function waitFor<T>(
|
||||
Waits for non-deterministic periods of time until your element appears or times out. `waitFor` periodically calls `expectation` every `interval` milliseconds to determine whether the element appeared or not.
|
||||
|
||||
```jsx
|
||||
import { render, waitFor } from 'react-native-testing-library';
|
||||
import { render, waitFor } from '@testing-library/react-native';
|
||||
|
||||
test('waiting for an Banana to be ready', async () => {
|
||||
const { getByText } = render(<Banana />);
|
||||
@@ -371,7 +371,7 @@ Waits for non-deterministic periods of time until queried element is removed or
|
||||
import {
|
||||
render,
|
||||
waitForElementToBeRemoved,
|
||||
} from 'react-native-testing-library';
|
||||
} from '@testing-library/react-native';
|
||||
|
||||
test('waiting for an Banana to be removed', async () => {
|
||||
const { getByText } = render(<Banana />);
|
||||
@@ -425,7 +425,7 @@ Use cases for scoped queries include:
|
||||
Each of the get APIs listed in the render section above have a complimentary query API. The get APIs will throw errors if a proper node cannot be found. This is normally the desired effect. However, if you want to make an assertion that an element is not present in the hierarchy, then you can use the query API instead:
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { queryByText } = render(<Form />);
|
||||
const submitButton = queryByText('submit');
|
||||
@@ -437,7 +437,7 @@ expect(submitButton).toBeNull(); // it doesn't exist
|
||||
Each of the query APIs have a corresponding queryAll version that always returns an Array of matching nodes. getAll is the same but throws when the array has a length of 0.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { queryAllByText } = render(<Forms />);
|
||||
const submitButtons = queryAllByText('submit');
|
||||
|
||||
@@ -13,14 +13,14 @@ You finally want to approach testing using only best practices, while Enzyme may
|
||||
|
||||
## This solution
|
||||
|
||||
The `react-native-testing-library` is a lightweight solution for testing your React Native components. It provides light utility functions on top of `react-test-renderer` letting you always be up to date with latest React features and write any component tests you like. It also prevents you from testing implementation details because we believe this is a very bad practice.
|
||||
The React Native Testing Library is a lightweight solution for testing your React Native components. It provides light utility functions on top of `react-test-renderer` letting you always be up to date with latest React features and write any component tests you like. It also prevents you from testing implementation details because we believe this is a very bad practice.
|
||||
|
||||
This library is a replacement for [Enzyme](http://airbnb.io/enzyme/).
|
||||
|
||||
## Example
|
||||
|
||||
```jsx
|
||||
import { render, fireEvent } from 'react-native-testing-library';
|
||||
import { render, fireEvent } from '@testing-library/react-native';
|
||||
import { QuestionsBoard } from '../QuestionsBoard';
|
||||
|
||||
test('form submits two answers', () => {
|
||||
@@ -53,13 +53,13 @@ Open a Terminal in your project's folder and run:
|
||||
#### Using `yarn`
|
||||
|
||||
```sh
|
||||
yarn add --dev react-native-testing-library
|
||||
yarn add --dev @testing-library/react-native
|
||||
```
|
||||
|
||||
#### Using `npm`
|
||||
|
||||
```sh
|
||||
npm install --save-dev react-native-testing-library
|
||||
npm install --save-dev @testing-library/react-native
|
||||
```
|
||||
|
||||
This library has a peerDependencies listing for `react-test-renderer` and, of course, `react`. Make sure to install them too!
|
||||
|
||||
+11
-11
@@ -62,7 +62,7 @@ Returns a `ReactTestInstance` with matching text – may be a string or regular
|
||||
This method will join `<Text>` siblings to find matches, similarly to [how React Native handles these components](https://facebook.github.io/react-native/docs/text#containers). This will allow for querying for strings that will be visually rendered together, but may be semantically separate React components.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByText } = render(<MyComponent />);
|
||||
const element = getByText('banana');
|
||||
@@ -75,7 +75,7 @@ const element = getByText('banana');
|
||||
Returns a `ReactTestInstance` for a `TextInput` with a matching placeholder – may be a string or regular expression.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByPlaceholderText } = render(<MyComponent />);
|
||||
const element = getByPlaceholderText('username');
|
||||
@@ -88,7 +88,7 @@ const element = getByPlaceholderText('username');
|
||||
Returns a `ReactTestInstance` for a `TextInput` with a matching display value – may be a string or regular expression.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByDisplayValue } = render(<MyComponent />);
|
||||
const element = getByDisplayValue('username');
|
||||
@@ -101,7 +101,7 @@ const element = getByDisplayValue('username');
|
||||
Returns a `ReactTestInstance` with matching `testID` prop.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByTestId } = render(<MyComponent />);
|
||||
const element = getByTestId('unique-id');
|
||||
@@ -120,7 +120,7 @@ Please be mindful when using these API and **treat it as an escape hatch**. Your
|
||||
Returns a `ReactTestInstance` with matching `accessibilityLabel` prop.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByA11yLabel } = render(<MyComponent />);
|
||||
const element = getByA11yLabel('my-label');
|
||||
@@ -135,7 +135,7 @@ const element = getByA11yLabel('my-label');
|
||||
Returns a `ReactTestInstance` with matching `accessibilityHint` prop.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByA11yHint } = render(<MyComponent />);
|
||||
const element = getByA11yHint('my-hint');
|
||||
@@ -149,7 +149,7 @@ const element = getByA11yHint('my-hint');
|
||||
Returns a `ReactTestInstance` with matching `accessibilityStates` prop.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByA11yStates } = render(<MyComponent />);
|
||||
const element = getByA11yStates(['checked']);
|
||||
@@ -165,7 +165,7 @@ const element2 = getByA11yStates('checked');
|
||||
Returns a `ReactTestInstance` with matching `accessibilityRole` prop.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByA11yRole } = render(<MyComponent />);
|
||||
const element = getByA11yRole('button');
|
||||
@@ -179,7 +179,7 @@ const element = getByA11yRole('button');
|
||||
Returns a `ReactTestInstance` with matching `accessibilityState` prop.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByA11yState } = render(<Component />);
|
||||
const element = getByA11yState({ disabled: true });
|
||||
@@ -193,7 +193,7 @@ const element = getByA11yState({ disabled: true });
|
||||
Returns a `ReactTestInstance` with matching `accessibilityValue` prop.
|
||||
|
||||
```jsx
|
||||
import { render } from 'react-native-testing-library';
|
||||
import { render } from '@testing-library/react-native';
|
||||
|
||||
const { getByA11yValue } = render(<Component />);
|
||||
const element = getByA11yValue({ min: 40 });
|
||||
@@ -203,7 +203,7 @@ const element = getByA11yValue({ min: 40 });
|
||||
|
||||
> Use sparingly and responsibly, escape hatches here
|
||||
|
||||
`render` from `react-native-testing-library` exposes additional queries that **should not be used in component integration testing**, but some users (like component library creators) interested in unit testing some components may find helpful.
|
||||
`render` from `@testing-library/react-native` exposes additional queries that **should not be used in component integration testing**, but some users (like component library creators) interested in unit testing some components may find helpful.
|
||||
|
||||
<details>
|
||||
<summary>Queries helpful in unit testing</summary>
|
||||
|
||||
@@ -3,7 +3,7 @@ id: react-navigation
|
||||
title: React Navigation
|
||||
---
|
||||
|
||||
This section deals with integrating `react-native-testing-library` with `react-navigation`, using Jest.
|
||||
This section deals with integrating `@testing-library/react-native` with `react-navigation`, using Jest.
|
||||
|
||||
## Setting up
|
||||
|
||||
@@ -127,7 +127,7 @@ const styles = StyleSheet.create({
|
||||
Install required dev dependencies:
|
||||
|
||||
```
|
||||
$ yarn add -D jest react-native-testing-library
|
||||
$ yarn add -D jest @testing-library/react-native
|
||||
```
|
||||
|
||||
Create your `jest.config.js` file (or place the following properties in your `package.json` as a "jest" property)
|
||||
@@ -154,7 +154,7 @@ Let's a [`AppNavigator.test.js`](https://github.com/callstack/react-native-testi
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import { render, fireEvent } from 'react-native-testing-library';
|
||||
import { render, fireEvent } from '@testing-library/react-native';
|
||||
|
||||
import AppNavigator from '../AppNavigator';
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ For `./components/AddTodo.test.js`
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { cleanup, fireEvent, render } from 'react-native-testing-library';
|
||||
import { cleanup, fireEvent, render } from '@testing-library/react-native';
|
||||
import configureStore from '../store';
|
||||
import AddTodo from './AddTodo';
|
||||
|
||||
@@ -65,7 +65,7 @@ For the `./components/TodoList.js`
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { fireEvent, render } from 'react-native-testing-library';
|
||||
import { fireEvent, render } from '@testing-library/react-native';
|
||||
import configureStore from '../store';
|
||||
import TodoList from './TodoList';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user