Integration testing with Testing Library in Remix

Introduction

Integration testing checks if different parts of your Remix app work well together. Testing Library helps you test your app like a user would.

When you want to test how multiple components interact in your Remix app.

When you want to check if your app routes and data loading work correctly together.

When you want to simulate user actions like clicking buttons or filling forms.

When you want to ensure your UI updates properly after user events.

When you want to catch bugs that unit tests might miss because they test parts alone.

Syntax

Remix

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from '~/components/MyComponent';

// Render component inside router for Remix routes
render(
  <MemoryRouter>
    <MyComponent />
  </MemoryRouter>
);

// Find elements
const button = screen.getByRole('button', { name: /submit/i });

// Simulate user click
await userEvent.click(button);

// Assert expected output
expect(screen.getByText(/success/i)).toBeInTheDocument();

Use MemoryRouter to simulate routing in tests.

Use screen to find elements by role, text, or label for accessibility.

Examples

Render a component without routing if it doesn't depend on routes.

Remix

render(<MyComponent />);

Render with initial route set to /home to test route-specific behavior.

Remix

render(
  <MemoryRouter initialEntries={["/home"]}>
    <MyComponent />
  </MemoryRouter>
);

Find an input by its label and simulate typing text.

Remix

const input = screen.getByLabelText('Username');
await userEvent.type(input, 'myname');

Sample Program

This test renders a simple component with a button. When the button is clicked, a greeting message appears. The test simulates the click and checks if the message shows up.

Remix

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router-dom';
import { useState } from 'react';

// Simple component with button and message
function Greeting() {
  const [greeted, setGreeted] = useState(false);
  return (
    <div>
      <button onClick={() => setGreeted(true)}>Say Hello</button>
      {greeted && <p>Hello, user!</p>}
    </div>
  );
}

// Test
async function testGreeting() {
  render(
    <MemoryRouter>
      <Greeting />
    </MemoryRouter>
  );

  const button = screen.getByRole('button', { name: /say hello/i });
  await userEvent.click(button);

  const message = screen.getByText(/hello, user!/i);
  console.log(message.textContent);
}

testGreeting();

Important Notes

Always test components inside a router if they use routing features.

Use roles and labels to find elements for better accessibility and reliable tests.

Use await with userEvent to handle async user actions properly.

Summary

Integration testing checks how parts of your Remix app work together.

Testing Library helps simulate user actions and find elements accessibly.

Render components inside MemoryRouter to test routing behavior.