Integration testing with Testing Library in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render the Remix component for testing.

Remix

import { render } from '@testing-library/react';
import MyComponent from '~/components/MyComponent';

test('renders MyComponent', () => {
  const { getByText } = render([1]);
  expect(getByText('Hello')).toBeInTheDocument();
});

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

A<MyComponent />

BMyComponent()

Crender(MyComponent)

DReact.createElement(MyComponent)

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the component as a function instead of using JSX.

Passing the component itself without JSX.

To render a React component in Testing Library, you use JSX syntax like <MyComponent />.

2fill in blank

medium

Complete the code to simulate a user clicking a button in the test.

Remix

import { render, fireEvent } from '@testing-library/react';
import Button from '~/components/Button';

test('button click updates text', () => {
  const { getByRole } = render(<Button />);
  const button = getByRole('button');
  fireEvent.[1](button);
  expect(button.textContent).toBe('Clicked');
});

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

Atap

Bclick

Cpress

Dtrigger

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like 'press' or 'tap'.

Forgetting to call the method on fireEvent.

The fireEvent.click method simulates a user clicking on an element.

3fill in blank

hard

Fix the error in the test by completing the code to wait for an async element.

Remix

import { render, screen, waitFor } from '@testing-library/react';
import AsyncComponent from '~/components/AsyncComponent';

test('loads and displays data', async () => {
  render(<AsyncComponent />);
  await waitFor(() => [1]('Data loaded'));
  expect(screen.getByText('Data loaded')).toBeInTheDocument();
});

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

Ascreen.getAllByText

Bscreen.queryByText

Cscreen.getByText

Dscreen.findByText

Attempts:

3 left

💡 Hint

Common Mistakes

Using queryByText which returns null and does not throw.

Using findByText inside waitFor which is redundant.

waitFor expects a function that throws an error until the condition is met. Using getByText inside waitFor works because it throws if the text is not found yet.

4fill in blank

hard

Fill both blanks to create a test that checks if an input changes value on user typing.

Remix

import { render, screen, fireEvent } from '@testing-library/react';
import InputComponent from '~/components/InputComponent';

test('input value changes on typing', () => {
  render(<InputComponent />);
  const input = screen.[1]('textbox');
  fireEvent.[2](input, { target: { value: 'Hello' } });
  expect(input.value).toBe('Hello');
});

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

AgetByRole

Bclick

Cchange

DgetByLabelText

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' event instead of 'change' for typing.

Using wrong query methods that do not find the input.

Use getByRole('textbox') to find the input element by its role. Then use fireEvent.change to simulate typing into the input.

5fill in blank

hard

Fill all three blanks to write a test that submits a form and checks for success message.

Remix

import { render, screen, fireEvent } from '@testing-library/react';
import FormComponent from '~/components/FormComponent';

test('form submission shows success', () => {
  render(<FormComponent />);
  const input = screen.[1]('username');
  fireEvent.[2](input, { target: { value: 'user123' } });
  const button = screen.[3]('button');
  fireEvent.click(button);
  expect(screen.getByText('Success')).toBeInTheDocument();
});

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

AgetByLabelText

Bchange

CgetByRole

DgetByText

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getByText' to find inputs or buttons incorrectly.

Using 'click' event on input instead of 'change' for typing.

Use getByLabelText('username') to find the input by its label. Use fireEvent.change to type the username. Use getByRole('button') to find the submit button by its role.