@testing-library/react-native 12.1.2 → 12.2.0

package/src/__tests__/jest-native.test.tsx

@@ -0,0 +1,84 @@
+import * as 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(
+    <View>
+      <Button title="Enabled Button" onPress={jest.fn()} />
+      <Button title="Disabled Button" disabled={true} onPress={jest.fn()} />
+      <Text accessibilityHint="Empty Text" style={style.style1} />
+      <Text accessibilityHint="Not Empty Text">Not empty</Text>
+      <View accessibilityHint="Empty View" />
+      <View accessibilityHint="Not Empty View">
+        <Text />
+      </View>
+      <View accessibilityHint="Container View">
+        <View accessibilityHint="First-Level Child">
+          <Text>Second-Level Child</Text>
+        </View>
+      </View>
+      <TextInput
+        accessibilityHint="Text Input"
+        allowFontScaling={false}
+        secureTextEntry={true}
+        defaultValue="111"
+      />
+    </View>
+  );
+
+  expect(getByText('Enabled Button')).toBeEnabled();
+  expect(getByText('Disabled Button')).not.toBeEnabled();
+  expect(getByText('Disabled Button')).toBeDisabled();
+  expect(getByText('Enabled Button')).not.toBeDisabled();
+
+  expect(getByA11yHint('Empty Text')).toBeEmptyElement();
+  expect(getByA11yHint('Empty View')).toBeEmptyElement();
+  expect(getByA11yHint('Not Empty Text')).not.toBeEmptyElement();
+  expect(getByA11yHint('Not Empty View')).not.toBeEmptyElement();
+
+  expect(getByA11yHint('Container View')).toContainElement(
+    // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+    getByA11yHint('First-Level Child')
+  );
+  expect(getByA11yHint('Container View')).toContainElement(
+    // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+    getByText('Second-Level Child')
+  );
+  expect(getByA11yHint('Container View')).not.toContainElement(
+    // $FlowFixMe - TODO: fix @testing-library/jest-native flow typings
+    getByText('Enabled Button')
+  );
+
+  expect(getByA11yHint('Not Empty Text')).toHaveTextContent('Not empty');
+  expect(getByA11yHint('Not Empty Text')).toHaveTextContent(/Not empty/);
+  expect(getByA11yHint('Not Empty Text')).not.toHaveTextContent('Is empty');
+
+  expect(getByA11yHint('Empty Text')).toHaveStyle({ color: 'red' });
+  expect(getByA11yHint('Empty Text')).toHaveStyle({
+    color: 'red',
+    backgroundColor: 'green',
+  });
+  expect(getByA11yHint('Empty Text')).not.toHaveStyle({ color: 'green' });
+  expect(getByA11yHint('Empty Text')).not.toHaveStyle({
+    color: 'green',
+    backgroundColor: 'green',
+  });
+
+  const textInput = getByA11yHint('Text Input');
+  expect(textInput).toBeTruthy();
+  expect(textInput).toHaveProp('allowFontScaling');
+  expect(textInput).toHaveProp('allowFontScaling', false);
+  expect(textInput).toHaveProp('secureTextEntry');
+  expect(textInput).toHaveProp('secureTextEntry', true);
+  expect(textInput).toHaveProp('defaultValue');
+  expect(textInput).toHaveProp('defaultValue', '111');
+});

package/src/__tests__/questionsBoard.test.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  ScrollView,
+  TextInput,
+} from 'react-native';
+import { render, fireEvent } from '..';
+
+type QuestionsBoardProps = {
+  questions: string[];
+  onSubmit: (obj: {}) => void;
+};
+function QuestionsBoard({ questions, onSubmit }: QuestionsBoardProps) {
+  const [data, setData] = React.useState({});
+
+  return (
+    <ScrollView>
+      {questions.map((q, index) => {
+        return (
+          <View key={q}>
+            <Text>{q}</Text>
+            <TextInput
+              accessibilityLabel="answer input"
+              accessibilityHint="input"
+              onChangeText={(text) => {
+                setData((state) => ({
+                  ...state,
+                  [index + 1]: { q, a: text },
+                }));
+              }}
+            />
+          </View>
+        );
+      })}
+      <TouchableOpacity onPress={() => onSubmit(data)}>
+        <Text>Submit</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+}
+
+test('form submits two answers', () => {
+  const allQuestions = ['q1', 'q2'];
+  const mockFn = jest.fn();
+
+  const { getAllByLabelText, getByText } = render(
+    <QuestionsBoard questions={allQuestions} onSubmit={mockFn} />
+  );
+
+  const answerInputs = getAllByLabelText('answer input');
+
+  fireEvent.changeText(answerInputs[0], 'a1');
+  fireEvent.changeText(answerInputs[1], 'a2');
+  fireEvent.press(getByText('Submit'));
+
+  expect(mockFn).toHaveBeenCalledWith({
+    '1': { q: 'q1', a: 'a1' },
+    '2': { q: 'q2', a: 'a2' },
+  });
+});

package/src/__tests__/react-native-api.test.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { View, Text, TextInput, Switch } from 'react-native';
+import { render } from '..';
+
+/**
+ * Tests in this file are intended to give us an proactive warning that React Native behavior has
+ * changed in a way that may impact our code like queries or event handling.
+ */
+
+test('React Native API assumption: <View> renders single host element', () => {
+  const view = render(<View testID="test" />);
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <View
+      testID="test"
+    />
+  `);
+});
+
+test('React Native API assumption: <Text> renders single host element', () => {
+  const view = render(<Text testID="test">Hello</Text>);
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <Text
+      testID="test"
+    >
+      Hello
+    </Text>
+  `);
+});
+
+test('React Native API assumption: nested <Text> renders single host element', () => {
+  const view = render(
+    <Text testID="test">
+      <Text testID="before">Before</Text>
+      Hello
+      <Text testID="after">
+        <Text testID="deeplyNested">Deeply nested</Text>
+      </Text>
+    </Text>
+  );
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <Text
+      testID="test"
+    >
+      <Text
+        testID="before"
+      >
+        Before
+      </Text>
+      Hello
+      <Text
+        testID="after"
+      >
+        <Text
+          testID="deeplyNested"
+        >
+          Deeply nested
+        </Text>
+      </Text>
+    </Text>
+  `);
+});
+
+test('React Native API assumption: <TextInput> renders single host element', () => {
+  const view = render(
+    <TextInput
+      testID="test"
+      defaultValue="default"
+      value="currentValue"
+      placeholder="Placeholder"
+    />
+  );
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <TextInput
+      defaultValue="default"
+      placeholder="Placeholder"
+      testID="test"
+      value="currentValue"
+    />
+  `);
+});
+
+test('React Native API assumption: <TextInput> with nested Text renders single host element', () => {
+  const view = render(
+    <TextInput testID="test" placeholder="Placeholder">
+      <Text>Hello</Text>
+    </TextInput>
+  );
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <TextInput
+      placeholder="Placeholder"
+      testID="test"
+    >
+      <Text>
+        Hello
+      </Text>
+    </TextInput>
+  `);
+});
+
+test('React Native API assumption: <Switch> renders single host element', () => {
+  const view = render(
+    <Switch testID="test" value={true} onChange={jest.fn()} />
+  );
+
+  expect(view.toJSON()).toMatchInlineSnapshot(`
+    <RCTSwitch
+      accessibilityRole="switch"
+      onChange={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "height": 31,
+          "width": 51,
+        }
+      }
+      testID="test"
+      value={true}
+    />
+  `);
+});

package/src/__tests__/render-debug.test.tsx

@@ -0,0 +1,207 @@
+/* eslint-disable no-console */
+import * as React from 'react';
+import { View, Text, TextInput, Pressable } from 'react-native';
+import stripAnsi from 'strip-ansi';
+import { render, fireEvent, configure } from '..';
+
+type ConsoleLogMock = jest.Mock<Array<string>>;
+
+const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
+const PLACEHOLDER_CHEF = 'Who inspected freshness?';
+const INPUT_FRESHNESS = 'Custom Freshie';
+const INPUT_CHEF = 'I inspected freshie';
+const DEFAULT_INPUT_CHEF = 'What did you inspect?';
+const DEFAULT_INPUT_CUSTOMER = 'What banana?';
+
+const ignoreWarnings = ['Using debug("message") is deprecated'];
+
+const realConsoleWarn = console.warn;
+
+beforeEach(() => {
+  jest.spyOn(console, 'log').mockImplementation(() => {});
+  jest.spyOn(console, 'warn').mockImplementation((message) => {
+    if (!ignoreWarnings.some((warning) => message.includes(warning))) {
+      realConsoleWarn(message);
+    }
+  });
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+class MyButton extends React.Component<any> {
+  render() {
+    return (
+      <Pressable onPress={this.props.onPress}>
+        <Text>{this.props.children}</Text>
+      </Pressable>
+    );
+  }
+}
+
+class Banana extends React.Component<any, { fresh: boolean }> {
+  state = {
+    fresh: false,
+  };
+
+  componentDidUpdate() {
+    if (this.props.onUpdate) {
+      this.props.onUpdate();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.onUnmount) {
+      this.props.onUnmount();
+    }
+  }
+
+  changeFresh = () => {
+    this.setState((state) => ({
+      fresh: !state.fresh,
+    }));
+  };
+
+  render() {
+    const test = 0;
+    return (
+      <View>
+        <Text>Is the banana fresh?</Text>
+        <Text testID="bananaFresh">
+          {this.state.fresh ? 'fresh' : 'not fresh'}
+        </Text>
+        <TextInput
+          testID="bananaCustomFreshness"
+          placeholder={PLACEHOLDER_FRESHNESS}
+          value={INPUT_FRESHNESS}
+        />
+        <TextInput
+          testID="bananaChef"
+          placeholder={PLACEHOLDER_CHEF}
+          value={INPUT_CHEF}
+          defaultValue={DEFAULT_INPUT_CHEF}
+        />
+        <TextInput defaultValue={DEFAULT_INPUT_CUSTOMER} />
+        <TextInput defaultValue={'hello'} value="" />
+        <MyButton onPress={this.changeFresh} type="primary">
+          Change freshness!
+        </MyButton>
+        <Text testID="duplicateText">First Text</Text>
+        <Text testID="duplicateText">Second Text</Text>
+        <Text>{test}</Text>
+      </View>
+    );
+  }
+}
+
+test('debug', () => {
+  const { debug } = render(<Banana />);
+
+  debug();
+  debug('my custom message');
+  debug.shallow();
+  debug.shallow('my other custom message');
+  debug({ message: 'another custom message' });
+
+  const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
+  expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
+  expect(stripAnsi(mockCalls[1][0] + mockCalls[1][1])).toMatchSnapshot(
+    'with message'
+  );
+  expect(stripAnsi(mockCalls[2][0])).toMatchSnapshot('shallow');
+  expect(stripAnsi(mockCalls[3][0] + mockCalls[3][1])).toMatchSnapshot(
+    'shallow with message'
+  );
+  expect(stripAnsi(mockCalls[4][0] + mockCalls[4][1])).toMatchSnapshot(
+    'another custom message'
+  );
+
+  const mockWarnCalls = (console.warn as any as ConsoleLogMock).mock.calls;
+  expect(mockWarnCalls[0]).toEqual([
+    'Using debug("message") is deprecated and will be removed in future release, please use debug({ message; "message" }) instead.',
+  ]);
+});
+
+test('debug changing component', () => {
+  const { UNSAFE_getByProps, debug } = render(<Banana />);
+  fireEvent.press(UNSAFE_getByProps({ type: 'primary' }));
+
+  debug();
+
+  const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
+  expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot(
+    'bananaFresh button message should now be "fresh"'
+  );
+});
+
+test('debug with only children prop', () => {
+  const { debug } = render(<Banana />);
+  debug({ mapProps: () => ({}) });
+
+  const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
+  expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
+});
+
+test('debug with only prop whose value is bananaChef', () => {
+  const { debug } = render(<Banana />);
+  debug({
+    mapProps: (props) => {
+      const filterProps: Record<string, unknown> = {};
+      Object.keys(props).forEach((key) => {
+        if (props[key] === 'bananaChef') {
+          filterProps[key] = props[key];
+        }
+      });
+      return filterProps;
+    },
+  });
+
+  const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
+  expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
+});
+
+test('debug with only props from TextInput components', () => {
+  const { debug } = render(<Banana />);
+  debug({
+    mapProps: (props, node) => (node.type === 'TextInput' ? props : {}),
+  });
+
+  const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
+  expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
+});
+
+test('debug should use debugOptions from config when no option is specified', () => {
+  configure({ defaultDebugOptions: { mapProps: () => ({}) } });
+
+  const { debug } = render(
+    <View style={{ backgroundColor: 'red' }}>
+      <Text>hello</Text>
+    </View>
+  );
+  debug();
+
+  const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
+  expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
+});
+
+test('filtering out props through mapProps option should not modify component', () => {
+  const { debug, getByTestId } = render(<View testID="viewTestID" />);
+  debug({ mapProps: () => ({}) });
+
+  expect(getByTestId('viewTestID')).toBeTruthy();
+});
+
+test('debug should use given options over config debugOptions', () => {
+  configure({ defaultDebugOptions: { mapProps: () => ({}) } });
+
+  const { debug } = render(
+    <View style={{ backgroundColor: 'red' }}>
+      <Text>hello</Text>
+    </View>
+  );
+  debug({ mapProps: (props) => props });
+
+  const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
+  expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
+});

package/src/__tests__/render-stringValidation.test.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { render, fireEvent } from '..';
+
+// eslint-disable-next-line no-console
+const originalConsoleError = console.error;
+
+const VALIDATION_ERROR =
+  'Invariant Violation: Text strings must be rendered within a <Text> component';
+const PROFILER_ERROR = 'The above error occurred in the <Profiler> component';
+
+beforeEach(() => {
+  // eslint-disable-next-line no-console
+  console.error = (errorMessage: string) => {
+    if (!errorMessage.includes(PROFILER_ERROR)) {
+      originalConsoleError(errorMessage);
+    }
+  };
+});
+
+afterEach(() => {
+  // eslint-disable-next-line no-console
+  console.error = originalConsoleError;
+});
+
+test('should throw when rendering a string outside a text component', () => {
+  expect(() =>
+    render(<View>hello</View>, {
+      unstable_validateStringsRenderedWithinText: true,
+    })
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+test('should throw an error when rerendering with text outside of Text component', () => {
+  const { rerender } = render(<View />, {
+    unstable_validateStringsRenderedWithinText: true,
+  });
+
+  expect(() => rerender(<View>hello</View>)).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+const InvalidTextAfterPress = () => {
+  const [showText, setShowText] = React.useState(false);
+
+  if (!showText) {
+    return (
+      <Pressable onPress={() => setShowText(true)}>
+        <Text>Show text</Text>
+      </Pressable>
+    );
+  }
+
+  return <View>text rendered outside text component</View>;
+};
+
+test('should throw an error when strings are rendered outside Text', () => {
+  const { getByText } = render(<InvalidTextAfterPress />, {
+    unstable_validateStringsRenderedWithinText: true,
+  });
+
+  expect(() => fireEvent.press(getByText('Show text'))).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "text rendered outside text component" string within a <View> component.`
+  );
+});
+
+test('should not throw for texts nested in fragments', () => {
+  expect(() =>
+    render(
+      <Text>
+        <>hello</>
+      </Text>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).not.toThrow();
+});
+
+test('should not throw if option validateRenderedString is false', () => {
+  expect(() => render(<View>hello</View>)).not.toThrow();
+});
+
+test(`should throw when one of the children is a text and the parent is not a Text component`, () => {
+  expect(() =>
+    render(
+      <View>
+        <Text>hello</Text>
+        hello
+      </View>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+test(`should throw when a string is rendered within a fragment rendered outside a Text`, () => {
+  expect(() =>
+    render(
+      <View>
+        <>hello</>
+      </View>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+test('should throw if a number is rendered outside a text', () => {
+  expect(() =>
+    render(<View>0</View>, { unstable_validateStringsRenderedWithinText: true })
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "0" string within a <View> component.`
+  );
+});
+
+const Trans = ({ i18nKey }: { i18nKey: string }) => <>{i18nKey}</>;
+
+test('should throw with components returning string value not rendered in Text', () => {
+  expect(() =>
+    render(
+      <View>
+        <Trans i18nKey="hello" />
+      </View>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});
+
+test('should not throw with components returning string value rendered in Text', () => {
+  expect(() =>
+    render(
+      <Text>
+        <Trans i18nKey="hello" />
+      </Text>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).not.toThrow();
+});
+
+test('should throw when rendering string in a View in a Text', () => {
+  expect(() =>
+    render(
+      <Text>
+        <View>hello</View>
+      </Text>,
+      { unstable_validateStringsRenderedWithinText: true }
+    )
+  ).toThrow(
+    `${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
+  );
+});