@testing-library/react-native 12.2.1 → 12.3.0

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

@@ -1,84 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,207 +0,0 @@
-/* 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

@@ -1,157 +0,0 @@
-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.`
-  );
-});