Writing Tests

What are automated tests?

Info

Automated tests are a way to ensure that your code works as expected.

They are called ‘automated’ because they are run automatically by a computer program, rather than manually by a person.

This guide will help you write your first automated tests for the Hall Pass application.

Step 1: Create your first test - the Task component

Create a new folder called tests at the root of your project, and place a Task.test.js file in here:

• Directorylib/

  • …
• Directorynode_modules/

  • …
• Directorytests

  • Task.test.js
• global.css
• index.js

This will contain all the tests for the Task component

Add your first test code below to Task.test.js:

tests/Task.test.js

import { render, screen } from '@testing-library/react-native';
import { Task } from '../components/Task';

describe('Task', () => {
  test('renders a task', () => {
    const task = {
      id: 1,
      title: 'Test Task',
      category: 'Test Category',
      isChecked: false,
    };

    render(<Task task={task} />);

    // Just check if the title and category are displayed
    const titleElement = screen.getByText('Test Task');
    const categoryElement = screen.getByText('Test Category');
    expect(titleElement).toBeTruthy();
    expect(categoryElement).toBeTruthy();
  });
});

Understanding the Test

1. Imports: We import testing utilities and the component we want to test
2. Test Structure: - describe groups related tests - test (or it) defines a single test case
3. Component Rendering: We render the Task component with test props
4. Assertions: We check if the component displays the expected text

What is screen?

The screen object provides methods to query the rendered component, similar to how a user would interact with your app:

1. getByText: Finds elements by their text content
2. getByTestId: Finds elements by their testID prop

And many more query methods!

Step 2: Run your test

If you still have your development server running from the previous guide, stop it by pressing CTRL + C in the terminal (or CMD + C on Mac).

Run your test with the command below:

npm run test

This will execute Jest with your configuration and run all tests matching the pattern in your testMatch configuration.

What to expect when running tests

1. Jest will find all files inside the tests folder
2. It will run the tests in those files
3. It will report which tests passed or failed
4. For failed tests, it will show what was expected vs. what was received

When you run the test, you should see a passing test for our Task component:

Step 3: Understanding Component Rendering Tests

The test we wrote in Step 4 is a basic component rendering test. It verifies that our component correctly displays the data it receives as props. This type of test is essential for ensuring your UI components render correctly.

However, real applications need more than just static rendering - they need to respond to user interactions!

Step 4: Adding Interaction Tests

Let’s enhance our test suite by adding an interaction test to verify the checkbox in our Task component works correctly when pressed.

First, add a testID to your checkbox component to make it easier to find in the tests:

components/Task.tsx

<Checkbox
  testID="checkbox"
  className="border-foreground checked:bg-foreground"
  checked={isChecked}
  onCheckedChange={handleSetChecked}
/>

Now, let’s add a new test to our Task.test.js file that verifies the checkbox calls the correct function when pressed:

tests/Task.test.js

import React from "react";
import { render, screen, userEvent } from "@testing-library/react-native";
import Task from "../components/Task"; // Adjust path as needed

// Mock any components or contexts used by Task
jest.mock("~/lib/TaskContext", () => ({
  useTasks: () => ({
    updateTask: jest.fn(),
    deleteTask: jest.fn(),
  }),
}));

describe("Task", () => {
  test("renders a task", () => {
    const task = {
      id: 1,
      title: "Test Task",
      category: "Test Category",
      isChecked: false,
    };

    render(<Task task={task} />);

    // Just check if the title is displayed
    const titleElement = screen.getByText("Test Task");
    const categoryElement = screen.getByText("Test Category");
    expect(titleElement).toBeTruthy();
    expect(categoryElement).toBeTruthy();
  });

  test("toggles completion status when pressed", async () => {
    const mockToggle = jest.fn(); // Create a mock function
    const task = {
      id: 1,
      title: "Test Task",
      category: "Test Category",
      isChecked: false,
    };

    render(<Task task={task} onUpdate={mockToggle} />);

    const checkbox = screen.getByTestId("checkbox"); // Find the checkbox element

    const user = userEvent.setup();
    await user.press(checkbox);

    // Check if our mock function was called
    expect(mockToggle).toHaveBeenCalled();
  });
});

Understanding Interaction Tests

1. Mock Functions: We create a mock function (jest.fn()) that we can pass as a prop to track if and how it’s called
2. Finding Elements: We use getByTestId to find elements with a specific testID prop
3. Simulating Events: We use userEvent to simulate user interactions like pressing a button
4. Verifying behaviour: We check if our mock function was called, indicating the component behaved as expected

What is userEvent?

userEvent is a function provided by @testing-library/react-native that allows you to simulate user interactions in your tests.

These must always be placed inside an async function, because they use await internally.

1. const userEvent = userEvent.setup(); - Sets up the user event simulation
2. await user.press(checkbox); - Simulates pressing/tapping an element
3. await user.type(textInput, 'Hello world!'); - Simulates typing in a text input
4. You can find out more about userEvent in the official documentation

This is powerful because it lets you test not just what your component looks like, but how it responds to user input!

Step 5: Testing More Complex Interactions

Now that we’ve covered the basics of interaction testing, let’s explore how to test more complex scenarios:

Step 6: Testing with More Specific Assertions

Our current test only verifies that the onUpdate function was called, but we can make our test more specific by checking exactly how it was called:

tests/Task.test.js

import { render, screen, userEvent } from "@testing-library/react-native";

// ... other imports and setup

test("toggles completion status when pressed", async () => {
  const mockToggle = jest.fn();
  const task = {
    id: 1,
    title: "Test Task",
    category: "Test Category",
    isChecked: false,
  };

  render(<Task task={task} onUpdate={mockToggle} />);

  const checkbox = screen.getByTestId("checkbox");

  const user = userEvent.setup();
  await user.press(checkbox);

  // Check if our mock function was called with the correct arguments
  expect(mockToggle).toHaveBeenCalled();
  expect(mockToggle).toHaveBeenCalledWith({
    ...task,
    isChecked: true  // The checkbox should toggle from false to true
  });
});

Challenge

Step 5: Testing Multiple States

It’s also important to test different starting states. Let’s add another test for when the task is already checked:

tests/Task.test.js

describe('Task', () => {
  test('renders a task', () => {
    const task = {
      id: 1,
      title: 'Test Task',
      category: 'Test Category',
      isChecked: false,
    };

    render(<Task task={task} />);

    // Just check if the title and category are displayed
    const titleElement = screen.getByText('Test Task');
    const categoryElement = screen.getByText('Test Category');
    expect(titleElement).toBeTruthy();
    expect(categoryElement).toBeTruthy();
  });

  test('toggles completion status when pressed', async () => {
    const mockToggle = jest.fn(); // Create a mock function
    const task = {
      id: 1,
      title: 'Test Task',
      category: 'Test Category',
      isChecked: false,
    };

    render(<Task task={task} onUpdate={mockToggle} />);

    const checkbox = screen.getByTestId('checkbox'); // Find the checkbox element

    const user = userEvent.setup();
    await user.press(checkbox);

    // Check if our mock function was called
    expect(mockToggle).toHaveBeenCalledWith({
      ...task,
      isChecked: true, // The checkbox should toggle from false to true
    });
  });

  test('toggles from checked to unchecked when pressed', async () => {
    // Your code here...
  });
});

Using the 'toggles completion status when pressed' code as a guide, can you add a test to check that when a task is already checked, this can be toggled back to unchecked?

🤔

tests/Task.test.js

describe('Task', () => {
  test('renders a task', () => {
    const task = {
      id: 1,
      title: 'Test Task',
      category: 'Test Category',
      isChecked: false,
    };

    render(<Task task={task} />);

    // Just check if the title and category are displayed
    const titleElement = screen.getByText('Test Task');
    const categoryElement = screen.getByText('Test Category');
    expect(titleElement).toBeTruthy();
    expect(categoryElement).toBeTruthy();
  });

  test('toggles completion status when pressed', async () => {
    const mockToggle = jest.fn(); // Create a mock function
    const task = {
      id: 1,
      title: 'Test Task',
      category: 'Test Category',
      isChecked: false,
    };

    render(<Task task={task} onUpdate={mockToggle} />);

    const checkbox = screen.getByTestId('checkbox'); // Find the checkbox element

    const user = userEvent.setup();
    await user.press(checkbox);

    // Check if our mock function was called
    expect(mockToggle).toHaveBeenCalledWith({
      ...task,
      isChecked: true, // The checkbox should toggle from false to true
    });
  });

  test('toggles from checked to unchecked when pressed', async () => {
    const mockToggle = jest.fn();
    const task = {
      id: 1,
      title: 'Test Task',
      category: 'Test Category',
      isChecked: true, // Starting as checked
    };

    render(<Task task={task} onUpdate={mockToggle} />);

    const checkbox = screen.getByTestId('checkbox');

    const user = userEvent.setup();
    await user.press(checkbox);

    // Check if our mock function was called with the correct arguments
    expect(mockToggle).toHaveBeenCalledWith({
      ...task,
      isChecked: false, // The checkbox should toggle from true to false
    });
  });
});

Click to reveal

Best Practices for Interaction Tests

• Test user behaviour, not implementation details: Focus on what the user does and sees, not on internal component state or methods
• Use testIDs strategically: Add testIDs to elements that need to be interacted with in tests
• Test edge cases: Consider different starting states and user interactions
• Keep tests independent: Each test should be able to run on its own without depending on other tests
• Mock external dependencies: Use Jest’s mocking capabilities to isolate the component you’re testing

Conclusion

Congratulations! You’ve learned how to:

• Set up a testing environment for your React Native application
• Write basic component rendering tests
• Add testIDs to make components easier to find in tests
• Create interaction tests that simulate user behaviour
• Use mock functions to verify component behaviour
• Apply best practices for writing effective tests

Testing is an essential part of building reliable applications. By investing time in writing good tests, you’ll catch bugs earlier, make changes with confidence, and create a more maintainable codebase.

Next Steps

To continue improving your testing skills:

1. Add tests for your other components
2. Learn about the full React Native Testing Library API
3. See an example of a test using React Native Testing Library in the official documentation

Remember, the goal of testing isn’t 100% code coverage, but rather confidence that your application works as expected.

Focus on testing the most critical parts of your application first, and gradually expand your test suite as your application grows.