Remix Testing Guide: Loaders, Actions and Routes (2026)

npm install -D vitest @remix-run/testing @testing-library/react \
  @testing-library/jest-dom @testing-library/user-event jsdom

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./test/setup.ts'],
  },
});

// test/setup.ts
import '@testing-library/jest-dom';

// app/routes/posts.$slug.tsx
import { json } from '@remix-run/node';
import type { LoaderFunctionArgs } from '@remix-run/node';
import { db } from '~/db.server';

export async function loader({ params }: LoaderFunctionArgs) {
  const post = await db.posts.findUnique({
    where: { slug: params.slug },
    include: { author: true },
  });

  if (!post) {
    throw new Response('Not Found', { status: 404 });
  }

  return json({ post });
}

// app/routes/posts.$slug.test.ts
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { loader } from './posts.$slug';

vi.mock('~/db.server', () => ({
  db: {
    posts: { findUnique: vi.fn() },
  },
}));

import { db } from '~/db.server';

const mockPost = {
  id: 1,
  slug: 'hello-remix',
  title: 'Hello Remix',
  content: 'Content here',
  author: { id: 'author-1', name: 'Ada Lovelace' },
};

describe('posts.$slug loader', () => {
  beforeEach(() => {
    vi.mocked(db.posts.findUnique).mockResolvedValue(mockPost as any);
  });

  it('returns post data when slug exists', async () => {
    const response = await loader({
      params: { slug: 'hello-remix' },
      request: new Request('http://localhost/posts/hello-remix'),
      context: {},
    });

    const data = await response.json();
    expect(data.post.title).toBe('Hello Remix');
    expect(data.post.author.name).toBe('Ada Lovelace');
  });

  it('throws 404 response when post does not exist', async () => {
    vi.mocked(db.posts.findUnique).mockResolvedValue(null);

    await expect(
      loader({
        params: { slug: 'nonexistent' },
        request: new Request('http://localhost/posts/nonexistent'),
        context: {},
      })
    ).rejects.toSatisfy((e: Response) => e.status === 404);
  });

  it('queries the database with the correct slug', async () => {
    await loader({
      params: { slug: 'specific-slug' },
      request: new Request('http://localhost/posts/specific-slug'),
      context: {},
    });

    expect(db.posts.findUnique).toHaveBeenCalledWith(
      expect.objectContaining({
        where: { slug: 'specific-slug' },
      })
    );
  });
});

// app/routes/posts.new.tsx
import { json, redirect } from '@remix-run/node';
import type { ActionFunctionArgs } from '@remix-run/node';
import { db } from '~/db.server';
import { requireUser } from '~/auth.server';

export async function action({ request }: ActionFunctionArgs) {
  const user = await requireUser(request);
  const formData = await request.formData();

  const title = formData.get('title')?.toString().trim() ?? '';
  const content = formData.get('content')?.toString().trim() ?? '';

  const errors: Record<string, string> = {};
  if (!title) errors.title = 'Title is required';
  if (!content) errors.content = 'Content is required';
  if (content.length < 50) errors.content = 'Content must be at least 50 characters';

  if (Object.keys(errors).length > 0) {
    return json({ errors }, { status: 422 });
  }

  const post = await db.posts.create({
    data: { title, content, authorId: user.id },
  });

  return redirect(`/posts/${post.slug}`);
}

// app/routes/posts.new.test.ts
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { action } from './posts.new';

vi.mock('~/db.server', () => ({
  db: { posts: { create: vi.fn() } },
}));
vi.mock('~/auth.server', () => ({
  requireUser: vi.fn(),
}));

import { db } from '~/db.server';
import { requireUser } from '~/auth.server';

function makeFormRequest(fields: Record<string, string>) {
  const formData = new FormData();
  for (const [k, v] of Object.entries(fields)) formData.append(k, v);
  return new Request('http://localhost/posts/new', { method: 'POST', body: formData });
}

const mockUser = { id: 'user-1', email: 'user@test.com' };

const validFields = {
  title: 'My New Post',
  content: 'This is the post content. It needs to be at least fifty characters long to be valid.',
};

describe('posts.new action', () => {
  beforeEach(() => {
    vi.mocked(requireUser).mockResolvedValue(mockUser as any);
    vi.mocked(db.posts.create).mockResolvedValue({ slug: 'my-new-post' } as any);
  });

  it('returns 422 when title is missing', async () => {
    const { title: _t, ...noTitle } = validFields;
    const response = await action({ request: makeFormRequest(noTitle), params: {}, context: {} });

    expect(response.status).toBe(422);
    const data = await response.json();
    expect(data.errors.title).toBe('Title is required');
  });

  it('returns 422 when content is too short', async () => {
    const response = await action({
      request: makeFormRequest({ ...validFields, content: 'Short content' }),
      params: {},
      context: {},
    });

    expect(response.status).toBe(422);
    const data = await response.json();
    expect(data.errors.content).toMatch(/50 characters/);
  });

  it('redirects to post page on valid submission', async () => {
    const response = await action({
      request: makeFormRequest(validFields),
      params: {},
      context: {},
    });

    expect(response.status).toBe(302);
    expect(response.headers.get('Location')).toBe('/posts/my-new-post');
  });

  it('does not create post when validation fails', async () => {
    await action({
      request: makeFormRequest({ title: '', content: 'Short' }),
      params: {},
      context: {},
    });

    expect(db.posts.create).not.toHaveBeenCalled();
  });

  it('creates post with author ID from authenticated user', async () => {
    await action({
      request: makeFormRequest(validFields),
      params: {},
      context: {},
    });

    expect(db.posts.create).toHaveBeenCalledWith(
      expect.objectContaining({
        data: expect.objectContaining({ authorId: 'user-1' }),
      })
    );
  });
});

// app/routes/posts.$slug.tsx (component part)
import { useLoaderData } from '@remix-run/react';
import type { loader } from './posts.$slug';

export default function PostRoute() {
  const { post } = useLoaderData<typeof loader>();

  return (
    <article>
      <h1>{post.title}</h1>
      <p className="author">By {post.author.name}</p>
      <div className="content">{post.content}</div>
    </article>
  );
}

// app/routes/posts.$slug.component.test.tsx
import { render, screen } from '@testing-library/react';
import { createRemixStub } from '@remix-run/testing';
import { describe, it, expect } from 'vitest';
import PostRoute from './posts.$slug';

describe('PostRoute component', () => {
  it('renders post title and author', async () => {
    const RemixStub = createRemixStub([
      {
        path: '/posts/:slug',
        Component: PostRoute,
        loader() {
          return {
            post: {
              title: 'Hello Remix',
              content: 'This is the post content.',
              author: { name: 'Ada Lovelace' },
            },
          };
        },
      },
    ]);

    render(<RemixStub initialEntries={['/posts/hello-remix']} />);

    await screen.findByRole('heading', { name: 'Hello Remix' });
    expect(screen.getByText('By Ada Lovelace')).toBeInTheDocument();
    expect(screen.getByText('This is the post content.')).toBeInTheDocument();
  });

  it('renders content in an article element', async () => {
    const RemixStub = createRemixStub([
      {
        path: '/posts/:slug',
        Component: PostRoute,
        loader() {
          return {
            post: {
              title: 'Test Post',
              content: 'Content',
              author: { name: 'Author' },
            },
          };
        },
      },
    ]);

    const { container } = render(
      <RemixStub initialEntries={['/posts/test-post']} />
    );

    await screen.findByRole('heading', { name: 'Test Post' });
    expect(container.querySelector('article')).toBeInTheDocument();
  });
});

npm install -D @playwright/test
npx playwright install chromium

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:3000' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

// e2e/posts.test.ts
import { test, expect } from '@playwright/test';

test('can view a blog post', async ({ page }) => {
  await page.goto('/posts');
  
  const firstPost = page.getByRole('article').first().getByRole('link');
  await firstPost.click();

  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
  await expect(page.getByText(/by /i)).toBeVisible();
});

test('shows 404 for nonexistent post', async ({ page }) => {
  await page.goto('/posts/this-post-does-not-exist-at-all');

  await expect(page.getByText(/not found/i)).toBeVisible();
});

Go to https://myremixapp.com/posts
Verify a list of post titles is visible
Click the first post title
Verify the author name is visible
Verify the post content is visible