Mocking data in tests in Remix - Step-by-Step Execution

Concept Flow - Mocking data in tests

Start Test

↓

Setup Mock Data

↓

Run Function Using Mock

↓

Check Output Against Expected

↓

Pass or Fail Test

↓

Cleanup Mocks

↓

End Test

This flow shows how a test sets up mock data, runs code using it, checks results, then cleans up.

Execution Sample

Remix

import { vi } from 'vitest';

const fetchUser = vi.fn(() => ({ id: 1, name: 'Alice' }));

const user = fetchUser();

expect(user.name).toBe('Alice');

This test mocks a fetchUser function to return fixed data, then checks the returned name.

Execution Table

Step	Action	Mock Setup	Function Call Result	Test Assertion
1	Import mock function	mock imported	N/A	N/A
2	Create mock fetchUser	fetchUser returns {id:1, name:'Alice'}	N/A	N/A
3	Call fetchUser()	N/A	{id:1, name:'Alice'}	N/A
4	Check user.name	N/A	user.name = 'Alice'	Pass: user.name === 'Alice'
5	Test ends	Mocks cleaned	N/A	Test passes

💡 Test ends after assertion passes and mocks are cleaned up

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
fetchUser	undefined	mock function set	mock function called	mock function exists
user	undefined	undefined	{id:1, name:'Alice'}	{id:1, name:'Alice'}

Key Moments - 2 Insights

Why do we create a mock function instead of calling the real one?

We create a mock to control the data returned and isolate the test from real data sources, as shown in step 2 and 3 of the execution_table.

What happens if the mock returns different data than expected?

The test assertion in step 4 will fail because the output won't match the expected value, causing the test to fail.

Visual Quiz - 3 Questions

Look at the execution_table, what does fetchUser return at step 3?

A {id:1, name:'Alice'}

B undefined

C null

D Throws error

💡 Hint

Check the 'Function Call Result' column at step 3 in the execution_table

At which step does the test check if the user name is 'Alice'?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Test Assertion' column in the execution_table

If the mock returned {id:2, name:'Bob'}, what would happen at step 4?

A Test passes

B Test fails

C Test skips assertion

D Test crashes

💡 Hint

Refer to key_moments about what happens if mock data differs from expected

Concept Snapshot

Mocking data in tests:
- Use mock functions to replace real data calls
- Setup mock to return fixed data
- Call function using mock
- Assert output matches expected
- Clean up mocks after test

Full Transcript

In Remix tests, mocking data means creating fake versions of functions that return fixed data. This helps test code without relying on real data sources. The test flow starts by setting up a mock function, then calling it to get data. The test checks if the returned data matches what is expected. If it does, the test passes. Finally, mocks are cleaned up to avoid side effects. This process isolates tests and makes them reliable and fast.