From ba8a8ce50c08b922b99217792f550316d38074fa Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 28 Jul 2020 11:03:15 +0200 Subject: [PATCH 1/5] fix: package reference in docs --- README.md | 4 ++-- pure.js | 2 +- website/docs/API.md | 24 ++++++++++++------------ website/docs/GettingStarted.md | 2 +- website/docs/Queries.md | 20 ++++++++++---------- website/docs/ReactNavigation.md | 2 +- website/docs/ReduxIntegration.md | 4 ++-- 7 files changed, 29 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 4b5bbc583..ea5f84a06 100644 --- a/README.md +++ b/README.md @@ -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 `@testing-library/react-native` 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', () => { diff --git a/pure.js b/pure.js index bced0b756..597240bc6 100644 --- a/pure.js +++ b/pure.js @@ -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'); diff --git a/website/docs/API.md b/website/docs/API.md index 37fdff2ad..4bfcabb19 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -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(); ``` @@ -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( 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(); @@ -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(); @@ -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(
); 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(); const submitButtons = queryAllByText('submit'); diff --git a/website/docs/GettingStarted.md b/website/docs/GettingStarted.md index 9ba8587b9..ea21a7cb4 100644 --- a/website/docs/GettingStarted.md +++ b/website/docs/GettingStarted.md @@ -20,7 +20,7 @@ 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', () => { diff --git a/website/docs/Queries.md b/website/docs/Queries.md index b59b4d3ec..e758f3a4f 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -62,7 +62,7 @@ Returns a `ReactTestInstance` with matching text – may be a string or regular This method will join `` 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(); 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(); 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(); 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(); 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(); 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(); 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(); 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(); 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(); 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(); const element = getByA11yValue({ min: 40 }); diff --git a/website/docs/ReactNavigation.md b/website/docs/ReactNavigation.md index ea946611d..e05fd04c6 100644 --- a/website/docs/ReactNavigation.md +++ b/website/docs/ReactNavigation.md @@ -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'; diff --git a/website/docs/ReduxIntegration.md b/website/docs/ReduxIntegration.md index 349922426..7cb6f7426 100644 --- a/website/docs/ReduxIntegration.md +++ b/website/docs/ReduxIntegration.md @@ -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'; From bed90cd2fec6fee6dc6df300c6992d3514ba4591 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 28 Jul 2020 11:09:05 +0200 Subject: [PATCH 2/5] fix: more references to package name --- .github/ISSUE_TEMPLATE/bug_report.md | 4 ++-- CONTRIBUTING.md | 2 +- README.md | 6 +++--- src/helpers/errors.js | 2 +- website/docs/API.md | 4 ++-- website/docs/GettingStarted.md | 6 +++--- website/docs/Queries.md | 2 +- website/docs/ReactNavigation.md | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 013127896..366ce7186 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -34,5 +34,5 @@ labels: 'bug report' \ No newline at end of file + `npx envinfo --npmPackages react,react-native,react-test-renderer,@testing-library/react-native` +--> diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c662de50c..5951059da 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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. diff --git a/README.md b/README.md index ea5f84a06..2dcf1261b 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/src/helpers/errors.js b/src/helpers/errors.js index df76871cf..cd70d8518 100644 --- a/src/helpers/errors.js +++ b/src/helpers/errors.js @@ -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; diff --git a/website/docs/API.md b/website/docs/API.md index 4bfcabb19..acfaeb230 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -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 `@testing-library/react-native` along with usage examples. ## `render` @@ -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); diff --git a/website/docs/GettingStarted.md b/website/docs/GettingStarted.md index ea21a7cb4..aad4b303a 100644 --- a/website/docs/GettingStarted.md +++ b/website/docs/GettingStarted.md @@ -13,7 +13,7 @@ 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 `@testing-library/react-native` 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/). @@ -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! diff --git a/website/docs/Queries.md b/website/docs/Queries.md index e758f3a4f..d4c095a9d 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -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.
Queries helpful in unit testing diff --git a/website/docs/ReactNavigation.md b/website/docs/ReactNavigation.md index e05fd04c6..f76bd88b2 100644 --- a/website/docs/ReactNavigation.md +++ b/website/docs/ReactNavigation.md @@ -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) From cadb2eeea7728e2d65a8cc8b816bf3ecdb6c8b31 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 28 Jul 2020 11:22:16 +0200 Subject: [PATCH 3/5] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Pierzchała --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2dcf1261b..a3d6fba2a 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ You finally want to approach testing using only best practices, while Enzyme may ## This solution -The `@testing-library/react-native` 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. From a7c62dcf32db138794d178644b12c8d8c0f1f596 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 28 Jul 2020 11:22:23 +0200 Subject: [PATCH 4/5] Update website/docs/GettingStarted.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Pierzchała --- website/docs/GettingStarted.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/GettingStarted.md b/website/docs/GettingStarted.md index aad4b303a..0695b73c4 100644 --- a/website/docs/GettingStarted.md +++ b/website/docs/GettingStarted.md @@ -13,7 +13,7 @@ You finally want to approach testing using only best practices, while Enzyme may ## This solution -The `@testing-library/react-native` 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/). From 399e889d7545df57e5d25587a0143bf6f743eca9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Tue, 28 Jul 2020 11:39:20 +0200 Subject: [PATCH 5/5] Update website/docs/API.md --- website/docs/API.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/API.md b/website/docs/API.md index acfaeb230..540717a3b 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -3,7 +3,7 @@ id: api title: API --- -This page gathers public API of `@testing-library/react-native` along with usage examples. +This page gathers public API of React Native Testing Library along with usage examples. ## `render`