Why testing ensures app reliability in Remix - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the testing library in Remix.

Remix

import { [1] } from '@remix-run/testing';

Drag options to blanks, or click blank then click option'

Atest

Brender

CuseLoaderData

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'test' instead of 'render' to import from '@remix-run/testing'.

Importing 'useLoaderData' which is for data fetching, not testing.

The 'render' function from '@remix-run/testing' is used to render components for testing in Remix.

2fill in blank

medium

Complete the code to write a simple test that checks if a component renders text.

Remix

test('renders welcome message', () => {
  const { getByText } = [1](<Welcome />);
  expect(getByText('Welcome')).toBeInTheDocument();
});

Drag options to blanks, or click blank then click option'

Ascreen

BwaitFor

CfireEvent

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'screen' directly without rendering the component first.

Using 'fireEvent' which is for simulating user actions, not rendering.

The 'render' function is used to render the component so that we can query its output in tests.

3fill in blank

hard

Fix the error in the test by completing the missing assertion method.

Remix

expect(getByText('Loading')).[1]();

Drag options to blanks, or click blank then click option'

AtoBeUndefined

BtoBeNull

CtoBeVisible

DtoBeFalsy

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'toBeNull' which checks for absence, not presence.

Using 'toBeUndefined' which is unrelated to DOM elements.

The 'toBeVisible' matcher checks if the element is visible in the document, which is correct for testing loading states.

4fill in blank

hard

Fill both blanks to simulate a user clicking a button and then checking the updated text.

Remix

const { getByText } = render(<Counter />);
fireEvent.[1](getByText('Increment'));
expect(getByText('Count: [2]')).toBeInTheDocument();

Drag options to blanks, or click blank then click option'

Aclick

B1

C2

Dchange

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'change' event which is for input fields, not buttons.

Expecting the count to be '2' after only one click.

The 'click' event simulates a button press, and after one click, the count should update to '1'.

5fill in blank

hard

Fill all three blanks to write a test that waits for data to load and then checks the displayed result.

Remix

test('loads and displays data', async () => {
  const { findByText } = render(<DataFetcher />);
  const item = await findByText('[1]');
  expect(item).toBeInTheDocument();
  expect(item.textContent).toBe('[2]');
  expect(typeof item.textContent).toBe('[3]');
});

Drag options to blanks, or click blank then click option'

ALoaded Item

Cstring

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' as the type which is incorrect for text content.

Mismatching the text in findByText and expect.

The test waits for the text 'Loaded Item' to appear, checks its content matches, and confirms the content is a string.