Merge branch 'master' into AugustinLF/non-recursive-text-match-options

Author: Damian Sznajder

.circleci/config.yml

@@ -12,7 +12,7 @@ aliases:
 
 defaults: &defaults
   docker:
-    - image: circleci/node:10
+    - image: circleci/node:12
   working_directory: ~/react-native-testing-library
 
 jobs:
@@ -65,6 +65,13 @@ jobs:
           at: ~/react-native-testing-library
       - run: |
           cd website && yarn install && yarn build
+  test-examples:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/react-native-testing-library
+      - run: |
+          ls -d ./examples/* | xargs -I {} bash -c "cd '{}' && yarn install && yarn test"
   deploy-website:
     <<: *defaults
     steps:
@@ -96,6 +103,10 @@ workflows:
             - install-dependencies
           # docusuarus build is running when deploying website as well
           filters: *filter-ignore-master
+      - test-examples:
+          requires:
+            - install-dependencies
+          filters: *filter-only-master
       - deploy-website:
           requires:
             - install-dependencies

.flowconfig

@@ -32,6 +32,9 @@ emoji=true
 esproposal.optional_chaining=enable
 esproposal.nullish_coalescing=enable
 
+well_formed_exports=true
+types_first=true
+
 module.file_ext=.js
 module.file_ext=.json
 module.file_ext=.ios.js
@@ -41,15 +44,6 @@ munge_underscores=true
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
 module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
 
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FlowFixMeProps
-suppress_type=$FlowFixMeState
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
 [lints]
 sketchy-null-number=warn
 sketchy-null-mixed=warn

.github/dependabot.yml

@@ -0,0 +1,21 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: monthly
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: react-native
+    versions:
+    - 0.64.0-rc.3
+  - dependency-name: "@babel/preset-env"
+    versions:
+    - 7.13.8
+  - dependency-name: flow-bin
+    versions:
+    - 0.143.1
+    - 0.145.0
+  - dependency-name: "@types/react-native"
+    versions:
+    - 0.63.43

README.md

@@ -50,7 +50,7 @@ This library has a peerDependencies listing for `react-test-renderer` and, of co
 
 ### Additional Jest matchers
 
-In order to use addtional React Native-specific jest matchers from [@testing-library/jest-native](https://github.com/testing-library/jest-native) package add it to your project:
+In order to use additional React Native-specific jest matchers from [@testing-library/jest-native](https://github.com/testing-library/jest-native) package add it to your project:
 
 #### Using `yarn`
 
@@ -64,7 +64,7 @@ yarn add --dev @testing-library/jest-native
 npm install --save-dev @testing-library/jest-native
 ```
 
-Then automatically add it to your jest tests by using `setupFilesAfterEnv` option in your Jest configuration (it's usually located either in `package.json` under `"jest"` key or in a `jest.config.js` file):
+Then automatically add it to your jest tests by using `setupFilesAfterEnv` option in your Jest configuration (it's usually located either in `package.json` under `"jest"` key or in a `jest.config.json` file):
 
 ```json
 {
@@ -73,6 +73,24 @@ Then automatically add it to your jest tests by using `setupFilesAfterEnv` optio
 }
 ```
 
+### Custom Jest Preset
+
+> **important** if you use "modern" Fake Timers
+
+We generally advise to use the "react-native" preset when testing with this library. However, if you use ["modern" Fake Timers](https://jestjs.io/blog/2020/05/05/jest-26#new-fake-timers) (default since Jest 27), you'll need to apply our custom Jest preset or awaiting promises, like `waitFor`, will timeout.
+
+This is a [known issue](https://github.com/facebook/react-native/issues/29303). It happens because React Native's Jest preset overrides native Promise. Our preset restores it to defaults, which is not a problem in most apps out there.
+
+Here's how you apply a custom preset in your Jest config:
+
+```json
+{
+  "preset": "@testing-library/react-native"
+}
+```
+
+If this doesn't work for you, please fall back to using "legacy" fake timers.
+
 ### Flow
 
 Note for [Flow](https://flow.org) users – you'll also need to install typings for `react-test-renderer`:

examples/reactnavigation/jest-setup.js

@@ -0,0 +1,14 @@
+import 'react-native-gesture-handler/jestSetup';
+
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+
+  // The mock for `call` immediately calls the callback which is incorrect
+  // So we override it with a no-op
+  Reanimated.default.call = () => {};
+
+  return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

examples/reactnavigation/jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   preset: 'react-native',
-  setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'],
+  setupFiles: ['./jest-setup.js'],
   transformIgnorePatterns: [
     'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',
   ],

examples/reactnavigation/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.9",
+    "@react-navigation/drawer": "^5.11.4",
     "@react-navigation/native": "^5.1.6",
     "@react-navigation/stack": "^5.2.13",
     "prop-types": "^15.7.2",

examples/reactnavigation/src/App.js

@@ -1,3 +1,4 @@
+import 'react-native-gesture-handler';
 import React from 'react';
 import { StatusBar, StyleSheet, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
@@ -9,7 +10,6 @@ export default function App() {
     <NavigationContainer>
       <View style={styles.container}>
         <StatusBar barStyle="dark-content" />
-
         <AppNavigator />
       </View>
     </NavigationContainer>

examples/reactnavigation/src/AppNavigator.js

@@ -1,5 +1,4 @@
-import 'react-native-gesture-handler';
-import React from 'react';
+import * as React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 
 import HomeScreen from './screens/HomeScreen';

examples/reactnavigation/src/DrawerApp.js

@@ -0,0 +1,13 @@
+import 'react-native-gesture-handler';
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+
+import DrawerAppNavigator from './DrawerAppNavigator';
+
+export default function DrawerApp() {
+  return (
+    <NavigationContainer>
+      <DrawerAppNavigator />
+    </NavigationContainer>
+  );
+}