From 2fa4038e59ef67f365bd25ecbe678d79d75897c6 Mon Sep 17 00:00:00 2001 From: Christina Landvytovych Date: Wed, 16 Oct 2019 22:52:47 +0300 Subject: [PATCH 1/6] migrate react native testing library to v2 --- website/.gitignore | 26 +- website/README.md | 186 +- website/core/Footer.js | 79 - website/docker/.dockerignore | 2 - website/docker/Dockerfile | 10 - website/docker/docker-compose.yml | 18 - website/docs/API.md | 401 ++ website/docs/GettingStarted.md | 58 + website/docs/Queries.md | 183 + website/docusaurus.config.js | 122 + website/i18n/en.json | 32 - website/package.json | 36 +- website/pages/en/index.js | 100 - website/sidebars.js | 13 + website/sidebars.json | 6 - website/siteConfig.js | 89 - website/src/css/custom.css | 33 + website/src/pages/index.js | 120 + website/src/pages/styles.module.css | 72 + website/src/theme/Footer/index.js | 81 + website/static/css/custom.css | 20 - website/yarn.lock | 9693 ++++++++++++++++++--------- 22 files changed, 7724 insertions(+), 3656 deletions(-) mode change 100644 => 100755 website/.gitignore mode change 100644 => 100755 website/README.md delete mode 100644 website/core/Footer.js delete mode 100644 website/docker/.dockerignore delete mode 100644 website/docker/Dockerfile delete mode 100644 website/docker/docker-compose.yml create mode 100644 website/docs/API.md create mode 100644 website/docs/GettingStarted.md create mode 100644 website/docs/Queries.md create mode 100755 website/docusaurus.config.js delete mode 100644 website/i18n/en.json mode change 100644 => 100755 website/package.json delete mode 100644 website/pages/en/index.js create mode 100755 website/sidebars.js delete mode 100644 website/sidebars.json delete mode 100644 website/siteConfig.js create mode 100755 website/src/css/custom.css create mode 100755 website/src/pages/index.js create mode 100755 website/src/pages/styles.module.css create mode 100755 website/src/theme/Footer/index.js delete mode 100644 website/static/css/custom.css diff --git a/website/.gitignore b/website/.gitignore old mode 100644 new mode 100755 index 5395ea795..1b34df512 --- a/website/.gitignore +++ b/website/.gitignore @@ -1,12 +1,20 @@ -.DS_Store +# dependencies +/node_modules + +# production +/build -node_modules +# generated files +.docusaurus +.cache-loader -lib/core/metadata.js -lib/core/MetadataBlog.js +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local -website/translated_docs -website/build/ -website/yarn.lock -website/node_modules -website/i18n/* +npm-debug.log* +yarn-debug.log* +yarn-error.log* \ No newline at end of file diff --git a/website/README.md b/website/README.md old mode 100644 new mode 100755 index f3da77ff3..71505291a --- a/website/README.md +++ b/website/README.md @@ -1,193 +1,33 @@ -This website was created with [Docusaurus](https://docusaurus.io/). +# Website -# What's In This Document +This website is built using Docusaurus 2, a modern static website generator. -* [Get Started in 5 Minutes](#get-started-in-5-minutes) -* [Directory Structure](#directory-structure) -* [Editing Content](#editing-content) -* [Adding Content](#adding-content) -* [Full Documentation](#full-documentation) +### Installation -# Get Started in 5 Minutes - -1. Make sure all the dependencies for the website are installed: - -```sh -# Install dependencies -$ yarn -``` -2. Run your dev server: - -```sh -# Start the site -$ yarn start -``` - -## Directory Structure - -Your project file structure should look something like this - -``` -my-docusaurus/ - docs/ - doc-1.md - doc-2.md - doc-3.md - website/ - blog/ - 2016-3-11-oldest-post.md - 2017-10-24-newest-post.md - core/ - node_modules/ - pages/ - static/ - css/ - img/ - package.json - sidebar.json - siteConfig.js ``` - -# Editing Content - -## Editing an existing docs page - -Edit docs by navigating to `docs/` and editing the corresponding document: - -`docs/doc-to-be-edited.md` - -```markdown ---- -id: page-needs-edit -title: This Doc Needs To Be Edited ---- - -Edit me... -``` - -For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) - -## Editing an existing blog post - -Edit blog posts by navigating to `website/blog` and editing the corresponding post: - -`website/blog/post-to-be-edited.md` -```markdown ---- -id: post-needs-edit -title: This Blog Post Needs To Be Edited ---- - -Edit me... +$ yarn ``` -For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) - -# Adding Content - -## Adding a new docs page to an existing sidebar - -1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`: - -```md ---- -id: newly-created-doc -title: This Doc Needs To Be Edited ---- +### Local Development -My new content here.. ``` - -1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`: - -```javascript -// Add newly-created-doc to the Getting Started category of docs -{ - "docs": { - "Getting Started": [ - "quick-start", - "newly-created-doc" // new doc here - ], - ... - }, - ... -} +$ yarn start ``` -For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) +This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. -## Adding a new blog post +### Build -1. Make sure there is a header link to your blog in `website/siteConfig.js`: - -`website/siteConfig.js` -```javascript -headerLinks: [ - ... - { blog: true, label: 'Blog' }, - ... -] ``` - -2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`: - -`website/blog/2018-05-21-New-Blog-Post.md` - -```markdown ---- -author: Frank Li -authorURL: https://twitter.com/foobarbaz -authorFBID: 503283835 -title: New Blog Post ---- - -Lorem Ipsum... +$ yarn build ``` -For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) +This command generates static content into the `build` directory and can be served using any static contents hosting service. -## Adding items to your site's top navigation bar +### Deployment -1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: - -`website/siteConfig.js` -```javascript -{ - headerLinks: [ - ... - /* you can add docs */ - { doc: 'my-examples', label: 'Examples' }, - /* you can add custom pages */ - { page: 'help', label: 'Help' }, - /* you can add external links */ - { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' }, - ... - ], - ... -} ``` - -For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) - -## Adding custom pages - -1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: -1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element: - -`website/siteConfig.js` -```javascript -{ - headerLinks: [ - ... - { page: 'my-new-custom-page', label: 'My New Custom Page' }, - ... - ], - ... -} +$ GIT_USER= USE_SSH=1 yarn deploy ``` -For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages). - -# Full Documentation - -Full documentation can be found on the [website](https://docusaurus.io/). +If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/website/core/Footer.js b/website/core/Footer.js deleted file mode 100644 index f58e5298a..000000000 --- a/website/core/Footer.js +++ /dev/null @@ -1,79 +0,0 @@ -/** - * Copyright (c) 2017-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -const React = require('react'); - -class Footer extends React.Component { - docUrl(doc, language) { - const { baseUrl } = this.props.config; - return `${baseUrl}docs/${language ? `${language}/` : ''}${doc}`; - } - - pageUrl(doc, language) { - const { baseUrl } = this.props.config; - return baseUrl + (language ? `${language}/` : '') + doc; - } - - render() { - return ( - - ); - } -} - -module.exports = Footer; diff --git a/website/docker/.dockerignore b/website/docker/.dockerignore deleted file mode 100644 index 27d2dae2b..000000000 --- a/website/docker/.dockerignore +++ /dev/null @@ -1,2 +0,0 @@ -*/node_modules -*.log diff --git a/website/docker/Dockerfile b/website/docker/Dockerfile deleted file mode 100644 index d369844d5..000000000 --- a/website/docker/Dockerfile +++ /dev/null @@ -1,10 +0,0 @@ -FROM node:8.11.4 - -WORKDIR /app/website - -EXPOSE 3000 35729 -COPY ./docs /app/docs -COPY ./website /app/website -RUN yarn install - -CMD ["yarn", "start"] diff --git a/website/docker/docker-compose.yml b/website/docker/docker-compose.yml deleted file mode 100644 index 6711192ae..000000000 --- a/website/docker/docker-compose.yml +++ /dev/null @@ -1,18 +0,0 @@ -version: "3" - -services: - docusaurus: - build: . - ports: - - 3000:3000 - - 35729:35729 - volumes: - - ./docs:/app/docs - - ./website/blog:/app/website/blog - - ./website/core:/app/website/core - - ./website/i18n:/app/website/i18n - - ./website/pages:/app/website/pages - - ./website/static:/app/website/static - - ./website/sidebars.json:/app/website/sidebars.json - - ./website/siteConfig.js:/app/website/siteConfig.js - working_dir: /app/website diff --git a/website/docs/API.md b/website/docs/API.md new file mode 100644 index 000000000..b758e315a --- /dev/null +++ b/website/docs/API.md @@ -0,0 +1,401 @@ +--- +id: api +title: API +--- + +This page gathers public API of `react-native-testing-library` along with usage examples. + +## `render` + +- [`Example code`](https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/render.test.js) + +Defined as: + +```jsx +function render( + component: React.Element, + options?: { + /* A React Component that renders `component` as children */ + wrapper?: React.ComponentType, + /* You won't often use this, but it's helpful when testing refs */ + createNodeMock: (element: React.Element) => any, + } +): RenderResult {} +``` + +Deeply renders given React element and returns helpers to query the output components structure. + +```jsx +import { render } from 'react-native-testing-library'; +import { QuestionsBoard } from '../QuestionsBoard'; + +test('should verify two questions', () => { + const { queryAllByA11yRole } = render(); + const allQuestions = queryAllByA11yRole('header'); + + expect(allQuestions).toHaveLength(2); +}); +``` + +> When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases it's convenient to create your custom `render` method. [Follow this great guide on how to set this up](https://testing-library.com/docs/react-testing-library/setup#custom-render). + +The `render` method returns a `RenderResult` object that has a few properties: + +### `...queries` + +The most important feature of `render` is providing a set of helpful queries that allow you to find certain elements in the view hierarchy. + +See [Queries](./Queries.md) for a complete list. + +#### Example + +```jsx +import { render } from 'react-native-testing-library'; + +const { getByText, queryByA11yStates } = render(); +``` + +### `update` + +_Also available under `rerender` alias_ + +```ts +update(element: React.Element): void +rerender(element: React.Element): void +``` + +Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree. This is useful when testing for `componentDidUpdate` behavior, by passing updated props to the component. + +[Example code](https://github.com/callstack/react-native-testing-library/blob/f96d782d26dd4815dbfd01de6ef7a647efd1f693/src/__tests__/act.test.js#L31-L37) + +### `unmount` + +```ts +unmount(): void +``` + +Unmount the in-memory tree, triggering the appropriate lifecycle events + +### `debug` + +```ts +debug(message?: string): void +``` + +Prints deeply rendered component passed to `render` with optional message on top. Uses [debug.deep](#debug) under the hood, but it's easier to use. + +```jsx +const { debug } = render(); + +debug('optional message'); +``` + +logs optional message and colored JSX: + +```jsx +optional message + + + Press me + +``` + +#### `debug.shallow` + +Prints shallowly rendered component passed to `render` with optional message on top. Uses [debug.shallow](#debug) under the hood, but it's easier to use. + +### `toJSON` + +```ts +toJSON(): ReactTestRendererJSON | null +``` + +Get the rendered component JSON representation, e.g. for snapshot testing. + +## `fireEvent` + +```ts +fireEvent(element: ReactTestInstance, eventName: string, ...data: Array): void +``` + +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'; + +test('fire changeText event', () => { + const onEventMock = jest.fn(); + const { getByTestId } = render( + // MyComponent renders TextInput with `onChangeText` bound to handleChangeText + + ); + + fireEvent(getByTestId('change'), 'onChangeText', 'ab'); + expect(onEventMock).toHaveBeenCalledWith('ab'); +}); +``` + +An example using `fireEvent` with native events that aren't already aliased by the `fireEvent` api. + +```jsx +import { TextInput, View } from 'react-native'; +import { fireEvent, render } from 'react-native-testing-library'; + +const onBlurMock = jest.fn(); + +const { getByPlaceholder } = render( + + + +); + +// you can omit the `on` prefix +fireEvent(getByPlaceholder('my placeholder'), 'blur'); +``` + +## `fireEvent[eventName]` + +```ts +fireEvent[eventName](element: ReactTestInstance, ...data: Array): void +``` + +Convenience methods for common events like: `press`, `changeText`, `scroll`. + +### `fireEvent.press: (element: ReactTestInstance) => void` + +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'; + +const onPressMock = jest.fn(); + +const { getByTestId } = render( + + + Press me + + +); + +fireEvent.press(getByTestId('button')); +``` + +### `fireEvent.changeText: (element: ReactTestInstance, ...data: Array) => void` + +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'; + +const onChangeTextMock = jest.fn(); +const CHANGE_TEXT = 'content'; + +const { getByTestId } = render( + + + +); + +fireEvent.changeText(getByTestId('text-input'), CHANGE_TEXT); +``` + +### `fireEvent.scroll: (element: ReactTestInstance, ...data: Array) => void` + +Invokes `scroll` event handler on the element or parent element in the tree. + +#### On a `ScrollView` + +```jsx +import { ScrollView, Text } from 'react-native'; +import { render, fireEvent } from 'react-native-testing-library'; + +const onScrollMock = jest.fn(); +const eventData = { + nativeEvent: { + contentOffset: { + y: 200, + }, + }, +}; + +const { getByTestId } = render( + + XD + +); + +fireEvent.scroll(getByTestId('scroll-view'), eventData); +``` + +#### On a `FlatList` + +```jsx +import { FlatList, View } from 'react-native'; +import { render, fireEvent } from 'react-native-testing-library'; + +const onEndReached = jest.fn(); +const { getByType } = render( + ({ key: `${key}` }))} + renderItem={() => } + onEndReached={onEndReached} + onEndReachedThreshold={0.2} + /> +); +const eventData = { + nativeEvent: { + contentOffset: { + y: 500, + }, + contentSize: { + // Dimensions of the scrollable content + height: 500, + width: 100, + }, + layoutMeasurement: { + // Dimensions of the device + height: 100, + width: 100, + }, + }, +}; + +fireEvent.scroll(getByType(ScrollView), eventData); +expect(onEndReached).toHaveBeenCalled(); +``` + +## `waitForElement` + +- [`Example code`](https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/waitForElement.test.js) + +Defined as: + +```jsx +function waitForExpect( + expectation: () => T, + timeout: number = 4500, + interval: number = 50 +): Promise {} +``` + +Waits for non-deterministic periods of time until your element appears or times out. `waitForExpect` periodically calls `expectation` every `interval` milliseconds to determine whether the element appeared or not. + +```jsx +import { render, waitForElement } from 'react-testing-library'; + +test('waiting for an Banana to be ready', async () => { + const { getByText } = render(); + + await waitForElement(() => getByText('Banana ready')); +}); +``` + +If you're using Jest's [Timer Mocks](https://jestjs.io/docs/en/timer-mocks#docsNav), remember not to use `async/await` syntax as it will stall your tests. + +## `debug` + +- [`Example code`](https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/debug.test.js) + +Log prettified shallowly rendered component or test instance (just like snapshot) to stdout. + +```jsx +import { debug } from 'react-native-testing-library'; + +debug(); +debug.shallow(); // an alias for `debug` +``` + +logs: + +```jsx + + + +``` + +There's also `debug.deep` that renders deeply to stdout. + +```jsx +import { debug } from 'react-native-testing-library'; + +debug.deep(); +debug.deep(toJSON(), 'actually debug JSON too'); // useful when Component state changes +``` + +logs: + +```jsx + + + Press me + + +``` + +Optionally you can provide a string message as a second argument to `debug`, which will be displayed right after the component. + +## `flushMicrotasksQueue` + +Waits for microtasks queue to flush. Useful if you want to wait for some promises with `async/await`. + +```jsx +import { flushMicrotasksQueue, render } from 'react-native-testing-library'; + +test('fetch data', async () => { + const { getByText } = render(); + getByText('fetch'); + await flushMicrotasksQueue(); + expect(getByText('fetch').props.title).toBe('loaded'); +}); +``` + +## `query` APIs + +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'; + +const { queryByText } = render(
); +const submitButton = queryByText('submit'); +expect(submitButton).toBeNull(); // it doesn't exist +``` + +## `queryAll` APIs + +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'; + +const { queryAllByText } = render(); +const submitButtons = queryAllByText('submit'); +expect(submitButtons).toHaveLength(3); // expect 3 elements +``` + +## `act` + +Useful function to help testing components that use hooks API. By default any `render`, `update`, and `fireEvent` calls are wrapped by this function, so there is no need to wrap it manually. This method is re-exported from [`react-test-renderer`](https://github.com/facebook/react/blob/master/packages/react-test-renderer/src/ReactTestRenderer.js#L567]). diff --git a/website/docs/GettingStarted.md b/website/docs/GettingStarted.md new file mode 100644 index 000000000..d465e95ef --- /dev/null +++ b/website/docs/GettingStarted.md @@ -0,0 +1,58 @@ +--- +id: getting-started +title: Getting Started +--- + +## The problem + +You want to write maintainable tests for your React Native components without testing implementation details, but then you're told to use Enzyme, which you learn has no React Native adapter, meaning only shallow rendering is supported. And you want to render deep! But deep rendering may otherwise require jsdom (React Native isn't the web!), while doing deep rendering with `react-test-renderer` is so painful. + +You would also like to use the newest React features, but you need to wait for your testing library's abstractions to catch up and it takes a while. + +You finally want to approach testing using only best practices, while Enzyme may encourage assertions on implementation details. + +## 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. + +This library is a replacement for [Enzyme](http://airbnb.io/enzyme/). + +## Example + +```jsx +import { render, fireEvent } from 'react-native-testing-library'; +import { QuestionsBoard } from '../QuestionsBoard'; +import { Question } from '../Question'; + +function setAnswer(question, answer) { + fireEvent.changeText(question, answer); +} + +test('should verify two questions', () => { + jest.spyOn(props, 'verifyQuestions'); + const { getAllByA11yRole, getByText } = render(); + const allQuestions = getAllByA11yRole('header'); + + setAnswer(allQuestions[0], 'a1'); + setAnswer(allQuestions[1], 'a2'); + + fireEvent.press(getByText('submit')); + + expect(props.verifyQuestions).toBeCalledWith({ + '1': { q: 'q1', a: 'a1' }, + '2': { q: 'q2', a: 'a2' }, + }); +}); +``` + +## Installation + +Open a Terminal in your project's folder and run: + +```sh +yarn add --dev react-native-testing-library +``` + +This library has a peerDependencies listing for `react-test-renderer` and, of course, `react`. Make sure to install them too! + +As you may have noticed, it's not tied to React Native at all – you can safely use it in your React components if you feel like not interacting directly with DOM. diff --git a/website/docs/Queries.md b/website/docs/Queries.md new file mode 100644 index 000000000..db7549bce --- /dev/null +++ b/website/docs/Queries.md @@ -0,0 +1,183 @@ +--- +id: api-queries +title: Queries +--- + +## Variants + +> `getBy` queries are shown by default in the [query documentation](#queries) +> below. + +### getBy + +`getBy*` queries returns the first matching node for a query, and throws an +error if no elements match. + +### getAllBy + +`getAllBy*` queries return an array of all matching nodes for a query, and +throws an error if no elements match. + +### queryBy + +`queryBy*` queries returns the first matching node for a query, and return +`null` if no elements match. This is useful for asserting an element is not +present. + +### queryAllBy + +`queryAllBy*` queries return an array of all matching nodes for a query, and +return an empty array (`[]`) if no elements match. + +## Queries + +_Note: most methods like this one return a [`ReactTestInstance`](https://reactjs.org/docs/test-renderer.html#testinstance) with following properties that you may be interested in:_ + +```jsx +type ReactTestInstance = { + type: string | Function, + props: { [propName: string]: any }, + parent: null | ReactTestInstance, + children: Array, +}; +``` + +### `ByText` + +> getByText, getAllByText, queryByText, queryAllByText + +Returns a `ReactTestInstance` with matching text – may be a string or regular expression. + +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'; + +const { getByText } = render(); +const element = getByText('banana'); +``` + +### `ByPlaceholder` + +> getByPlaceholder, getAllByPlaceholder, queryByPlaceholder, queryAllByPlaceholder + +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'; + +const { getByPlaceholder } = render(); +const element = getByPlaceholder('username'); +``` + +### `ByDisplayValue` + +> getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue + +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'; + +const { getByDisplayValue } = render(); +const element = getByDisplayValue('username'); +``` + +### `ByTestId` + +> getByTestId, getAllByTestId, queryByTestId, queryAllByTestId + +Returns a `ReactTestInstance` with matching `testID` prop. + +```jsx +import { render } from 'react-native-testing-library'; + +const { getByTestId } = render(); +const element = getByTestId('unique-id'); +``` + +### `ByA11yLabel`, `ByAccessibilityLabel` + +> getByA11yLabel, getAllByA11yLabel, queryByA11yLabel, queryAllByA11yLabel +> getByAccessibilityLabel, getAllByAccessibilityLabel, queryByAccessibilityLabel, queryAllByAccessibilityLabel + +Returns a `ReactTestInstance` with matching `accessibilityLabel` prop. + +```jsx +import { render } from 'react-native-testing-library'; + +const { getByA11yLabel } = render(); +const element = getByA11yLabel('my-label'); +``` + +### `ByA11yHint`, `ByAccessibilityHint` + +> getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint +> getByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint + +Returns a `ReactTestInstance` with matching `accessibilityHint` prop. + +```jsx +import { render } from 'react-native-testing-library'; + +const { getByA11yHint } = render(); +const element = getByA11yHint('my-hint'); +``` + +### `ByA11yStates`, `ByAccessibilityStates` + +> getByA11yStates, getAllByA11yStates, queryByA11yStates, queryAllByA11yStates +> getByAccessibilityStates, getAllByAccessibilityStates, queryByAccessibilityStates, queryAllByAccessibilityStates + +Returns a `ReactTestInstance` with matching `accessibilityStates` prop. + +```jsx +import { render } from 'react-native-testing-library'; + +const { getByA11yStates } = render(); +const element = getByA11yStates(['checked']); +const element2 = getByA11yStates('checked'); +``` + +### `ByA11yRole`, `ByAccessibilityRole` + +> getByA11yRole, getAllByA11yRole, queryByA11yRole, queryAllByA11yRole +> getByAccessibilityRole, getAllByAccessibilityRole, queryByAccessibilityRole, queryAllByAccessibilityRole + +Returns a `ReactTestInstance` with matching `accessibilityRole` prop. + +```jsx +import { render } from 'react-native-testing-library'; + +const { getByA11yRole } = render(); +const element = getByA11yRole('button'); +``` + +## Unit testing helpers + +> 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. + +
+ Queries helpful in unit testing + +The interface is the same as for other queries, but we won't provide full names so that they're harder to find by search engines. + +### `ByType` + +> Note: added in v1.4 + +A method returning a `ReactTestInstance` with matching a React component type. Throws when no matches. + +### `ByProps` + +A method returning a `ReactTestInstance` with matching props object + +### `ByName` + +> This method has been **deprecated** because using it results in fragile tests that may break between minor React Native versions. **DON'T USE IT**. It will be removed in next major release (v2.0). Use [`getByTestId`](#bytestid) instead. It's listed here only for back-compat purposes for early adopters of the library + +A method returning a `ReactTestInstance` with matching a React component type. Throws when no matches. + +
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js new file mode 100755 index 000000000..0a9b90672 --- /dev/null +++ b/website/docusaurus.config.js @@ -0,0 +1,122 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const repoUrl = 'https://github.com/callstack/react-native-testing-library'; + +const siteConfig = { + title: 'React Native Testing Library', // Title for your website. + tagline: 'Helps you to write better tests with less effort.', + url: 'https://callstack.github.io', // Your website URL + baseUrl: '/react-native-testing-library/', // Base URL for your project + favicon: 'img/owl.png', + // Used for publishing and more + projectName: 'react-native-testing-library', + organizationName: 'callstack', + // For top-level user or org sites, the organization is still the same. + // e.g., for the https://JoelMarcey.github.io site, it would be set like... + // organizationName: 'JoelMarcey' + themeConfig: { + navbar: { + title: 'React Native Testing Library', + style: 'dark', + logo: { + alt: 'React Native Testing Library', + src: 'img/owl.png', + }, + links: [ + {to: 'docs/getting-started', label: 'Docs', position: 'right'}, + { + href: 'https://github.com/facebook/docusaurus', + label: 'GitHub', + position: 'right', + }, + ], + }, + footer: { + style: 'dark', + links: [ + { + title: 'Docs', + items: [ + { + label: 'Getting Started', + to: 'docs/getting-started', + }, + { + label: 'API Reference', + to: 'docs/api', + }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'Slack Overflow', + href: 'https://stackoverflow.com/questions/tagged/react-native-testing-library', + }, + { + label: 'Discord channel', + href: 'https://discord.gg/QbGezWe', + }, + ], + }, + { + title: 'More', + items: [ + { + label: 'Github', + href: 'https://github.com/callstack/react-native-testing-library', + }, + { + label: 'Star', + href: 'https://github.com/callstack/react-native-testing-library', + }, + + ], + }, + ], + // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds. + copyright: `Copyright © ${new Date().getFullYear()} Callstack Open Source`, + highlight: { + // Highlight.js theme to use for syntax highlighting in code blocks. + theme: 'dark', + }, + + // Add custom scripts here that would be placed in