From 414f8701a50ecfeb35b0548be83a5ef1ef549826 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Mon, 18 May 2020 09:37:59 +0200 Subject: [PATCH] feat: Support for @testing-library/jest-native (#310) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added @testing-library/jest-native to devDependencies * Tests for jest-native matchers * Added @testing-library/jest-native install info * Update README.md * Update GettingStarted.md * feat: add `findBy*` queries (#304) * Basic async findBy queries * Refactored findBy queries to be built with makeFindQuery * findBy queries for A11y selectors * Custom findByTestId implementation that avoids current getByTestId issues * Fixed prettier issue * Updates Queries.md with findBy queries * Trying to fix test timeout error appearing only on CI * Code review changes * Added typescript types & tests * prettier did reformat some code arround * Removed export of GetByAPI, QueryByAPI and FindByAPI interfaces in TS * Reversed prettier run on typings * Added overlapping pieces with `within` operator * Small cleanup * Update website/docs/Queries.md * Moved async/await tests to the end of test methods Co-authored-by: Michał Pierzchała * chore: bump eslint config to latest (#308) * chore: bump eslint config to latest * lint fix * lint pass * use roles directly * Trying to fix CI build * Added $FlowFixMe for missing flow expect extensions * Small doc fixes * Clarified failing toHaveProps matcher tests * Moved lint ignore for color literals to .eslintrc * Updated toHaveProp tests to avoid strange `Button` behavior * Updated yarn.lock * Update README.md * Update website/docs/GettingStarted.md Co-authored-by: Michał Pierzchała --- .eslintrc | 3 +- README.md | 34 ++++++++++++ package.json | 1 + src/__tests__/jest-native.test.js | 90 +++++++++++++++++++++++++++++++ website/docs/GettingStarted.md | 32 +++++++++++ yarn.lock | 44 ++++++++++++++- 6 files changed, 202 insertions(+), 2 deletions(-) create mode 100644 src/__tests__/jest-native.test.js diff --git a/.eslintrc b/.eslintrc index 4e273da1..ef6fdaab 100644 --- a/.eslintrc +++ b/.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" } } diff --git a/README.md b/README.md index b95b05d4..2bf662c1 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 3f448fed..f5acf10a 100644 --- a/package.json +++ b/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", diff --git a/src/__tests__/jest-native.test.js b/src/__tests__/jest-native.test.js new file mode 100644 index 00000000..741d8d1b --- /dev/null +++ b/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( + +