feat: Support for @testing-library/jest-native

.eslintrc

@@ -10,6 +10,7 @@
       2,
       { "ignore": ["^@theme", "^@docusaurus", "^@generated"] }
     ],
-    "react-native-a11y/has-valid-accessibility-ignores-invert-colors": 0
+    "react-native-a11y/has-valid-accessibility-ignores-invert-colors": 0,
+    "react-native/no-color-literals": "off"
   }
 }

README.md

@@ -64,12 +64,46 @@ You can find the source of `QuestionsBoard` component and this example [here](ht
 
 Open a Terminal in your project's folder and run:
 
+#### Using `yarn`
+
 ```sh
 yarn add --dev react-native-testing-library
 ```
 
+#### Using `npm`
+
+```sh
+npm install --save-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!
 
+### 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:
+
+#### Using `yarn`
+
+```sh
+yarn add --dev @testing-library/jest-native
+```
+
+#### Using `npm`
+
+```sh
+npm install --save-dev @testing-library/jest-native
+```
+
+Then automatically add it to your jest tests by using `setupFilesAfterEnv` option in the `jest.config.js` file:
+
+```js
+module.exports = {
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+};
+```
+
+### Flow
+
 Note for [Flow](https://flow.org) users – you'll also need to install typings for `react-test-renderer`:
 
 ```sh

package.json

@@ -23,6 +23,7 @@
     "@babel/core": "^7.9.0",
     "@callstack/eslint-config": "^10.0.0",
     "@release-it/conventional-changelog": "^1.1.0",
+    "@testing-library/jest-native": "~3.1.0",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.62.2",
     "@types/react-test-renderer": "^16.9.2",

src/__tests__/jest-native.test.js

@@ -0,0 +1,90 @@
+// @flow
+import React from 'react';
+import { StyleSheet, View, Button, Text, TextInput } from 'react-native';
+import { render } from '..';
+import '@testing-library/jest-native/extend-expect';
+
+const style = StyleSheet.create({
+  style1: {
+    color: 'red',
+    backgroundColor: 'green',
+  },
+});
+
+test('jest-native matchers work correctly', () => {
+  const { getByText, getByA11yHint } = render(
+    <View>
+      <Button title="Enabled Button" onPress={jest.fn()} />
+      <Button title="Disabled Button" disabled={true} onPress={jest.fn()} />
+      <Text accessibilityHint="Empty Text" style={style.style1} />
+      <Text accessibilityHint="Not Empty Text">Not empty</Text>
+      <View accessibilityHint="Empty View" />
+      <View accessibilityHint="Not Empty View">
+        <Text />
+      </View>
+      <View accessibilityHint="Container View">
+        <View accessibilityHint="First-Level Child">
+          <Text>Second-Level Child</Text>
+        </View>
+      </View>
+      <TextInput
+        accessibilityHint="Text Input"
+        allowFontScaling={false}
+        secureTextEntry={true}
+        defaultValue="111"
+      />
+    </View>
+  );
+
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByText('Enabled Button')).toBeEnabled();
+
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByText('Disabled Button')).not.toBeEnabled();
+
+  expect(getByText('Disabled Button')).toBeDisabled();
+  expect(getByText('Enabled Button')).not.toBeDisabled();
+
+  expect(getByA11yHint('Empty Text')).toBeEmpty();
+  expect(getByA11yHint('Empty View')).toBeEmpty();
+  expect(getByA11yHint('Not Empty Text')).not.toBeEmpty();
+  expect(getByA11yHint('Not Empty View')).not.toBeEmpty();
+
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByA11yHint('Container View')).toContainElement(
+    getByA11yHint('First-Level Child')
+  );
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByA11yHint('Container View')).toContainElement(
+    getByText('Second-Level Child')
+  );
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByA11yHint('Container View')).not.toContainElement(
+    getByText('Enabled Button')
+  );
+
+  expect(getByA11yHint('Not Empty Text')).toHaveTextContent('Not empty');
+  // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+  expect(getByA11yHint('Not Empty Text')).toHaveTextContent(/Not empty/);
+  expect(getByA11yHint('Not Empty Text')).not.toHaveTextContent('Is empty');
+
+  expect(getByA11yHint('Empty Text')).toHaveStyle({ color: 'red' });
+  expect(getByA11yHint('Empty Text')).toHaveStyle({
+    color: 'red',
+    backgroundColor: 'green',
+  });
+  expect(getByA11yHint('Empty Text')).not.toHaveStyle({ color: 'green' });
+  expect(getByA11yHint('Empty Text')).not.toHaveStyle({
+    color: 'green',
+    backgroundColor: 'green',
+  });
+
+  const textInput = getByA11yHint('Text Input');
+  expect(textInput).toBeTruthy();
+  expect(textInput).toHaveProp('allowFontScaling');
+  expect(textInput).toHaveProp('allowFontScaling', false);
+  expect(textInput).toHaveProp('secureTextEntry');
+  expect(textInput).toHaveProp('secureTextEntry', true);
+  expect(textInput).toHaveProp('defaultValue');
+  expect(textInput).toHaveProp('defaultValue', '111');
+});

website/docs/GettingStarted.md

@@ -50,10 +50,42 @@ You can find the source of `QuestionsBoard` component and this example [here](ht
 
 Open a Terminal in your project's folder and run:
 
+#### Using `yarn`
+
 ```sh
 yarn add --dev react-native-testing-library
 ```
 
+#### Using `npm`
+
+```sh
+npm install --save-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.
+
+### 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:
+
+#### Using `yarn`
+
+```sh
+yarn add --dev @testing-library/jest-native
+```
+
+#### Using `npm`
+
+```sh
+npm install --save-dev @testing-library/jest-native
+```
+
+Then automatically add it to your jest tests by using `setupFilesAfterEnv` option in the `jest.config.js` file:
+
+```js
+module.exports = {
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+};
+```

yarn.lock

@@ -1311,6 +1311,18 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
+"@testing-library/jest-native@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-3.1.0.tgz#414c834dfb524ca82b86509d5479e365d4d5bbec"
+  integrity sha512-MZdsTsD6xrP5V0FTz2gVPG00ZMoKn4WniRitUH40zZTQ0DfMa5CVDpkAd5ed6qX1coDwS8vSCZS/JGMIDYjRQQ==
+  dependencies:
+    chalk "^2.4.1"
+    jest-diff "^24.0.0"
+    jest-matcher-utils "^24.0.0"
+    pretty-format "^24.0.0"
+    ramda "^0.26.1"
+    redent "^2.0.0"
+
 "@types/babel__core@^7.1.7":
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
@@ -3152,6 +3164,11 @@ detect-repo-changelog@1.0.1:
     lodash.find "^4.6.0"
     pify "^2.3.0"
 
+diff-sequences@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
+  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
+
 diff-sequences@^26.0.0:
   version "26.0.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.0.0.tgz#0760059a5c287637b842bd7085311db7060e88a6"
@@ -5007,6 +5024,16 @@ jest-config@^26.0.1:
     micromatch "^4.0.2"
     pretty-format "^26.0.1"
 
+jest-diff@^24.0.0, jest-diff@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
+  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
+  dependencies:
+    chalk "^2.0.1"
+    diff-sequences "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
 jest-diff@^26.0.1:
   version "26.0.1"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.0.1.tgz#c44ab3cdd5977d466de69c46929e0e57f89aa1de"
@@ -5138,6 +5165,16 @@ jest-leak-detector@^26.0.1:
     jest-get-type "^26.0.0"
     pretty-format "^26.0.1"
 
+jest-matcher-utils@^24.0.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
+  integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
+  dependencies:
+    chalk "^2.0.1"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
 jest-matcher-utils@^26.0.1:
   version "26.0.1"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.0.1.tgz#12e1fc386fe4f14678f4cc8dbd5ba75a58092911"
@@ -7161,7 +7198,7 @@ prettier@^2.0.4:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
   integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
 
-pretty-format@^24.7.0, pretty-format@^24.9.0:
+pretty-format@^24.0.0, pretty-format@^24.7.0, pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
   integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
@@ -7297,6 +7334,11 @@ quick-lru@^5.0.0:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.0.tgz#1602f339bde554c4dace47880227ec9c2869f2e8"
   integrity sha512-WjAKQ9ORzvqjLijJXiXWqc3Gcs1ivoxCj6KJmEjoWBE6OtHwuaDLSAUqGHALUiid7A1KqGqsSHZs8prxF5xxAQ==
 
+ramda@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
+
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"