@testing-library/react-native 12.1.2 → 12.2.0

package/src/__tests__/__snapshots__/render.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`toJSON renders host output 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <Text>
+    press me
+  </Text>
+</View>
+`;

package/src/__tests__/act.test.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import act from '../act';
+import render from '../render';
+import fireEvent from '../fireEvent';
+
+type UseEffectProps = { callback(): void };
+const UseEffect = ({ callback }: UseEffectProps) => {
+  React.useEffect(callback);
+  return null;
+};
+
+const Counter = () => {
+  const [count, setCount] = React.useState(0);
+
+  const text = `Total count: ${count}`;
+  return <Text onPress={() => setCount(count + 1)}>{text}</Text>;
+};
+
+test('render should trigger useEffect', () => {
+  const effectCallback = jest.fn();
+  render(<UseEffect callback={effectCallback} />);
+
+  expect(effectCallback).toHaveBeenCalledTimes(1);
+});
+
+test('update should trigger useEffect', () => {
+  const effectCallback = jest.fn();
+  const { update } = render(<UseEffect callback={effectCallback} />);
+  update(<UseEffect callback={effectCallback} />);
+
+  expect(effectCallback).toHaveBeenCalledTimes(2);
+});
+
+test('fireEvent should trigger useState', () => {
+  const { getByText } = render(<Counter />);
+  const counter = getByText(/Total count/i);
+
+  expect(counter.props.children).toEqual('Total count: 0');
+  fireEvent.press(counter);
+  expect(counter.props.children).toEqual('Total count: 1');
+});
+
+test('should be able to not await act', async () => {
+  const result = act(() => {});
+  expect(result).toHaveProperty('then');
+});
+
+test('should be able to await act', async () => {
+  const result = await act(async () => {});
+  expect(result).toBe(undefined);
+});
+
+test('should be able to await act when promise rejects', async () => {
+  await expect(act(async () => Promise.reject('error'))).rejects.toBe('error');
+});

package/src/__tests__/auto-cleanup-skip.test.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+let render: (element: React.ReactElement) => void;
+beforeAll(() => {
+  process.env.RNTL_SKIP_AUTO_CLEANUP = 'true';
+  const rntl = require('..');
+  render = rntl.render;
+});
+
+let isMounted = false;
+
+class Test extends React.Component<{ onUnmount?(): void }> {
+  componentDidMount() {
+    isMounted = true;
+  }
+
+  componentWillUnmount() {
+    isMounted = false;
+    if (this.props.onUnmount) {
+      this.props.onUnmount();
+    }
+  }
+  render() {
+    return <View />;
+  }
+}
+
+// This just verifies that by importing RNTL in pure mode in an environment which supports
+// afterEach (like jest) we won't get automatic cleanup between tests.
+test('component is mounted, but not umounted before test ends', () => {
+  const fn = jest.fn();
+  render(<Test onUnmount={fn} />);
+  expect(fn).not.toHaveBeenCalled();
+});
+
+test('component is NOT automatically umounted after first test ends', () => {
+  expect(isMounted).toEqual(true);
+});

package/src/__tests__/auto-cleanup.test.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { render } from '..';
+
+let isMounted = false;
+
+class Test extends React.Component<{ onUnmount?(): void }> {
+  componentDidMount() {
+    isMounted = true;
+  }
+
+  componentWillUnmount() {
+    isMounted = false;
+    if (this.props.onUnmount) {
+      this.props.onUnmount();
+    }
+  }
+  render() {
+    return <View />;
+  }
+}
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
+// we'll get automatic cleanup between tests.
+test('component is mounted, but not umounted before test ends', () => {
+  const fn = jest.fn();
+  render(<Test onUnmount={fn} />);
+  expect(isMounted).toEqual(true);
+  expect(fn).not.toHaveBeenCalled();
+});
+
+test('component is automatically umounted after first test ends', () => {
+  expect(isMounted).toEqual(false);
+});
+
+test('does not time out with legacy fake timers', () => {
+  jest.useFakeTimers({ legacyFakeTimers: true });
+  render(<Test />);
+  expect(isMounted).toEqual(true);
+});
+
+test('does not time out with fake timers', () => {
+  jest.useFakeTimers();
+  render(<Test />);
+  expect(isMounted).toEqual(true);
+});

package/src/__tests__/cleanup.test.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable react/no-multi-comp */
+import * as React from 'react';
+import { View } from 'react-native';
+import { cleanup, render } from '../pure';
+
+class Test extends React.Component<{ onUnmount: () => void }> {
+  componentWillUnmount() {
+    if (this.props.onUnmount) {
+      this.props.onUnmount();
+    }
+  }
+  render() {
+    return <View />;
+  }
+}
+
+test('cleanup', () => {
+  const fn = jest.fn();
+
+  render(<Test onUnmount={fn} />);
+  render(<Test onUnmount={fn} />);
+  expect(fn).not.toHaveBeenCalled();
+
+  cleanup();
+  expect(fn).toHaveBeenCalledTimes(2);
+});

package/src/__tests__/config.test.ts

@@ -0,0 +1,55 @@
+import {
+  getConfig,
+  configure,
+  resetToDefaults,
+  configureInternal,
+} from '../config';
+
+test('getConfig() returns existing configuration', () => {
+  expect(getConfig().asyncUtilTimeout).toEqual(1000);
+  expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
+});
+
+test('configure() overrides existing config values', () => {
+  configure({ asyncUtilTimeout: 5000 });
+  configure({ defaultDebugOptions: { message: 'debug message' } });
+  expect(getConfig()).toEqual({
+    asyncUtilTimeout: 5000,
+    defaultDebugOptions: { message: 'debug message' },
+    defaultIncludeHiddenElements: false,
+  });
+});
+
+test('resetToDefaults() resets config to defaults', () => {
+  configure({
+    asyncUtilTimeout: 5000,
+    defaultIncludeHiddenElements: true,
+  });
+  expect(getConfig().asyncUtilTimeout).toEqual(5000);
+  expect(getConfig().defaultIncludeHiddenElements).toEqual(true);
+
+  resetToDefaults();
+  expect(getConfig().asyncUtilTimeout).toEqual(1000);
+  expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
+});
+
+test('resetToDefaults() resets internal config to defaults', () => {
+  configureInternal({
+    hostComponentNames: { text: 'A', textInput: 'A', switch: 'A' },
+  });
+  expect(getConfig().hostComponentNames).toEqual({
+    text: 'A',
+    textInput: 'A',
+    switch: 'A',
+  });
+
+  resetToDefaults();
+  expect(getConfig().hostComponentNames).toBe(undefined);
+});
+
+test('configure handles alias option defaultHidden', () => {
+  expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
+
+  configure({ defaultHidden: true });
+  expect(getConfig().defaultIncludeHiddenElements).toEqual(true);
+});

package/src/__tests__/fireEvent-textInput.test.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { Text, TextInput, TextInputProps } from 'react-native';
+import { render, fireEvent } from '..';
+
+function WrappedTextInput(props: TextInputProps) {
+  return <TextInput {...props} />;
+}
+
+function DoubleWrappedTextInput(props: TextInputProps) {
+  return <WrappedTextInput {...props} />;
+}
+
+const layoutEvent = { nativeEvent: { layout: { width: 100, height: 100 } } };
+
+test('should fire only non-touch-related events on non-editable TextInput', () => {
+  const onFocus = jest.fn();
+  const onChangeText = jest.fn();
+  const onSubmitEditing = jest.fn();
+  const onLayout = jest.fn();
+
+  const view = render(
+    <TextInput
+      editable={false}
+      testID="subject"
+      onFocus={onFocus}
+      onChangeText={onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      onLayout={onLayout}
+    />
+  );
+
+  const subject = view.getByTestId('subject');
+  fireEvent(subject, 'focus');
+  fireEvent.changeText(subject, 'Text');
+  fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'layout', layoutEvent);
+
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(onChangeText).not.toHaveBeenCalled();
+  expect(onSubmitEditing).not.toHaveBeenCalled();
+  expect(onLayout).toHaveBeenCalledWith(layoutEvent);
+});
+
+test('should fire only non-touch-related events on non-editable TextInput with nested Text', () => {
+  const onFocus = jest.fn();
+  const onChangeText = jest.fn();
+  const onSubmitEditing = jest.fn();
+  const onLayout = jest.fn();
+
+  const view = render(
+    <TextInput
+      editable={false}
+      testID="subject"
+      onFocus={onFocus}
+      onChangeText={onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      onLayout={onLayout}
+    >
+      <Text>Nested Text</Text>
+    </TextInput>
+  );
+
+  const subject = view.getByText('Nested Text');
+  fireEvent(subject, 'focus');
+  fireEvent(subject, 'onFocus');
+  fireEvent.changeText(subject, 'Text');
+  fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'onSubmitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'layout', layoutEvent);
+  fireEvent(subject, 'onLayout', layoutEvent);
+
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(onChangeText).not.toHaveBeenCalled();
+  expect(onSubmitEditing).not.toHaveBeenCalled();
+  expect(onLayout).toHaveBeenCalledTimes(2);
+  expect(onLayout).toHaveBeenCalledWith(layoutEvent);
+});
+
+/**
+ * Historically there were problems with custom TextInput wrappers, as they
+ * could creat a hierarchy of three or more composite text input views with
+ * very similar event props.
+ *
+ * Typical hierarchy would be:
+ * - User composite TextInput
+ * - UI library composite TextInput
+ * - RN composite TextInput
+ * - RN host TextInput
+ *
+ * Previous implementation of fireEvent only checked `editable` prop for
+ * RN TextInputs, both host & composite but did not check on the UI library or
+ * user composite TextInput level, hence invoking the event handlers that
+ * should be blocked by `editable={false}` prop.
+ */
+test('should fire only non-touch-related events on non-editable wrapped TextInput', () => {
+  const onFocus = jest.fn();
+  const onChangeText = jest.fn();
+  const onSubmitEditing = jest.fn();
+  const onLayout = jest.fn();
+
+  const view = render(
+    <WrappedTextInput
+      editable={false}
+      testID="subject"
+      onFocus={onFocus}
+      onChangeText={onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      onLayout={onLayout}
+    />
+  );
+
+  const subject = view.getByTestId('subject');
+  fireEvent(subject, 'focus');
+  fireEvent.changeText(subject, 'Text');
+  fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'layout', layoutEvent);
+
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(onChangeText).not.toHaveBeenCalled();
+  expect(onSubmitEditing).not.toHaveBeenCalled();
+  expect(onLayout).toHaveBeenCalledWith(layoutEvent);
+});
+
+/**
+ * Ditto testing for even deeper hierarchy of TextInput wrappers.
+ */
+test('should fire only non-touch-related events on non-editable double wrapped TextInput', () => {
+  const onFocus = jest.fn();
+  const onChangeText = jest.fn();
+  const onSubmitEditing = jest.fn();
+  const onLayout = jest.fn();
+
+  const view = render(
+    <DoubleWrappedTextInput
+      editable={false}
+      testID="subject"
+      onFocus={onFocus}
+      onChangeText={onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      onLayout={onLayout}
+    />
+  );
+
+  const subject = view.getByTestId('subject');
+  fireEvent(subject, 'focus');
+  fireEvent.changeText(subject, 'Text');
+  fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
+  fireEvent(subject, 'layout', layoutEvent);
+
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(onChangeText).not.toHaveBeenCalled();
+  expect(onSubmitEditing).not.toHaveBeenCalled();
+  expect(onLayout).toHaveBeenCalledWith(layoutEvent);
+});