Add Pressable to supported components

docker-compose.yml

@@ -1,4 +1,4 @@
-version: "3"
+version: '3'
 
 services:
   docusaurus:

docs/api-helpers.md

@@ -6,11 +6,11 @@ sidebar_label: Helpers
 
 ## Custom Queries
 
-A few helper functions are exposed that are used internally to implement the default queries. You can
-use the helpers to build custom queries. For example, the code below shows a way to query your
+A few helper functions are exposed that are used internally to implement the default queries. You
+can use the helpers to build custom queries. For example, the code below shows a way to query your
 TestInstance by a `style` prop. Note: test files would need to now import `test-utils.js` instead of
-importing directly from `@testing-library/react-native`. Also note, please never actually implement this helper, it's just an
-example of what's possible.
+importing directly from `@testing-library/react-native`. Also note, please never actually implement
+this helper, it's just an example of what's possible.
 
 ```javascript
 // test-utils.js

docs/api-main.md

@@ -160,7 +160,7 @@ function TestComponent() {
   const [count, setCount] = React.useState(0);
 
   return (
-    <Button onPress={() => setCount(state => state + 1)} title={`Click to increase: ${count}`} />
+    <Button onPress={() => setCount((state) => state + 1)} title={`Click to increase: ${count}`} />
   );
 }
 
@@ -193,9 +193,9 @@ test('renders into document', () => {
 // ... more tests ...
 ```
 
-In RNTL there is no DOM to cleanup, and your tests' rendered trees cannot
-interfere with each other. It is simply nice to be able to run any unmount logic in the components
-you have rendered in your tests.
+In RNTL there is no DOM to cleanup, and your tests' rendered trees cannot interfere with each other.
+It is simply nice to be able to run any unmount logic in the components you have rendered in your
+tests.
 
 **If you don't want to add this to _every single test file_** then we recommend that you configure
 your test framework to run a file before your tests which does this automatically. See the

docs/api-queries.md

@@ -352,7 +352,7 @@ built-in normalization behavior:
 
 ```javascript
 getByText(node, 'text', {
-  normalizer: str => getDefaultNormalizer({ trim: false })(str).replace(/[\u200E-\u200F]*/g, ''),
+  normalizer: (str) => getDefaultNormalizer({ trim: false })(str).replace(/[\u200E-\u200F]*/g, ''),
 });
 ```
 
@@ -379,7 +379,7 @@ getByText(baseElement, /^hello world$/i); // full string match, ignore case
 getByText(baseElement, /Hello W?oRlD/i); // advanced regex
 
 // Matching with a custom function:
-getByText(baseElement, content => content.startsWith('Hello'));
+getByText(baseElement, (content) => content.startsWith('Hello'));
 ```
 
 **_Will not_ find a match:**

docs/api-test-instance.md

@@ -40,7 +40,7 @@ similar to `document.querySelectorAll`.
 
 ```javascript
 const { container } = render(<MyComponent />);
-const textNodes = container.findAll(node => node.getProp('accessibilityLabel') === 'hello world');
+const textNodes = container.findAll((node) => node.getProp('accessibilityLabel') === 'hello world');
 
 expect(textNodes).toHaveLength(2);
 ```

docs/cheat-sheet.md

@@ -5,8 +5,8 @@ sidebar_label: Cheat Sheet
 ---
 
 There is a printable one-page cheat sheet available for you to download. It is intended to be a
-quick reference, but is not a complete API glossary or guide. Keep a copy of it on your
-desk to quickly take a peek at the most commonly used functionality!
+quick reference, but is not a complete API glossary or guide. Keep a copy of it on your desk to
+quickly take a peek at the most commonly used functionality!
 
 [Download the cheat sheet][cheatsheet]
 

docs/ecosystem-jest-native.md

@@ -4,8 +4,8 @@ title: Jest Matchers
 sidebar_label: Jest Matchers
 ---
 
-[`jest-native`](https://github.com/testing-library/jest-native) is a companion library that
-provides custom element matchers for Jest.
+[`jest-native`](https://github.com/testing-library/jest-native) is a companion library that provides
+custom element matchers for Jest.
 
 ```
 npm install --save-dev @testing-library/jest-native

docs/example-context.md

@@ -29,7 +29,7 @@ test('NameConsumer shows value from provider', () => {
 test('NameProvider composes full name from first, last', () => {
   const tree = (
     <NameProvider first="Boba" last="Fett">
-      <NameContext.Consumer>{value => <Text>Received: {value}</Text>}</NameContext.Consumer>
+      <NameContext.Consumer>{(value) => <Text>Received: {value}</Text>}</NameContext.Consumer>
     </NameProvider>
   );
   const { getByText } = render(tree);

docs/example-input-event.md

@@ -14,8 +14,8 @@ class CostInput extends React.Component {
     value: '',
   };
 
-  removeDollarSign = value => (value[0] === '$' ? value.slice(1) : value);
-  getReturnValue = value => (value === '' ? '' : `$${value}`);
+  removeDollarSign = (value) => (value[0] === '$' ? value.slice(1) : value);
+  getReturnValue = (value) => (value === '' ? '' : `$${value}`);
   handleChange = ({ nativeEvent }) => {
     const text = nativeEvent.text;
     const noDollarSign = this.removeDollarSign(text);

docs/example-intl.md

@@ -37,7 +37,7 @@ const FormatDateView = () => {
   );
 };
 
-const renderWithReactIntl = component => {
+const renderWithReactIntl = (component) => {
   return {
     ...render(<IntlProvider locale="pt">{component}</IntlProvider>),
   };

docs/example-navigation.md

@@ -4,10 +4,9 @@ title: Navigation
 sidebar_label: Navigation
 ---
 
-
 ```js
 // <project-root-path>/__mocks__/react-native-gesture-handler.js
-// react-native-gesture-handler use native modules, we need to mock it. 
+// react-native-gesture-handler use native modules, we need to mock it.
 import { View } from 'react-native';
 
 export const State = {};
@@ -16,7 +15,6 @@ export const BaseButton = View;
 export const Directions = {};
 ```
 
-
 ```javascript
 import React from 'react';
 import { Button, Text, View } from 'react-native';
@@ -27,7 +25,7 @@ import { render, fireEvent } from '@testing-library/react-native';
 // NativeAnimatedHelper is not mocked by default on react native's jest setup file.
 jest.mock('NativeAnimatedHelper');
 
-console.warn = arg => {
+console.warn = (arg) => {
   const hiddenMessages = [
     'Calling .measureInWindow()',
     'Calling .measureLayout()',
@@ -36,7 +34,7 @@ console.warn = arg => {
     'Calling .blur()',
   ];
 
-  const warningShouldBeHidden = hiddenMessages.some(x => arg.includes(x))
+  const warningShouldBeHidden = hiddenMessages.some((x) => arg.includes(x));
 
   if (!warningShouldBeHidden) {
     console.warn(arg);

docs/example-redux.md

@@ -34,7 +34,7 @@ class Counter extends React.Component {
   }
 }
 
-const ConnectedCounter = connect(state => ({ count: state.count }))(Counter);
+const ConnectedCounter = connect((state) => ({ count: state.count }))(Counter);
 
 function reducer(state = { count: 0 }, action) {
   switch (action.type) {

docs/install.md

@@ -12,16 +12,17 @@ This module should be installed in your project's `devDependencies`:
 npm install --save-dev @testing-library/react-native
 ```
 
-You will need `react`, `react-native`, and `react-test-renderer` installed as _dependencies_ in order to run this project.
+You will need `react`, `react-native`, and `react-test-renderer` installed as _dependencies_ in
+order to run this project.
 
 ## Jest preset
 
 > It is **highly recommended** that you use the bundled Jest preset. You will likely experience
 > unexpected behavior and have a sub-optimal experience if you do not use the preset.
 
-This library includes an easy to adopt and reliable Jest preset to maximize the
-confidence you have in your tests. It extends the `react-native` preset, and was created in order to
-more closely mimic behavior you would expect from any other member of the `testing-library` family.
+This library includes an easy to adopt and reliable Jest preset to maximize the confidence you have
+in your tests. It extends the `react-native` preset, and was created in order to more closely mimic
+behavior you would expect from any other member of the `testing-library` family.
 
 ```diff
 // jest.config.js
@@ -43,8 +44,8 @@ module.exports = Object.assign(expoPreset, jestPreset, {
 });
 ```
 
-> If you use Expo, be sure to include the Expo setup files before this library's setup
-> files! If you're using React Native, there's no need to do anything extra.
+> If you use Expo, be sure to include the Expo setup files before this library's setup files! If
+> you're using React Native, there's no need to do anything extra.
 
 Generally speaking though, it's better to include any setup files you have in the
 `setupFilesAfterEnv` key of your Jest config.
@@ -63,6 +64,7 @@ Here is a list of all the components this preset supports:
   "Image",
   "Modal",
   "Picker",
+  "Pressable",
   "RefreshControl",
   "SafeAreaView",
   "ScrollView",

docs/intro.md

@@ -14,16 +14,17 @@ Native.
 
 ## This solution
 
-React Native Testing Library (RNTL) is an implementation of the well-known Testing Library API that works
-for React Native. The primary goal is to mimic the testing library API as closely as possible while
-still accounting for the differences in the platforms. Accomplishing this is no small feat because
-of the differences between the two platforms. Although most framework implementations like React
-Testing Library (RTL) are thin layers over [DOM Testing Library (DTL)](https://testing-library.com),
-this library needed to have its own base implementation as well as a user-facing API. This library
-uses the [react-test-renderer](https://reactjs.org/docs/test-renderer.html), whereas DOM Testing
-Library (DTL) uses JSDOM. The main philosophy here is that you should find elements on the "screen"
-the way users would. This approach is meant to give you confidence that your app is working as a
-cohesive unit. Testing Library's primary philosophy is:
+React Native Testing Library (RNTL) is an implementation of the well-known Testing Library API that
+works for React Native. The primary goal is to mimic the testing library API as closely as possible
+while still accounting for the differences in the platforms. Accomplishing this is no small feat
+because of the differences between the two platforms. Although most framework implementations like
+React Testing Library (RTL) are thin layers over
+[DOM Testing Library (DTL)](https://testing-library.com), this library needed to have its own base
+implementation as well as a user-facing API. This library uses the
+[react-test-renderer](https://reactjs.org/docs/test-renderer.html), whereas DOM Testing Library
+(DTL) uses JSDOM. The main philosophy here is that you should find elements on the "screen" the way
+users would. This approach is meant to give you confidence that your app is working as a cohesive
+unit. Testing Library's primary philosophy is:
 
 > [The more your tests resemble the way your software is used, the more confidence they can give you.](guiding-principles.md)
 

docs/setup.md

@@ -6,8 +6,8 @@ sidebar_label: Setup
 
 ## Setting up your project
 
-The API should work out of the box for most tests. All of the snippets you'll find throughout
-the website work without any additional configuration assuming you use Jest and a moderately recent
+The API should work out of the box for most tests. All of the snippets you'll find throughout the
+website work without any additional configuration assuming you use Jest and a moderately recent
 version of React Native.
 
 We strongly encourage you to use Jest with the `@testing-library/react-native` preset. The
@@ -39,9 +39,9 @@ module.exports = {
 
 It's often useful to define a custom render method that includes things like global context
 providers, data stores, etc. To make this available globally, one approach is to define a utility
-file that re-exports everything from this library. You can replace `@testing-library/react-native` with this
-file in all your imports. See [below](#configuring-jest-with-test-utils) for a way to make your test
-util file accessible without using relative paths.
+file that re-exports everything from this library. You can replace `@testing-library/react-native`
+with this file in all your imports. See [below](#configuring-jest-with-test-utils) for a way to make
+your test util file accessible without using relative paths.
 
 The example below sets up data providers using the [`wrapper`](api-main.md#render-options) option to
 `render`.

website/README.md

@@ -2,11 +2,11 @@ This website was created with [Docusaurus](https://docusaurus.io/).
 
 # What's In This Document
 
-* [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)
+- [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)
 
 # Get Started in 5 Minutes
 
@@ -16,6 +16,7 @@ This website was created with [Docusaurus](https://docusaurus.io/).
 # Install dependencies
 $ yarn
 ```
+
 2. Run your dev server:
 
 ```sh
@@ -72,6 +73,7 @@ For more information about docs, click [here](https://docusaurus.io/docs/en/navi
 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
@@ -121,6 +123,7 @@ For more information about adding new docs, click [here](https://docusaurus.io/d
 1. Make sure there is a header link to your blog in `website/siteConfig.js`:
 
 `website/siteConfig.js`
+
 ```javascript
 headerLinks: [
     ...
@@ -148,9 +151,11 @@ For more information about blog posts, click [here](https://docusaurus.io/docs/e
 
 ## Adding items to your site's top navigation bar
 
-1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
+1. Add links to docs, custom pages or external links by editing the headerLinks field of
+   `website/siteConfig.js`:
 
 `website/siteConfig.js`
+
 ```javascript
 {
   headerLinks: [
@@ -167,14 +172,18 @@ For more information about blog posts, click [here](https://docusaurus.io/docs/e
 }
 ```
 
-For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
+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:
+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: [