From 14df030ab4a97bea524aec953e09b0272909122b Mon Sep 17 00:00:00 2001 From: Kenneth Kwakye-Gyamfi Date: Fri, 17 Apr 2020 00:50:02 +0000 Subject: [PATCH 01/14] Proof of concept - CodeSandbox embed --- docs/ReduxIntegration.md | 12 ++++++++++++ website/i18n/en.json | 4 ++++ website/pages/en/index.js | 2 +- website/sidebars.json | 1 + 4 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 docs/ReduxIntegration.md diff --git a/docs/ReduxIntegration.md b/docs/ReduxIntegration.md new file mode 100644 index 000000000..e824e7ce9 --- /dev/null +++ b/docs/ReduxIntegration.md @@ -0,0 +1,12 @@ +--- +id: redux-integration +title: Redux Integration +--- + +Codesandbox provided as proof. + + diff --git a/website/i18n/en.json b/website/i18n/en.json index 1a1e5c3f8..cda95bd4b 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -13,6 +13,9 @@ }, "api-queries": { "title": "Queries" + }, + "redux-integration": { + "title": "Redux Integration" } }, "links": { @@ -21,6 +24,7 @@ }, "categories": { "Introduction": "Introduction", + "Examples": "Examples", "API Reference": "API Reference" } }, diff --git a/website/pages/en/index.js b/website/pages/en/index.js index e86e59ffc..39161f4b9 100644 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -30,7 +30,7 @@ Button.defaultProps = { target: '_self', }; -const SplashContainer = props => ( +const SplashContainer = (props) => (
{props.children}
diff --git a/website/sidebars.json b/website/sidebars.json index 56e08cbd5..6b2a9e1c5 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -1,6 +1,7 @@ { "docs": { "Introduction": ["getting-started"], + "Examples": ["redux-integration"], "API Reference": ["api", "api-queries"] } } From 51d2faf148a1221fa0adc5890a5315010e5ab451 Mon Sep 17 00:00:00 2001 From: Kenneth Kwakye-Gyamfi Date: Sat, 18 Apr 2020 07:14:22 +0000 Subject: [PATCH 02/14] Prettier fix --- website/pages/en/index.js | 2 +- website/siteConfig.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/website/pages/en/index.js b/website/pages/en/index.js index 39161f4b9..e86e59ffc 100644 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -30,7 +30,7 @@ Button.defaultProps = { target: '_self', }; -const SplashContainer = (props) => ( +const SplashContainer = props => (
{props.children}
diff --git a/website/siteConfig.js b/website/siteConfig.js index 19fd95803..2c4ea5065 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -84,7 +84,7 @@ const siteConfig = { // template. For example, if you need your repo's URL... repoUrl, usePrism: ['jsx'], - + // search algolia: { apiKey: 'cd9b8b73f97b64ed04570e41c507683f', From ef2524f6ecc22af1c71bc0b476571537046ec11b Mon Sep 17 00:00:00 2001 From: Kenneth Kwakye-Gyamfi Date: Sat, 18 Apr 2020 07:15:02 +0000 Subject: [PATCH 03/14] Moved examples below API Reference --- website/i18n/en.json | 4 ++-- website/sidebars.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/website/i18n/en.json b/website/i18n/en.json index cda95bd4b..1bcc968cc 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -24,8 +24,8 @@ }, "categories": { "Introduction": "Introduction", - "Examples": "Examples", - "API Reference": "API Reference" + "API Reference": "API Reference", + "Examples": "Examples" } }, "pages-strings": { diff --git a/website/sidebars.json b/website/sidebars.json index 6b2a9e1c5..b4dc17b56 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -1,7 +1,7 @@ { "docs": { "Introduction": ["getting-started"], - "Examples": ["redux-integration"], - "API Reference": ["api", "api-queries"] + "API Reference": ["api", "api-queries"], + "Examples": ["redux-integration"] } } From 501cc973487731ccb62e754947f6b632ac4b63b2 Mon Sep 17 00:00:00 2001 From: Kenneth Kwakye-Gyamfi Date: Thu, 23 Apr 2020 20:26:25 +0000 Subject: [PATCH 04/14] Created the examples directory Includes react-navigation example --- examples/reactnavigation/.buckconfig | 6 +++ examples/reactnavigation/.watchmanconfig | 1 + examples/reactnavigation/app.json | 4 ++ examples/reactnavigation/babel.config.js | 3 ++ examples/reactnavigation/index.js | 7 +++ examples/reactnavigation/jest.config.js | 9 ++++ examples/reactnavigation/metro.config.js | 10 ++++ examples/reactnavigation/package.json | 32 ++++++++++++ examples/reactnavigation/src/App.js | 23 +++++++++ examples/reactnavigation/src/Navigation.js | 19 +++++++ .../src/screens/DetailsScreen.js | 24 +++++++++ .../reactnavigation/src/screens/HomeScreen.js | 50 +++++++++++++++++++ .../reactnavigation/tests/Navigation.test.js | 46 +++++++++++++++++ 13 files changed, 234 insertions(+) create mode 100644 examples/reactnavigation/.buckconfig create mode 100644 examples/reactnavigation/.watchmanconfig create mode 100644 examples/reactnavigation/app.json create mode 100644 examples/reactnavigation/babel.config.js create mode 100644 examples/reactnavigation/index.js create mode 100644 examples/reactnavigation/jest.config.js create mode 100644 examples/reactnavigation/metro.config.js create mode 100644 examples/reactnavigation/package.json create mode 100644 examples/reactnavigation/src/App.js create mode 100644 examples/reactnavigation/src/Navigation.js create mode 100644 examples/reactnavigation/src/screens/DetailsScreen.js create mode 100644 examples/reactnavigation/src/screens/HomeScreen.js create mode 100644 examples/reactnavigation/tests/Navigation.test.js diff --git a/examples/reactnavigation/.buckconfig b/examples/reactnavigation/.buckconfig new file mode 100644 index 000000000..934256cb2 --- /dev/null +++ b/examples/reactnavigation/.buckconfig @@ -0,0 +1,6 @@ + +[android] + target = Google Inc.:Google APIs:23 + +[maven_repositories] + central = https://repo1.maven.org/maven2 diff --git a/examples/reactnavigation/.watchmanconfig b/examples/reactnavigation/.watchmanconfig new file mode 100644 index 000000000..0967ef424 --- /dev/null +++ b/examples/reactnavigation/.watchmanconfig @@ -0,0 +1 @@ +{} diff --git a/examples/reactnavigation/app.json b/examples/reactnavigation/app.json new file mode 100644 index 000000000..8cd023e11 --- /dev/null +++ b/examples/reactnavigation/app.json @@ -0,0 +1,4 @@ +{ + "name": "reactnavigation", + "displayName": "reactnavigation" +} diff --git a/examples/reactnavigation/babel.config.js b/examples/reactnavigation/babel.config.js new file mode 100644 index 000000000..f842b77fc --- /dev/null +++ b/examples/reactnavigation/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ['module:metro-react-native-babel-preset'], +}; diff --git a/examples/reactnavigation/index.js b/examples/reactnavigation/index.js new file mode 100644 index 000000000..b00129422 --- /dev/null +++ b/examples/reactnavigation/index.js @@ -0,0 +1,7 @@ +import 'react-native-gesture-handler'; +import { AppRegistry } from 'react-native'; + +import { name as appName } from './app.json'; +import App from './src/App'; + +AppRegistry.registerComponent(appName, () => App); diff --git a/examples/reactnavigation/jest.config.js b/examples/reactnavigation/jest.config.js new file mode 100644 index 000000000..f67104574 --- /dev/null +++ b/examples/reactnavigation/jest.config.js @@ -0,0 +1,9 @@ +module.exports = { + preset: 'react-native', + setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'], + moduleNameMapper: { + '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': + 'jest-transform-stub', + '\\.(css|less)$': 'identity-obj-proxy', + }, +}; diff --git a/examples/reactnavigation/metro.config.js b/examples/reactnavigation/metro.config.js new file mode 100644 index 000000000..5545c02b4 --- /dev/null +++ b/examples/reactnavigation/metro.config.js @@ -0,0 +1,10 @@ +module.exports = { + transformer: { + getTransformOptions: async () => ({ + transform: { + experimentalImportSupport: false, + inlineRequires: false, + }, + }), + }, +}; diff --git a/examples/reactnavigation/package.json b/examples/reactnavigation/package.json new file mode 100644 index 000000000..2ca7108ee --- /dev/null +++ b/examples/reactnavigation/package.json @@ -0,0 +1,32 @@ +{ + "name": "reactnavigation", + "description": "Testing react-native-testing-library with react-navigation", + "version": "0.0.1", + "private": true, + "scripts": { + "test": "jest" + }, + "dependencies": { + "@react-native-community/masked-view": "^0.1.9", + "@react-navigation/native": "^5.1.6", + "@react-navigation/stack": "^5.2.13", + "prop-types": "^15.7.2", + "react": "^16.13.1", + "react-native": "^0.62.2", + "react-native-gesture-handler": "^1.6.1", + "react-native-reanimated": "^1.8.0", + "react-native-safe-area-context": "^0.7.3", + "react-native-screens": "^2.5.0" + }, + "devDependencies": { + "@babel/core": "^7.9.0", + "@babel/runtime": "^7.9.2", + "babel-jest": "^25.4.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^25.4.0", + "jest-transform-stub": "^2.0.0", + "metro-react-native-babel-preset": "^0.59.0", + "react-native-testing-library": "^1.13.0", + "react-test-renderer": "^16.13.1" + } +} diff --git a/examples/reactnavigation/src/App.js b/examples/reactnavigation/src/App.js new file mode 100644 index 000000000..caccf51de --- /dev/null +++ b/examples/reactnavigation/src/App.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { StatusBar, StyleSheet, View } from 'react-native'; +import { NavigationContainer } from '@react-navigation/native'; + +import Navigation from './Navigation'; + +export default function App() { + return ( + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, +}); diff --git a/examples/reactnavigation/src/Navigation.js b/examples/reactnavigation/src/Navigation.js new file mode 100644 index 000000000..e0510ce60 --- /dev/null +++ b/examples/reactnavigation/src/Navigation.js @@ -0,0 +1,19 @@ +import 'react-native-gesture-handler'; +import React from 'react'; +import { createStackNavigator } from '@react-navigation/stack'; + +import HomeScreen from './screens/HomeScreen'; +import DetailsScreen from './screens/DetailsScreen'; + +const { Screen, Navigator } = createStackNavigator(); + +export default function Navigation() { + const options = {}; + + return ( + + + + + ); +} diff --git a/examples/reactnavigation/src/screens/DetailsScreen.js b/examples/reactnavigation/src/screens/DetailsScreen.js new file mode 100644 index 000000000..0f7ed93b7 --- /dev/null +++ b/examples/reactnavigation/src/screens/DetailsScreen.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { Text, StyleSheet, View } from 'react-native'; + +export default function DetailsScreen(props) { + const item = Number.parseInt(props.route.params, 10); + + return ( + + Showing details for {item} + the number you have chosen is {item} + + ); +} + +const styles = StyleSheet.create({ + header: { + fontSize: 20, + textAlign: 'center', + marginVertical: 16, + }, + body: { + textAlign: 'center', + }, +}); diff --git a/examples/reactnavigation/src/screens/HomeScreen.js b/examples/reactnavigation/src/screens/HomeScreen.js new file mode 100644 index 000000000..ac1aa831e --- /dev/null +++ b/examples/reactnavigation/src/screens/HomeScreen.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { + Text, + View, + FlatList, + TouchableOpacity, + StyleSheet, +} from 'react-native'; + +export default function HomeScreen({ navigation }) { + const [items] = React.useState( + new Array(20).fill(null).map((_, idx) => idx + 1) + ); + + const onOpacityPress = item => navigation.navigate('Details', item); + + return ( + + List of numbers from 1 to 20 + `${idx}`} + data={items} + renderItem={({ item }) => ( + onOpacityPress(item)} + style={styles.row} + > + Item number {item} + + )} + /> + + ); +} + +const divider = '#DDDDDD'; + +const styles = StyleSheet.create({ + header: { + fontSize: 20, + textAlign: 'center', + marginVertical: 16, + }, + row: { + paddingVertical: 16, + paddingHorizontal: 24, + borderBottomColor: divider, + borderBottomWidth: 1, + }, +}); diff --git a/examples/reactnavigation/tests/Navigation.test.js b/examples/reactnavigation/tests/Navigation.test.js new file mode 100644 index 000000000..7234519ca --- /dev/null +++ b/examples/reactnavigation/tests/Navigation.test.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { render, fireEvent, cleanup } from 'react-native-testing-library'; + +import Navigation from '../src/Navigation'; + +// Resolves the error in https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 +jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); + +describe('Testing react navigation', () => { + afterEach(cleanup); + + test('page contains the header and 10 items', () => { + const component = ( + + + + ); + + const { getByText, getAllByText } = render(component); + + const header = getByText('List of numbers from 1 to 20'); + const items = getAllByText(/Item number/); + + expect(header).toBeTruthy(); + expect(items.length).toBe(10); + }); + + test('clicking on one item takes you to the details screen', async () => { + const component = ( + + + + ); + + const { getByText } = render(component); + const toClick = getByText('Item number 5'); + + fireEvent(toClick, 'press'); + const newHeader = getByText('Showing details for 5'); + const newBody = getByText('the number you have chosen is 5'); + + expect(newHeader).toBeTruthy(); + expect(newBody).toBeTruthy(); + }); +}); From e2862502fd51aaa05819994fd7f703242734f25a Mon Sep 17 00:00:00 2001 From: Kenneth Kwakye-Gyamfi Date: Thu, 23 Apr 2020 20:26:42 +0000 Subject: [PATCH 05/14] Article on React Navigation --- docs/ReactNavigation.md | 220 ++++++++++++++++++++++++++++++++++ docs/ReduxIntegration.md | 12 -- website/i18n/en.json | 4 +- website/sidebars.json | 2 +- website/static/css/custom.css | 8 ++ 5 files changed, 231 insertions(+), 15 deletions(-) create mode 100644 docs/ReactNavigation.md delete mode 100644 docs/ReduxIntegration.md diff --git a/docs/ReactNavigation.md b/docs/ReactNavigation.md new file mode 100644 index 000000000..e2b376baf --- /dev/null +++ b/docs/ReactNavigation.md @@ -0,0 +1,220 @@ +--- +id: react-navigation +title: React Navigation +--- + +This section deals with integrating RNTL with `react-navigation`. To get started with the example project, create a new project using [this guide](https://reactnative.dev/docs/environment-setup) + +## Test packages required: + +- `jest` +- `react-native-testing-library` +- `identity-obj-proxy` +- `jest-transform-stub` + +## Setting up + +Install the packages required for react navigation. For this example, we will use a [stack navigator](https://reactnavigation.org/docs/stack-navigator/) to transition to the second page when any of the items are clicked on. + +``` +$ yarn add @react-native-community/masked-view @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens +``` + +Create a `./navigation.js` which will list the navigation stack + +```jsx +import 'react-native-gesture-handler'; +import React from 'react'; +import { createStackNavigator } from '@react-navigation/stack'; + +import HomeScreen from './screens/HomeScreen'; +import DetailsScreen from './screens/DetailsScreen'; + +const { Screen, Navigator } = createStackNavigator(); + +export default function Navigation() { + const options = {}; + + return ( + + + + + ); +} +``` + +Create your two screens which we will transition to and from them. The homescreen, found in `./screens/HomeScreen.js` will simply contain a list of elements presented in a list view. On tap of any of these items will move to the details screen with the item number. + +The details screen, found in `./screens/DetailsScreen.js` will simply contain a header with the item number passed from the home screen. + +```jsx +// ./screens/HomeScreen.js +import React from 'react'; +import { + Text, + View, + FlatList, + TouchableOpacity, + StyleSheet, +} from 'react-native'; + +export default function HomeScreen({ navigation }) { + const [items] = React.useState( + new Array(20).fill(null).map((_, idx) => idx + 1) + ); + + const onOpacityPress = item => navigation.navigate('Details', item); + + return ( + + List of numbers from 1 to 20 + `${idx}`} + data={items} + renderItem={({ item }) => ( + onOpacityPress(item)} + style={styles.row} + > + Item number {item} + + )} + /> + + ); +} + +const divider = '#DDDDDD'; + +const styles = StyleSheet.create({ + header: { + fontSize: 20, + textAlign: 'center', + marginVertical: 16, + }, + row: { + paddingVertical: 16, + paddingHorizontal: 24, + borderBottomColor: divider, + borderBottomWidth: 1, + }, +}); +``` + +```jsx +// ./screens/DetailsScreen.js +import React from 'react'; +import { Text, StyleSheet, View } from 'react-native'; + +export default function DetailsScreen(props) { + const item = Number.parseInt(props.route.params, 10); + + return ( + + Showing details for {item} + the number you have chosen is {item} + + ); +} + +const styles = StyleSheet.create({ + header: { + fontSize: 20, + textAlign: 'center', + marginVertical: 16, + }, + body: { + textAlign: 'center', + }, +}); +``` + +## Setting up the test environment + +To setup, simply install `jest`, `react-native-testing-library` and the other devDependencies listed [above](#test-packages-required) + +``` +$ yarn add -D jest react-native-testing-library identity-obj-proxy jest-transform-stub +``` + +Create your `jest.config.js` file (or place the following properties in your `package.json` as a "jest" property) + +```js +module.exports = { + preset: 'react-native', + setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'], + moduleNameMapper: { + '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': + 'jest-transform-stub', + '\\.(css|less)$': 'identity-obj-proxy', + }, +}; +``` + +For this example, we are going to test out two things. The first thing is that the page is laid out as expected. The second, and most important, is that the page will transition to the detail screen when any item is tapped on. + +We create a `tests` directory and create our `Navigation.test.js` file: + +```js +import React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { render, fireEvent, cleanup } from 'react-native-testing-library'; + +import Navigation from '../Navigation'; + +// Resolves the error in https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 +jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); + +describe('Testing react navigation', () => { + afterEach(cleanup); + + test('page contains the header and 10 items', () => { + const component = ( + + + + ); + + const { getByText, getAllByText } = render(component); + + const header = getByText('List of numbers from 1 to 20'); + const items = getAllByText(/Item number/); + + expect(header).toBeTruthy(); + expect(items.length).toBe(10); + }); + + test('clicking on one item takes you to the details screen', async () => { + const component = ( + + + + ); + + const { getByText } = render(component); + const toClick = getByText('Item number 5'); + + fireEvent(toClick, 'press'); + const newHeader = getByText('Showing details for 5'); + const newBody = getByText('the number you have chosen is 5'); + + expect(newHeader).toBeTruthy(); + expect(newBody).toBeTruthy(); + }); +}); +``` + +## Running tests + +To run the tests, simply place a test script inside your `package.json` + +```json +{ + "scripts": { + "test": "jest" + } +} +``` + +Run the test script and watch the magic. diff --git a/docs/ReduxIntegration.md b/docs/ReduxIntegration.md deleted file mode 100644 index e824e7ce9..000000000 --- a/docs/ReduxIntegration.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: redux-integration -title: Redux Integration ---- - -Codesandbox provided as proof. - - diff --git a/website/i18n/en.json b/website/i18n/en.json index 1bcc968cc..42e143e8f 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -14,8 +14,8 @@ "api-queries": { "title": "Queries" }, - "redux-integration": { - "title": "Redux Integration" + "react-navigation": { + "title": "React Navigation" } }, "links": { diff --git a/website/sidebars.json b/website/sidebars.json index b4dc17b56..afa2cb112 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -2,6 +2,6 @@ "docs": { "Introduction": ["getting-started"], "API Reference": ["api", "api-queries"], - "Examples": ["redux-integration"] + "Examples": ["react-navigation"] } } diff --git a/website/static/css/custom.css b/website/static/css/custom.css index 8e44ea944..655aab7de 100644 --- a/website/static/css/custom.css +++ b/website/static/css/custom.css @@ -18,3 +18,11 @@ a { color: #bf8a65; } + +.button-container { + margin-bottom: 2rem; +} + +.sandbox { + background-color: blue; +} From c9060ced3c365eff52597185c5022a413f61fe63 Mon Sep 17 00:00:00 2001 From: Kenneth Kwakye-Gyamfi Date: Fri, 24 Apr 2020 05:44:02 +0000 Subject: [PATCH 06/14] Specify rootDir for testing Prevents CI to run example tests --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 28a7e4b39..c6f514cac 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,8 @@ "moduleFileExtensions": [ "js", "json" - ] + ], + "rootDir": "./src" }, "greenkeeper": { "ignore": [ From f69959f8f8c5eda83f1af90e6e0e3d14e34f38d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 24 Apr 2020 09:34:48 +0200 Subject: [PATCH 07/14] remove jest-transform-stub and identity-obj-proxy, add transformIgnorePatterns --- docs/ReactNavigation.md | 9 +-------- examples/reactnavigation/jest.config.js | 8 +++----- examples/reactnavigation/package.json | 2 -- 3 files changed, 4 insertions(+), 15 deletions(-) diff --git a/docs/ReactNavigation.md b/docs/ReactNavigation.md index e2b376baf..8f5d3cf63 100644 --- a/docs/ReactNavigation.md +++ b/docs/ReactNavigation.md @@ -9,8 +9,6 @@ This section deals with integrating RNTL with `react-navigation`. To get started - `jest` - `react-native-testing-library` -- `identity-obj-proxy` -- `jest-transform-stub` ## Setting up @@ -135,7 +133,7 @@ const styles = StyleSheet.create({ To setup, simply install `jest`, `react-native-testing-library` and the other devDependencies listed [above](#test-packages-required) ``` -$ yarn add -D jest react-native-testing-library identity-obj-proxy jest-transform-stub +$ yarn add -D jest react-native-testing-library ``` Create your `jest.config.js` file (or place the following properties in your `package.json` as a "jest" property) @@ -144,11 +142,6 @@ Create your `jest.config.js` file (or place the following properties in your `pa module.exports = { preset: 'react-native', setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'], - moduleNameMapper: { - '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': - 'jest-transform-stub', - '\\.(css|less)$': 'identity-obj-proxy', - }, }; ``` diff --git a/examples/reactnavigation/jest.config.js b/examples/reactnavigation/jest.config.js index f67104574..e8fd9d396 100644 --- a/examples/reactnavigation/jest.config.js +++ b/examples/reactnavigation/jest.config.js @@ -1,9 +1,7 @@ module.exports = { preset: 'react-native', setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'], - moduleNameMapper: { - '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': - 'jest-transform-stub', - '\\.(css|less)$': 'identity-obj-proxy', - }, + transformIgnorePatterns: [ + 'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)', + ], }; diff --git a/examples/reactnavigation/package.json b/examples/reactnavigation/package.json index 2ca7108ee..70d584272 100644 --- a/examples/reactnavigation/package.json +++ b/examples/reactnavigation/package.json @@ -22,9 +22,7 @@ "@babel/core": "^7.9.0", "@babel/runtime": "^7.9.2", "babel-jest": "^25.4.0", - "identity-obj-proxy": "^3.0.0", "jest": "^25.4.0", - "jest-transform-stub": "^2.0.0", "metro-react-native-babel-preset": "^0.59.0", "react-native-testing-library": "^1.13.0", "react-test-renderer": "^16.13.1" From e7ae24b114581b90d45f691b9099238274b7d48c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 24 Apr 2020 09:36:08 +0200 Subject: [PATCH 08/14] update docs --- docs/ReactNavigation.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/ReactNavigation.md b/docs/ReactNavigation.md index 8f5d3cf63..1fcf26e40 100644 --- a/docs/ReactNavigation.md +++ b/docs/ReactNavigation.md @@ -142,6 +142,9 @@ Create your `jest.config.js` file (or place the following properties in your `pa module.exports = { preset: 'react-native', setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'], + transformIgnorePatterns: [ + 'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)', + ], }; ``` From 7ef0cd8bddc17b8103269fb9bba077a00e01ff7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 24 Apr 2020 09:41:50 +0200 Subject: [PATCH 09/14] rearrange --- docs/ReactNavigation.md | 13 ++++--------- .../{tests => src/__tests__}/Navigation.test.js | 2 +- 2 files changed, 5 insertions(+), 10 deletions(-) rename examples/reactnavigation/{tests => src/__tests__}/Navigation.test.js (96%) diff --git a/docs/ReactNavigation.md b/docs/ReactNavigation.md index 1fcf26e40..db3d27dc8 100644 --- a/docs/ReactNavigation.md +++ b/docs/ReactNavigation.md @@ -3,16 +3,11 @@ id: react-navigation title: React Navigation --- -This section deals with integrating RNTL with `react-navigation`. To get started with the example project, create a new project using [this guide](https://reactnative.dev/docs/environment-setup) - -## Test packages required: - -- `jest` -- `react-native-testing-library` +This section deals with integrating `react-native-testing-library` with `react-navigation`, using Jest. ## Setting up -Install the packages required for react navigation. For this example, we will use a [stack navigator](https://reactnavigation.org/docs/stack-navigator/) to transition to the second page when any of the items are clicked on. +Install the packages required for React Navigation. For this example, we will use a [stack navigator](https://reactnavigation.org/docs/stack-navigator/) to transition to the second page when any of the items are clicked on. ``` $ yarn add @react-native-community/masked-view @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens @@ -42,7 +37,7 @@ export default function Navigation() { } ``` -Create your two screens which we will transition to and from them. The homescreen, found in `./screens/HomeScreen.js` will simply contain a list of elements presented in a list view. On tap of any of these items will move to the details screen with the item number. +Create your two screens which we will transition to and from them. The homescreen, found in `./screens/HomeScreen.js`, will simply contain a list of elements presented in a list view. On tap of any of these items will move to the details screen with the item number. The details screen, found in `./screens/DetailsScreen.js` will simply contain a header with the item number passed from the home screen. @@ -150,7 +145,7 @@ module.exports = { For this example, we are going to test out two things. The first thing is that the page is laid out as expected. The second, and most important, is that the page will transition to the detail screen when any item is tapped on. -We create a `tests` directory and create our `Navigation.test.js` file: +We create a `__tests__` directory and create our `Navigation.test.js` file: ```js import React from 'react'; diff --git a/examples/reactnavigation/tests/Navigation.test.js b/examples/reactnavigation/src/__tests__/Navigation.test.js similarity index 96% rename from examples/reactnavigation/tests/Navigation.test.js rename to examples/reactnavigation/src/__tests__/Navigation.test.js index 7234519ca..71fc1a4e7 100644 --- a/examples/reactnavigation/tests/Navigation.test.js +++ b/examples/reactnavigation/src/__tests__/Navigation.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { render, fireEvent, cleanup } from 'react-native-testing-library'; -import Navigation from '../src/Navigation'; +import Navigation from '../Navigation'; // Resolves the error in https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); From 9bfc4a43f20cf5924cd6be761bef6ec9fec543a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 24 Apr 2020 09:43:37 +0200 Subject: [PATCH 10/14] remove non-essential files --- examples/reactnavigation/.buckconfig | 6 ------ examples/reactnavigation/.watchmanconfig | 1 - examples/reactnavigation/app.json | 4 ---- examples/reactnavigation/index.js | 3 +-- examples/reactnavigation/metro.config.js | 10 ---------- 5 files changed, 1 insertion(+), 23 deletions(-) delete mode 100644 examples/reactnavigation/.buckconfig delete mode 100644 examples/reactnavigation/.watchmanconfig delete mode 100644 examples/reactnavigation/app.json delete mode 100644 examples/reactnavigation/metro.config.js diff --git a/examples/reactnavigation/.buckconfig b/examples/reactnavigation/.buckconfig deleted file mode 100644 index 934256cb2..000000000 --- a/examples/reactnavigation/.buckconfig +++ /dev/null @@ -1,6 +0,0 @@ - -[android] - target = Google Inc.:Google APIs:23 - -[maven_repositories] - central = https://repo1.maven.org/maven2 diff --git a/examples/reactnavigation/.watchmanconfig b/examples/reactnavigation/.watchmanconfig deleted file mode 100644 index 0967ef424..000000000 --- a/examples/reactnavigation/.watchmanconfig +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/examples/reactnavigation/app.json b/examples/reactnavigation/app.json deleted file mode 100644 index 8cd023e11..000000000 --- a/examples/reactnavigation/app.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "reactnavigation", - "displayName": "reactnavigation" -} diff --git a/examples/reactnavigation/index.js b/examples/reactnavigation/index.js index b00129422..dcf731945 100644 --- a/examples/reactnavigation/index.js +++ b/examples/reactnavigation/index.js @@ -1,7 +1,6 @@ import 'react-native-gesture-handler'; import { AppRegistry } from 'react-native'; -import { name as appName } from './app.json'; import App from './src/App'; -AppRegistry.registerComponent(appName, () => App); +AppRegistry.registerComponent('ReactNavigationExample', () => App); diff --git a/examples/reactnavigation/metro.config.js b/examples/reactnavigation/metro.config.js deleted file mode 100644 index 5545c02b4..000000000 --- a/examples/reactnavigation/metro.config.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - transformer: { - getTransformOptions: async () => ({ - transform: { - experimentalImportSupport: false, - inlineRequires: false, - }, - }), - }, -}; From bb01637c54aaa5a6e8a3fc1e79d6f7c8148c7a16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 24 Apr 2020 10:01:32 +0200 Subject: [PATCH 11/14] rename Navigation -> AppNavigator --- .gitignore | 3 +++ docs/ReactNavigation.md | 8 ++++---- examples/reactnavigation/src/App.js | 4 ++-- .../src/{Navigation.js => AppNavigator.js} | 0 .../{Navigation.test.js => AppNavigator.test.js} | 6 +++--- 5 files changed, 12 insertions(+), 9 deletions(-) rename examples/reactnavigation/src/{Navigation.js => AppNavigator.js} (100%) rename examples/reactnavigation/src/__tests__/{Navigation.test.js => AppNavigator.test.js} (93%) diff --git a/.gitignore b/.gitignore index a4985aa04..c77dbf4ce 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,6 @@ node_modules build .idea .DS_Store + +# Ignore lock files in examples for now +examples/**/yarn.lock diff --git a/docs/ReactNavigation.md b/docs/ReactNavigation.md index db3d27dc8..a10168ff0 100644 --- a/docs/ReactNavigation.md +++ b/docs/ReactNavigation.md @@ -13,7 +13,7 @@ Install the packages required for React Navigation. For this example, we will us $ yarn add @react-native-community/masked-view @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens ``` -Create a `./navigation.js` which will list the navigation stack +Create a `./AppNavigator.js` which will list the navigation stack ```jsx import 'react-native-gesture-handler'; @@ -152,7 +152,7 @@ import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { render, fireEvent, cleanup } from 'react-native-testing-library'; -import Navigation from '../Navigation'; +import AppNavigator from '../AppNavigator'; // Resolves the error in https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); @@ -163,7 +163,7 @@ describe('Testing react navigation', () => { test('page contains the header and 10 items', () => { const component = ( - + ); @@ -179,7 +179,7 @@ describe('Testing react navigation', () => { test('clicking on one item takes you to the details screen', async () => { const component = ( - + ); diff --git a/examples/reactnavigation/src/App.js b/examples/reactnavigation/src/App.js index caccf51de..288feadf4 100644 --- a/examples/reactnavigation/src/App.js +++ b/examples/reactnavigation/src/App.js @@ -2,7 +2,7 @@ import React from 'react'; import { StatusBar, StyleSheet, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import Navigation from './Navigation'; +import AppNavigator from './AppNavigator'; export default function App() { return ( @@ -10,7 +10,7 @@ export default function App() { - + ); diff --git a/examples/reactnavigation/src/Navigation.js b/examples/reactnavigation/src/AppNavigator.js similarity index 100% rename from examples/reactnavigation/src/Navigation.js rename to examples/reactnavigation/src/AppNavigator.js diff --git a/examples/reactnavigation/src/__tests__/Navigation.test.js b/examples/reactnavigation/src/__tests__/AppNavigator.test.js similarity index 93% rename from examples/reactnavigation/src/__tests__/Navigation.test.js rename to examples/reactnavigation/src/__tests__/AppNavigator.test.js index 71fc1a4e7..8403b9cbe 100644 --- a/examples/reactnavigation/src/__tests__/Navigation.test.js +++ b/examples/reactnavigation/src/__tests__/AppNavigator.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { render, fireEvent, cleanup } from 'react-native-testing-library'; -import Navigation from '../Navigation'; +import AppNavigator from '../AppNavigator'; // Resolves the error in https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); @@ -13,7 +13,7 @@ describe('Testing react navigation', () => { test('page contains the header and 10 items', () => { const component = ( - + ); @@ -29,7 +29,7 @@ describe('Testing react navigation', () => { test('clicking on one item takes you to the details screen', async () => { const component = ( - + ); From 10546d1ecf3fcea48c059a144cb8310e5db17784 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 24 Apr 2020 10:07:26 +0200 Subject: [PATCH 12/14] reword comment --- docs/ReactNavigation.md | 2 +- examples/reactnavigation/src/__tests__/AppNavigator.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ReactNavigation.md b/docs/ReactNavigation.md index a10168ff0..1ac21bec5 100644 --- a/docs/ReactNavigation.md +++ b/docs/ReactNavigation.md @@ -154,7 +154,7 @@ import { render, fireEvent, cleanup } from 'react-native-testing-library'; import AppNavigator from '../AppNavigator'; -// Resolves the error in https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 +// Silence the warning https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); describe('Testing react navigation', () => { diff --git a/examples/reactnavigation/src/__tests__/AppNavigator.test.js b/examples/reactnavigation/src/__tests__/AppNavigator.test.js index 8403b9cbe..b2f4a85c1 100644 --- a/examples/reactnavigation/src/__tests__/AppNavigator.test.js +++ b/examples/reactnavigation/src/__tests__/AppNavigator.test.js @@ -4,7 +4,7 @@ import { render, fireEvent, cleanup } from 'react-native-testing-library'; import AppNavigator from '../AppNavigator'; -// Resolves the error in https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 +// Silence the warning https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); describe('Testing react navigation', () => { From 614ae1c8cddb13307ac72354eee4757beececca7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 24 Apr 2020 10:50:15 +0200 Subject: [PATCH 13/14] add links and explanations --- docs/ReactNavigation.md | 24 ++++++++++++++---------- examples/reactnavigation/package.json | 4 ++-- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/docs/ReactNavigation.md b/docs/ReactNavigation.md index 1ac21bec5..0d4ced387 100644 --- a/docs/ReactNavigation.md +++ b/docs/ReactNavigation.md @@ -13,7 +13,7 @@ Install the packages required for React Navigation. For this example, we will us $ yarn add @react-native-community/masked-view @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens ``` -Create a `./AppNavigator.js` which will list the navigation stack +Create an [`./AppNavigator.js`](https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/AppNavigator.js) component which will list the navigation stack: ```jsx import 'react-native-gesture-handler'; @@ -37,12 +37,9 @@ export default function Navigation() { } ``` -Create your two screens which we will transition to and from them. The homescreen, found in `./screens/HomeScreen.js`, will simply contain a list of elements presented in a list view. On tap of any of these items will move to the details screen with the item number. - -The details screen, found in `./screens/DetailsScreen.js` will simply contain a header with the item number passed from the home screen. +Create your two screens which we will transition to and from them. The homescreen, found in [`./screens/HomeScreen.js`](https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/screens/HomeScreen.js), contains a list of elements presented in a list view. On tap of any of these items will move to the details screen with the item number: ```jsx -// ./screens/HomeScreen.js import React from 'react'; import { Text, @@ -95,6 +92,8 @@ const styles = StyleSheet.create({ }); ``` +The details screen, found in [`./screens/DetailsScreen.js`](https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/screens/DetailsScreen.js), contains a header with the item number passed from the home screen: + ```jsx // ./screens/DetailsScreen.js import React from 'react'; @@ -125,7 +124,7 @@ const styles = StyleSheet.create({ ## Setting up the test environment -To setup, simply install `jest`, `react-native-testing-library` and the other devDependencies listed [above](#test-packages-required) +Install required dev dependencies: ``` $ yarn add -D jest react-native-testing-library @@ -143,11 +142,16 @@ module.exports = { }; ``` +Notice the 2 entries that don't come with the default React Native project: + +- `setupFiles` – an array of files that Jest is going to execute before running your tests. In this case, we run `react-native-gesture-handler/jestSetup.js` which sets up necessary mocks for `react-native-gesture-handler` native module +- `transformIgnorePatterns` – an array of paths that Jest ignores when transforming code. In this case, the negative lookahead regular expression is used, to tell Jest to transform (with Babel) every package inside `node_modules/` that starts with `react-native`, `@react-native-community` or `@react-navigation` (added by us, the rest is in `react-native` preset by default, so you don't have to worry about it). + For this example, we are going to test out two things. The first thing is that the page is laid out as expected. The second, and most important, is that the page will transition to the detail screen when any item is tapped on. -We create a `__tests__` directory and create our `Navigation.test.js` file: +Let's a [`AppNavigator.test.js`](https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/__tests__/AppNavigator.js) file in `src/__tests__` directory: -```js +```jsx import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { render, fireEvent, cleanup } from 'react-native-testing-library'; @@ -198,7 +202,7 @@ describe('Testing react navigation', () => { ## Running tests -To run the tests, simply place a test script inside your `package.json` +To run the tests, place a test script inside your `package.json` ```json { @@ -208,4 +212,4 @@ To run the tests, simply place a test script inside your `package.json` } ``` -Run the test script and watch the magic. +And run the `test` script with `npm test` or `yarn test`. diff --git a/examples/reactnavigation/package.json b/examples/reactnavigation/package.json index 70d584272..c2428b592 100644 --- a/examples/reactnavigation/package.json +++ b/examples/reactnavigation/package.json @@ -1,6 +1,6 @@ { - "name": "reactnavigation", - "description": "Testing react-native-testing-library with react-navigation", + "name": "react-navigation-example", + "description": "Testing react-navigation with react-native-testing-library", "version": "0.0.1", "private": true, "scripts": { From 8e96b9792b9b93aabaaa5cc2dd0ebc77a3b8893a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 24 Apr 2020 10:52:52 +0200 Subject: [PATCH 14/14] remove index file, because it's not an app anyway --- examples/reactnavigation/index.js | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 examples/reactnavigation/index.js diff --git a/examples/reactnavigation/index.js b/examples/reactnavigation/index.js deleted file mode 100644 index dcf731945..000000000 --- a/examples/reactnavigation/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import 'react-native-gesture-handler'; -import { AppRegistry } from 'react-native'; - -import App from './src/App'; - -AppRegistry.registerComponent('ReactNavigationExample', () => App);