docs: examples

Author: mdjastrzebski

examples/basic/tutorial/1-basics.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { render, screen } from '@testing-library/react-native';
+
+function Greeting({ name = 'World' }) {
+  return (
+    <View>
+      <Text>Hello, {name}!</Text>
+    </View>
+  );
+}
+
+describe('Greeting', () => {
+  it('should render', () => {
+    // Arrange
+    render(<Greeting />);
+
+    // Assert`
+    expect(screen.getByText('Hello, World!')).toBeOnTheScreen();
+  });
+
+  it('should render with the correct name', () => {
+    // Arrange
+    render(<Greeting name="John" />);
+
+    // Assert
+    expect(screen.getByText('Hello, John!')).toBeOnTheScreen();
+  });
+});

examples/basic/tutorial/2-queries/1-query-variants.test.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { render, screen } from '@testing-library/react-native';
+
+test('showcase query variants', () => {
+  render(
+    <View>
+      <Text>Item 1</Text>
+      <Text>Item 2</Text>
+    </View>,
+  );
+
+  // Use getBy* queries to find a single element matching given predicate
+  expect(screen.getByText('Item 1')).toBeOnTheScreen();
+
+  // Use getAllBy* queries to find all elements matching given predicate (note the use of a regex)
+  expect(screen.getAllByText(/Item/)).toHaveLength(2);
+
+  // Use queryBy* to look for an element that you expect does not exist
+  expect(screen.queryByText('Item 3')).not.toBeOnTheScreen();
+});
+
+function LazyText({ content }: { content: string }) {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  // Simulate async loading operation
+  React.useEffect(() => {
+    sleep(100);
+    setIsLoaded(true);
+  }, []);
+
+  return <Text>{isLoaded ? content : 'Loading...'}</Text>;
+}
+
+test('showcase async query variants', async () => {
+  render(
+    <View>
+      <LazyText content="Lazy Item 1" />
+      <LazyText content="Lazy Item 2" />
+    </View>,
+  );
+
+  // Use findBy* to wait for an element to appear
+  expect(await screen.findByText('Lazy Item 1')).toBeOnTheScreen();
+});
+
+// Simulate async operation
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

examples/basic/tutorial/2-queries/2-query-predicates.test.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Pressable, Switch, Text, TextInput, View } from 'react-native';
+import { render, screen } from '@testing-library/react-native';
+
+test('query by semantic role: *ByRole (highly recommended)', () => {
+  render(
+    <View>
+      <Text role="heading">Heading Text</Text>
+
+      <Pressable role="button">
+        <Text>Button 1</Text>
+      </Pressable>
+
+      <Switch value={true} aria-label="Switch 1" />
+
+      <Text role="alert">Alert Text</Text>
+
+      <View accessible role="menu">
+        <Text role="menuitem">Menu Item 1</Text>
+        <Text role="menuitem">Menu Item 2</Text>
+      </View>
+    </View>,
+  );
+
+  expect(screen.getByRole('heading', { name: 'Heading Text' })).toBeOnTheScreen();
+
+  expect(screen.getByRole('button', { name: 'Button 1' })).toBeOnTheScreen();
+  expect(screen.getByRole('switch', { name: 'Switch 1' })).toBeOnTheScreen();
+  expect(screen.getByRole('alert', { name: 'Alert Text' })).toBeOnTheScreen();
+
+  expect(screen.getByRole('menu')).toBeOnTheScreen();
+  expect(screen.getAllByRole('menuitem')).toHaveLength(2);
+});
+
+test('querying TextInput elements', () => {
+  render(
+    <View>
+      <TextInput placeholder="Enter Text..." aria-label="Text Label" defaultValue="Hello" />
+    </View>,
+  );
+
+  // Option 1: Query by a11y label
+  expect(screen.getByLabelText('Text Label')).toHaveDisplayValue('Hello');
+
+  // Option 2: Query by placeholder text
+  expect(screen.getByPlaceholderText('Enter Text...')).toHaveDisplayValue('Hello');
+
+  // Option 3: Query by display value
+  expect(screen.getByDisplayValue('Hello')).toBeOnTheScreen();
+});
+
+test('other accessible queries', () => {
+  render(
+    <View>
+      <Text>Text content</Text>
+      <View aria-label="ARIA Label" />
+      <View accessibilityLabel="Accessibility Label" />
+      <View accessibilityHint="Accessibility Hint" />
+    </View>,
+  );
+
+  expect(screen.getByText('Text content')).toBeOnTheScreen();
+  expect(screen.getByLabelText('ARIA Label')).toBeOnTheScreen();
+  expect(screen.getByLabelText('Accessibility Label')).toBeOnTheScreen();
+  expect(screen.getByHintText('Accessibility Hint')).toBeOnTheScreen();
+});
+
+test('escape hatch: *ByTestId (use as a last resort)', () => {
+  render(
+    <View>
+      <Text testID="Text 1">Text 1</Text>
+    </View>,
+  );
+
+  expect(screen.getByTestId('Text 1')).toBeOnTheScreen();
+});

examples/basic/tutorial/4-events.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Text, View, Button } from 'react-native';
+import { fireEvent, render, screen, userEvent } from '@testing-library/react-native';
+
+function Counter() {
+  const [count, setCount] = React.useState(0);
+
+  return (
+    <View>
+      <Text>{count}</Text>
+      <Button title="Increment" onPress={() => setCount(count + 1)} />
+    </View>
+  );
+}
+
+describe('Counter', () => {
+  it('should increment the count', async () => {
+    const user = userEvent.setup();
+
+    render(<Counter />);
+    expect(screen.getByText('0')).toBeOnTheScreen();
+
+    const button = screen.getByRole('button', { name: 'Increment' });
+    expect(button).toBeOnTheScreen();
+
+    await user.press(button);
+    expect(screen.getByText('1')).toBeOnTheScreen();
+  });
+
+  it('should increment the count when the button is pressed', async () => {
+    const user = userEvent.setup();
+
+    render(<Counter />);
+    expect(screen.getByText('0')).toBeOnTheScreen();
+
+    const button = screen.getByRole('button', { name: 'Increment' });
+    expect(button).toBeOnTheScreen();
+
+    await user.press(button);
+    expect(screen.getByText('1')).toBeOnTheScreen();
+  });
+});

examples/basic/tutorial/x-screen-object.test.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { render, screen } from '@testing-library/react-native';
+
+function Greeting({ name = 'World' }) {
+  return (
+    <View>
+      <Text>Hello, {name}!</Text>
+    </View>
+  );
+}
+
+describe('Greeting', () => {
+  it('should re-render when name changes', () => {
+    render(<Greeting name="John" />);
+    expect(screen.getByText('Hello, John!')).toBeOnTheScreen();
+
+    screen.rerender(<Greeting name="Jane" />);
+    expect(screen.getByText('Hello, Jane!')).toBeOnTheScreen();
+  });
+
+  it('should unmount', () => {
+    render(<Greeting name="John" />);
+
+    screen.unmount();
+    expect(() => screen.getByText('Hello, John!')).toThrowErrorMatchingInlineSnapshot(
+      `"Unable to find node on an unmounted component."`,
+    );
+  });
+});