Remove use of getByTestID in documentation and tests (#294)

* Switched most tests from using test IDs

* Docs updated to use alternatives

src/__tests__/act.test.js

@@ -14,11 +14,8 @@ const UseEffect = ({ callback }: { callback: Function }) => {
 const Counter = () => {
   const [count, setCount] = React.useState(0);
 
-  return (
-    <Text testID="counter" onPress={() => setCount(count + 1)}>
-      {count}
-    </Text>
-  );
+  const text = `Total count: ${count}`;
+  return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
 };
 
 test('render should trigger useEffect', () => {
@@ -37,12 +34,12 @@ test('update should trigger useEffect', () => {
 });
 
 test('fireEvent should trigger useState', () => {
-  const { getByTestId } = render(<Counter />);
-  const counter = getByTestId('counter');
+  const { getByText } = render(<Counter />);
+  const counter = getByText(/Total count/i);
 
-  expect(counter.props.children).toEqual(0);
+  expect(counter.props.children).toEqual('Total count: 0');
   fireEvent.press(counter);
-  expect(counter.props.children).toEqual(1);
+  expect(counter.props.children).toEqual('Total count: 1');
 });
 
 test('should act even if there is no act in react-test-renderer', () => {

src/__tests__/fireEvent.test.js

@@ -9,59 +9,63 @@ import {
 } from 'react-native';
 import { render, fireEvent } from '..';
 
-const OnPressComponent = ({ onPress }) => (
+const OnPressComponent = ({ onPress, text }) => (
   <View>
-    <TouchableOpacity onPress={onPress} testID="button">
-      <Text testID="text-button">Press me</Text>
+    <TouchableOpacity onPress={onPress}>
+      <Text>{text}</Text>
     </TouchableOpacity>
   </View>
 );
 
 const WithoutEventComponent = () => (
   <View>
-    <Text testID="text">Content</Text>
+    <Text>Without event</Text>
   </View>
 );
 
 const CustomEventComponent = ({ onCustomEvent }) => (
   <TouchableOpacity onPress={onCustomEvent}>
-    <Text>Click me</Text>
+    <Text>Custom event component</Text>
   </TouchableOpacity>
 );
 
-const MyCustomButton = ({ handlePress }) => (
-  <OnPressComponent onPress={handlePress} />
+const MyCustomButton = ({ handlePress, text }) => (
+  <OnPressComponent onPress={handlePress} text={text} />
 );
 
 const CustomEventComponentWithCustomName = ({ handlePress }) => (
-  <MyCustomButton testID="my-custom-button" handlePress={handlePress} />
+  <MyCustomButton handlePress={handlePress} text="Custom component" />
 );
 
 describe('fireEvent', () => {
   test('should invoke specified event', () => {
     const onPressMock = jest.fn();
-    const { getByTestId } = render(<OnPressComponent onPress={onPressMock} />);
+    const { getByText } = render(
+      <OnPressComponent onPress={onPressMock} text="Press me" />
+    );
 
-    fireEvent(getByTestId('button'), 'press');
+    fireEvent(getByText('Press me'), 'press');
 
     expect(onPressMock).toHaveBeenCalled();
   });
 
   test('should invoke specified event on parent element', () => {
     const onPressMock = jest.fn();
-    const { getByTestId } = render(<OnPressComponent onPress={onPressMock} />);
-
-    fireEvent(getByTestId('text-button'), 'press');
+    const text = 'New press text';
+    const { getByText } = render(
+      <OnPressComponent onPress={onPressMock} text={text} />
+    );
 
+    fireEvent(getByText(text), 'press');
     expect(onPressMock).toHaveBeenCalled();
   });
 
   test('should throw an Error when event handler was not found', () => {
-    const { getByTestId } = render(
+    const { getByText } = render(
       <WithoutEventComponent onPress={() => 'this is not passed to children'} />
     );
 
-    expect(() => fireEvent(getByTestId('text'), 'press')).toThrow(
+    expect(() => fireEvent(getByText('Without event'), 'press')).toThrow(
       'No handler function found for event: "press"'
     );
   });
@@ -70,13 +74,13 @@ describe('fireEvent', () => {
     const handlerMock = jest.fn();
     const EVENT_DATA = 'event data';
 
-    const { getByTestId } = render(
+    const { getByText } = render(
       <View>
-        <CustomEventComponent testID="custom" onCustomEvent={handlerMock} />
+        <CustomEventComponent onCustomEvent={handlerMock} />
       </View>
     );
 
-    fireEvent(getByTestId('custom'), 'customEvent', EVENT_DATA);
+    fireEvent(getByText('Custom event component'), 'customEvent', EVENT_DATA);
 
     expect(handlerMock).toHaveBeenCalledWith(EVENT_DATA);
   });
@@ -84,9 +88,12 @@ describe('fireEvent', () => {
 
 test('fireEvent.press', () => {
   const onPressMock = jest.fn();
-  const { getByTestId } = render(<OnPressComponent onPress={onPressMock} />);
+  const text = 'Fireevent press';
+  const { getByText } = render(
+    <OnPressComponent onPress={onPressMock} text={text} />
+  );
 
-  fireEvent.press(getByTestId('text-button'));
+  fireEvent.press(getByText(text));
 
   expect(onPressMock).toHaveBeenCalled();
 });
@@ -101,13 +108,13 @@ test('fireEvent.scroll', () => {
     },
   };
 
-  const { getByTestId } = render(
-    <ScrollView testID="scroll-view" onScroll={onScrollMock}>
+  const { getByText } = render(
+    <ScrollView onScroll={onScrollMock}>
       <Text>XD</Text>
     </ScrollView>
   );
 
-  fireEvent.scroll(getByTestId('scroll-view'), eventData);
+  fireEvent.scroll(getByText('XD'), eventData);
 
   expect(onScrollMock).toHaveBeenCalledWith(eventData);
 });
@@ -116,13 +123,16 @@ test('fireEvent.changeText', () => {
   const onChangeTextMock = jest.fn();
   const CHANGE_TEXT = 'content';
 
-  const { getByTestId } = render(
+  const { getByPlaceholder } = render(
     <View>
-      <TextInput testID="text-input" onChangeText={onChangeTextMock} />
+      <TextInput
+        placeholder="Customer placeholder"
+        onChangeText={onChangeTextMock}
+      />
     </View>
   );
 
-  fireEvent.changeText(getByTestId('text-input'), CHANGE_TEXT);
+  fireEvent.changeText(getByPlaceholder('Customer placeholder'), CHANGE_TEXT);
 
   expect(onChangeTextMock).toHaveBeenCalledWith(CHANGE_TEXT);
 });
@@ -130,11 +140,11 @@ test('fireEvent.changeText', () => {
 test('custom component with custom event name', () => {
   const handlePress = jest.fn();
 
-  const { getByTestId } = render(
+  const { getByText } = render(
     <CustomEventComponentWithCustomName handlePress={handlePress} />
   );
 
-  fireEvent(getByTestId('my-custom-button'), 'handlePress');
+  fireEvent(getByText('Custom component'), 'handlePress');
 
   expect(handlePress).toHaveBeenCalled();
 });
@@ -142,11 +152,11 @@ test('custom component with custom event name', () => {
 test('event with multiple handler parameters', () => {
   const handlePress = jest.fn();
 
-  const { getByTestId } = render(
+  const { getByText } = render(
     <CustomEventComponentWithCustomName handlePress={handlePress} />
   );
 
-  fireEvent(getByTestId('my-custom-button'), 'handlePress', 'param1', 'param2');
+  fireEvent(getByText('Custom component'), 'handlePress', 'param1', 'param2');
 
   expect(handlePress).toHaveBeenCalledWith('param1', 'param2');
 });

src/__tests__/render.test.js

@@ -110,8 +110,8 @@ test('getAllByTestId, queryAllByTestId', () => {
 });
 
 test('getByName, queryByName', () => {
-  const { getByTestId, getByName, queryByName } = render(<Banana />);
-  const bananaFresh = getByTestId('bananaFresh');
+  const { getByText, getByName, queryByName } = render(<Banana />);
+  const bananaFresh = getByText('not fresh');
   const button = getByName('Button');
 
   button.props.onPress();

src/__tests__/shallow.test.js

@@ -20,8 +20,8 @@ test('shallow rendering React elements', () => {
 });
 
 test('shallow rendering React Test Instance', () => {
-  const { getByTestId } = render(<TextPress />);
-  const { output } = shallow(getByTestId('text-button'));
+  const { getByText } = render(<TextPress />);
+  const { output } = shallow(getByText('Press me'));
 
   expect(output).toMatchSnapshot();
 });

src/__tests__/waitForElement.test.js

@@ -11,7 +11,7 @@ class Banana extends React.Component<any> {
   render() {
     return (
       <View>
-        {this.props.fresh && <Text testID="fresh">Fresh</Text>}
+        {this.props.fresh && <Text>Fresh</Text>}
         <TouchableOpacity onPress={this.changeFresh}>
           <Text>Change freshness!</Text>
         </TouchableOpacity>
@@ -36,25 +36,23 @@ class BananaContainer extends React.Component<{}, any> {
 }
 
 test('waits for element until it stops throwing', async () => {
-  const { getByTestId, getByName, queryByTestId } = render(<BananaContainer />);
+  const { getByText, getByName, queryByText } = render(<BananaContainer />);
 
   fireEvent.press(getByName('TouchableOpacity'));
 
-  expect(queryByTestId('fresh')).toBeNull();
+  expect(queryByText('Fresh')).toBeNull();
 
-  const freshBananaText = await waitForElement(() => getByTestId('fresh'));
+  const freshBananaText = await waitForElement(() => getByText('Fresh'));
 
   expect(freshBananaText.props.children).toBe('Fresh');
 });
 
 test('waits for element until timeout is met', async () => {
-  const { getByTestId, getByName } = render(<BananaContainer />);
+  const { getByText, getByName } = render(<BananaContainer />);
 
   fireEvent.press(getByName('TouchableOpacity'));
 
-  await expect(
-    waitForElement(() => getByTestId('fresh'), 100)
-  ).rejects.toThrow();
+  await expect(waitForElement(() => getByText('Fresh'), 100)).rejects.toThrow();
 });
 
 test('waits for element with custom interval', async () => {