Mocking data in tests in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the mocking library in a Remix test file.

Remix

import { [1] } from 'vitest';

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

Atest

Bdescribe

Cvi

Dmock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'mock' instead of 'vi' will cause an import error.

Importing 'describe' or 'test' does not provide mocking capabilities.

The vi object is used in Vitest for mocking functions and modules.

2fill in blank

medium

Complete the code to create a mock function that returns 'hello' when called.

Remix

const mockFn = vi.[1](() => 'hello');

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

AspyOn

Bfn

CmockReturnValue

DmockImplementation

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'spyOn' is for spying on existing functions, not creating new mocks.

Using 'mockReturnValue' or 'mockImplementation' directly on 'vi' is incorrect.

The vi.fn() method creates a mock function. Passing a function to it defines its implementation.

3fill in blank

hard

Fix the error in mocking a module named 'api' to return a fake user object.

Remix

vi.mock('./api', () => ({ [1]: () => ({ id: 1, name: 'Test User' }) }));

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

AgetUser

Bfetch

CuserFetch

DfetchUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect function names causes the mock not to replace the real function.

Misspelling the function name leads to runtime errors.

The mocked function name must match the exported function name from the 'api' module, which is getUser.

4fill in blank

hard

Fill both blanks to mock a module './db' with a function 'connect' that returns true.

Remix

vi.mock('./db', () => ({ [1]: () => [2] }));

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

Aconnect

Bfalse

Ctrue

Ddisconnect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'disconnect' instead of 'connect' will not mock the correct function.

Returning 'false' would simulate failure, not success.

The mocked function should be named connect and return true to simulate a successful connection.

5fill in blank

hard

Fill all three blanks to create a mock for './service' with a function 'fetchData' that returns an object with 'status' and 'data'.

Remix

vi.mock('./service', () => ({ [1]: () => ({ status: [2], data: [3] }) }));

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

AfetchData

B'success'

C{ items: [1, 2, 3] }

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong function names causes the mock to fail.

Returning incorrect data shapes leads to test failures.

The mock function is named fetchData. It returns an object with status set to 'success' and data as an array inside an object.