refactor: use jest-native text matcher in tests

Author: bcarroll22

examples/__tests__/input-event.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, TextInput, View } from 'react-native';
-import { render, fireEvent } from '../../src';
+import { render, fireEvent } from 'native-testing-library';
 
 class CostInput extends React.Component {
   state = {

examples/__tests__/react-context.js

@@ -1,12 +1,13 @@
+import 'jest-native/extend-expect';
 import React from 'react';
 import { Text } from 'react-native';
+import { render } from 'native-testing-library';
 
-import { render } from '../../src';
 import { NameContext, NameProvider, NameConsumer } from '../react-context';
 
 test('NameConsumer shows default value', () => {
   const { getByText } = render(<NameConsumer />);
-  expect(getByText(/^My Name Is:/).props.children.join('')).toBe('My Name Is: Unknown');
+  expect(getByText(/^My Name Is:/)).toHaveTextContent('My Name Is: Unknown');
 });
 
 test('NameConsumer shows value from provider', () => {
@@ -16,7 +17,7 @@ test('NameConsumer shows value from provider', () => {
     </NameContext.Provider>
   );
   const { getByText } = render(tree);
-  expect(getByText(/^My Name Is:/).props.children.join('')).toBe('My Name Is: C3P0');
+  expect(getByText(/^My Name Is:/)).toHaveTextContent('My Name Is: C3P0');
 });
 
 test('NameProvider composes full name from first, last', () => {
@@ -26,7 +27,7 @@ test('NameProvider composes full name from first, last', () => {
     </NameProvider>
   );
   const { getByText } = render(tree);
-  expect(getByText(/^Received:/).props.children.join('')).toBe('Received: Boba Fett');
+  expect(getByText(/^Received:/)).toHaveTextContent('Received: Boba Fett');
 });
 
 test('NameProvider/Consumer shows name of character', () => {
@@ -36,5 +37,5 @@ test('NameProvider/Consumer shows name of character', () => {
     </NameProvider>
   );
   const { getByText } = render(tree);
-  expect(getByText(/^My Name Is:/).props.children.join('')).toBe('My Name Is: Leia Organa');
+  expect(getByText(/^My Name Is:/)).toHaveTextContent('My Name Is: Leia Organa');
 });

examples/__tests__/react-intl.js

@@ -5,7 +5,7 @@ import { FormattedDate } from 'react-intl-native';
 import IntlPolyfill from 'intl';
 import 'intl/locale-data/jsonp/pt';
 
-import { getByText, render } from '../../src';
+import { getByText, render } from 'native-testing-library';
 
 const setupTests = () => {
   if (global.Intl) {

examples/__tests__/react-navigation.js

@@ -1,11 +1,12 @@
+import 'jest-native/extend-expect';
 import React from 'react';
 import { Button, Text, View } from 'react-native';
 import { createStackNavigator, createAppContainer, withNavigation } from 'react-navigation';
 
-import { render, fireEvent } from '../../src';
+import { render, fireEvent } from 'native-testing-library';
 
 jest.mock('NativeAnimatedHelper').mock('react-native-gesture-handler', () => {
-  const View = require('react-native/Libraries/Components/View/View');
+  const View = require('react-native').View;
   return {
     State: {},
     PanGestureHandler: View,
@@ -14,6 +15,7 @@ jest.mock('NativeAnimatedHelper').mock('react-native-gesture-handler', () => {
   };
 });
 
+const originalConsoleWarn = console.warn;
 console.warn = arg => {
   const warnings = [
     'Calling .measureInWindow()',
@@ -25,21 +27,23 @@ console.warn = arg => {
 
   const finalArgs = warnings.reduce((acc, curr) => (arg.includes(curr) ? [...acc, arg] : acc), []);
 
-  if (!finalArgs.length) {
-    console.warn(arg);
+  if (finalArgs.length) {
+    return;
   }
+
+  originalConsoleWarn(message);
 };
 
 const Home = ({ navigation }) => (
   <View>
     <Text testID="title">Home page</Text>
-    <Button title="About page" onPress={() => navigation.navigate('About')} />
+    <Button title="Go to about" onPress={() => navigation.navigate('About')} />
   </View>
 );
 const About = ({ navigation }) => (
   <View>
     <Text testID="title">About page</Text>
-    <Button title="About page" onPress={() => navigation.navigate('Home')} />
+    <Button title="Go to home" onPress={() => navigation.navigate('Home')} />
   </View>
 );
 const Location = () => (
@@ -71,15 +75,18 @@ function renderWithNavigation({ screens = {}, navigatorConfig = {} } = {}) {
 
 test('full app rendering/navigating', async () => {
   const { findByText, getByTestId, getByText } = renderWithNavigation();
-  expect(getByTestId('title').props.children).toMatch('Home page');
-  fireEvent.press(getByText(/About page/i));
-  await expect(findByText('About page')).toBeTruthy();
+
+  expect(getByTestId('title')).toHaveTextContent('Home page');
+  fireEvent.press(getByText(/Go to about/i));
+
+  const result = await findByText('About page');
+  expect(result).toHaveTextContent('About page');
 });
 
 test('rendering a component that uses withNavigation', () => {
   const initialRouteName = 'Location';
   const { getByTestId } = renderWithNavigation({
     navigatorConfig: { initialRouteName },
   });
-  expect(getByTestId('location-display').props.children).toBe(initialRouteName);
+  expect(getByTestId('location-display')).toHaveTextContent(initialRouteName);
 });

examples/__tests__/react-redux.js

@@ -1,8 +1,9 @@
+import 'jest-native/extend-expect';
 import React from 'react';
-import { Button, Text, View } from 'react-native';
 import { createStore } from 'redux';
 import { Provider, connect } from 'react-redux';
-import { render, fireEvent } from '../../src';
+import { Button, Text, View } from 'react-native';
+import { render, fireEvent } from 'native-testing-library';
 
 class Counter extends React.Component {
   increment = () => {
@@ -54,15 +55,15 @@ function renderWithRedux(ui, { initialState, store = createStore(reducer, initia
 test('can render with redux with defaults', () => {
   const { getByTestId, getByText } = renderWithRedux(<ConnectedCounter />);
   fireEvent.press(getByText('+'));
-  expect(getByTestId('count-value').props.children).toBe(1);
+  expect(getByTestId('count-value')).toHaveTextContent(1);
 });
 
 test('can render with redux with custom initial state', () => {
   const { getByTestId, getByText } = renderWithRedux(<ConnectedCounter />, {
     initialState: { count: 3 },
   });
   fireEvent.press(getByText('-'));
-  expect(getByTestId('count-value').props.children).toBe(2);
+  expect(getByTestId('count-value')).toHaveTextContent(2);
 });
 
 test('can render with redux with custom store', () => {
@@ -71,7 +72,7 @@ test('can render with redux with custom store', () => {
     store,
   });
   fireEvent.press(getByText('+'));
-  expect(getByTestId('count-value').props.children).toBe(1000);
+  expect(getByTestId('count-value')).toHaveTextContent(1000);
   fireEvent.press(getByText('-'));
-  expect(getByTestId('count-value').props.children).toBe(1000);
+  expect(getByTestId('count-value')).toHaveTextContent(1000);
 });

examples/__tests__/update-props.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import 'jest-native/extend-expect';
 import { Text, View } from 'react-native';
-import { render } from '../../src';
+import { render } from 'native-testing-library';
 
 let idCounter = 1;
 
@@ -18,10 +19,10 @@ class NumberDisplay extends React.Component {
 
 test('calling render with the same component on the same container does not remount', () => {
   const { getByTestId, rerender } = render(<NumberDisplay number={1} />);
-  expect(getByTestId('number-display').props.children).toEqual(1);
+  expect(getByTestId('number-display')).toHaveTextContent(1);
 
   rerender(<NumberDisplay number={2} />);
-  expect(getByTestId('number-display').props.children).toEqual(2);
+  expect(getByTestId('number-display')).toHaveTextContent(2);
 
-  expect(getByTestId('instance-id').props.children).toEqual(1);
+  expect(getByTestId('instance-id')).toHaveTextContent(1);
 });

examples/jest.config.js

@@ -4,6 +4,6 @@ module.exports = {
   roots: [__dirname],
   rootDir: __dirname,
   moduleNameMapper: {
-    'rn-testing-library': '<rootDir>src',
+    'native-testing-library': '<rootDir>src',
   },
 };

package.json

@@ -48,6 +48,7 @@
     "jest": "24.5.0",
     "jest-fetch-mock": "^2.1.1",
     "jest-in-case": "^1.0.2",
+    "jest-native": "^1.2.0",
     "metro-react-native-babel-preset": "^0.52.0",
     "prettier": "^1.16.4",
     "pretty-quick": "^1.10.0",

src/__tests__/act.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'jest-native/extend-expect';
 import { Button } from 'react-native';
 
 import { render, fireEvent } from '../';
@@ -25,7 +26,7 @@ test('fireEvent triggers useEffect calls', () => {
   const buttonNode = getByText('0');
   effectCb.mockClear();
   fireEvent.press(buttonNode);
-  expect(buttonNode.props.children).toEqual('1');
+  expect(buttonNode).toHaveTextContent('1');
   expect(effectCb).toHaveBeenCalledTimes(1);
 });
 

src/__tests__/end-to-end.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import 'jest-native/extend-expect';
 import { Text } from 'react-native';
+
 import { render, wait } from '../';
 
 const fetchAMessage = () =>
@@ -32,5 +34,5 @@ test('it waits for the data to be loaded', async () => {
   expect(queryByText('Loading...')).toBeTruthy();
 
   await wait(() => expect(queryByText('Loading...')).toBeNull());
-  expect(queryByTestId('message').props.children.join('')).toMatch(/Hello World/);
+  expect(queryByTestId('message')).toHaveTextContent(/Hello World/);
 });

src/__tests__/fetch.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'jest-native/extend-expect';
 import { TouchableOpacity, Text, View } from 'react-native';
 
 import { render, fireEvent, wait } from '../';
@@ -42,6 +43,6 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
   expect(fetch).toHaveBeenCalledTimes(1);
   expect(fetch).toHaveBeenCalledWith(url);
 
-  expect(getByText('hello there').props.children).toEqual('hello there');
+  expect(getByText('hello there')).toHaveTextContent('hello there');
   expect(container).toMatchSnapshot();
 });

src/__tests__/rerender.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'jest-native/extend-expect';
 import { Text } from 'react-native';
 
 import { render } from '../';
@@ -9,7 +10,7 @@ test('rerender will re-render the element', () => {
 
   const message = getByText('hi');
 
-  expect(message.props.children).toEqual('hi');
+  expect(message).toHaveTextContent('hi');
   rerender(<Greeting message="hey" />);
-  expect(message.props.children).toEqual('hey');
+  expect(message).toHaveTextContent('hey');
 });