diff --git a/.eslintrc b/.eslintrc index 4e273da18..ef6fdaab7 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 b95b05d41..2bf662c11 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 3f448fed0..f5acf10ab 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 000000000..741d8d1b8 --- /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( + +