Skip to content

fix: update package name in docs #462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 28, 2020
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
4 changes: 2 additions & 2 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
-->
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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!
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion pure.js
Original file line number Diff line number Diff line change
@@ -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');
2 changes: 1 addition & 1 deletion src/helpers/errors.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
28 changes: 14 additions & 14 deletions website/docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand All @@ -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', () => {
Expand All @@ -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 />);
```
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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();
Expand All @@ -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();

Expand Down Expand Up @@ -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();

Expand All @@ -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';
Expand All @@ -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 = {
Expand All @@ -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(
Expand Down Expand Up @@ -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 />);
Expand Down Expand Up @@ -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 />);
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand Down
8 changes: 4 additions & 4 deletions website/docs/GettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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!
Expand Down
22 changes: 11 additions & 11 deletions website/docs/Queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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']);
Expand All @@ -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');
Expand All @@ -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 });
Expand All @@ -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 });
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions website/docs/ReactNavigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand 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)
Expand All @@ -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';

Expand Down
4 changes: 2 additions & 2 deletions website/docs/ReduxIntegration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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';

Expand Down