Mocking and stubbing in Deno - Step-by-Step Execution

Concept Flow - Mocking and stubbing

Test starts

↓

Create stub/mock

↓

Replace real function with stub/mock

↓

Run code that calls stub/mock

↓

Stub/mock returns controlled value

↓

Test checks output or behavior

↓

Test ends

This flow shows how a stub or mock replaces a real function during a test to control behavior and check results.

Execution Sample

Deno

import { stub } from "https://deno.land/std/testing/mock.ts";

const myObj = { greet: () => "Hello" };
stub(myObj, "greet", () => "Hi");
console.log(myObj.greet());

This code replaces the greet method with a stub that returns "Hi" instead of "Hello".

Execution Table

Step	Action	Function greet Behavior	Output
1	Original greet function defined	Returns "Hello"	No output
2	Stub replaces greet with new function	Returns "Hi"	No output
3	Call myObj.greet()	Returns "Hi"	"Hi" printed
4	Test checks output	N/A	Output matches expected "Hi"

💡 Test ends after verifying stubbed function returns controlled value

Variable Tracker

Variable	Start	After Stub	After Call	Final
myObj.greet	Function returns "Hello"	Function returns "Hi"	Function returns "Hi"	Function returns "Hi"

Key Moments - 2 Insights

Why does the greet function return "Hi" after stubbing?

Because the stub replaced the original greet function with a new one that returns "Hi", as shown in execution_table step 2 and 3.

Does the original greet function still exist after stubbing?

No, the stub temporarily replaces it during the test, so calls to greet use the stubbed version (execution_table step 2).

Visual Quiz - 3 Questions

Look at the execution table, what does myObj.greet return after the stub is applied?

A "Hi"

B "Hello"

C undefined

D Error

💡 Hint

Check execution_table row 2 and 3 for the stubbed function behavior

At which step does the stub replace the original function?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the Action column in execution_table to find when the stub is applied

If the stub returned "Hey" instead of "Hi", what would change in the execution table output?

A Output in Step 1 would be "Hey"

B No change in output

C Output in Step 3 would be "Hey"

D Test would fail

💡 Hint

Focus on the Output column in execution_table step 3 where the stub return value is shown

Concept Snapshot

Mocking and stubbing replace real functions during tests.
Use stubs to return controlled values.
Mocks can also track calls.
In Deno, use std/testing/mock.ts stub function.
Stub replaces original function temporarily.
Test checks behavior or output from stub.

Full Transcript

Mocking and stubbing in Deno testing means replacing real functions with fake ones to control their behavior during tests. First, you create a stub that returns a specific value. Then you replace the original function with this stub. When the code calls the function, it uses the stub instead, returning the controlled value. This helps test how your code behaves with different function outputs. After running the test, you check if the output or behavior matches what you expect. This process ensures your code works correctly even when external parts change.

Practice

1. What is the main purpose of mocking and stubbing in Deno testing?

easy

A. To speed up the execution of the entire program

B. To replace parts of code with fake versions for easier testing

C. To permanently change the behavior of functions in production

D. To automatically generate user interface components

Solution

1. Step 1: Understand mocking and stubbing

   Mocking and stubbing are techniques used to replace parts of code with fake versions to isolate and test specific behaviors.

2. Step 2: Identify the purpose in testing context

   They help test code without relying on real dependencies, making tests simpler and more reliable.

3. Final Answer:

   To replace parts of code with fake versions for easier testing -> Option B

4. Quick Check:

   Mocking purpose = Replace code parts [OK]

Hint: Mocking replaces code parts to isolate tests [OK]

Common Mistakes:

• Thinking mocking speeds up the whole program
• Believing mocks change production code permanently
• Confusing mocking with UI generation

2. Which of the following is the correct way to import the stub function from Deno's standard testing library?

easy

A. import { stub } from "https://deno.land/std/testing/stub.ts";

B. import stub from "https://deno.land/std/testing/mock.ts";

C. import { stub } from "https://deno.land/std/testing/mock.ts";

D. import * as stub from "https://deno.land/std/testing/mock.ts";

Solution

1. Step 1: Recall the correct import path and syntax

   The stub function is exported from "https://deno.land/std/testing/mock.ts" and must be imported using named import syntax.

2. Step 2: Check each option

   import { stub } from "https://deno.land/std/testing/mock.ts"; uses named import from the correct path. import stub from "https://deno.land/std/testing/mock.ts"; uses default import which is incorrect. import { stub } from "https://deno.land/std/testing/stub.ts"; uses wrong file name. import * as stub from "https://deno.land/std/testing/mock.ts"; imports all as an object, not the function directly.

3. Final Answer:

   import { stub } from "https://deno.land/std/testing/mock.ts"; -> Option C

4. Quick Check:

   Correct import = named from mock.ts [OK]

Hint: Use named import from mock.ts for stub [OK]

Common Mistakes:

• Using default import instead of named import
• Wrong file path for stub
• Importing everything instead of just stub

3. Given the following code snippet, what will be the output?

import { stub } from "https://deno.land/std/testing/mock.ts";

const obj = {
  greet() {
    return "Hello";
  }
};

const stubGreet = stub(obj, "greet", () => "Hi there!");
console.log(obj.greet());
stubGreet.restore();
console.log(obj.greet());

medium

A. "Hello" then "Hello"

B. "Hi there!" then "Hi there!"

C. Runtime error due to incorrect stub usage

D. "Hi there!" then "Hello"

Solution

1. Step 1: Understand stub behavior on method

   The stub replaces obj.greet with a new function returning "Hi there!" temporarily.

2. Step 2: Analyze console outputs

   First console.log calls stubbed method, outputting "Hi there!". After restore(), original method returns "Hello" on second log.

3. Final Answer:

   "Hi there!" then "Hello" -> Option D

4. Quick Check:

   Stub replaces then restores method [OK]

Hint: Stub changes method until restore is called [OK]

Common Mistakes:

• Expecting original method output before restore
• Thinking stub permanently changes method
• Confusing stub with spy that tracks calls

4. What is the error in the following Deno test code using stub?

import { stub } from "https://deno.land/std/testing/mock.ts";

const obj = {
  value() {
    return 42;
  }
};

const stubValue = stub(obj, "val", () => 100);
console.log(obj.value());
stubValue.restore();

medium

A. Trying to stub a non-existent method 'val' on obj

B. Missing import statement for stub

C. restore() called before stub is created

D. Incorrect arrow function syntax in stub

Solution

1. Step 1: Check stub target method name

   The stub tries to replace method named "val" but obj only has "value" method.

2. Step 2: Understand stub behavior on invalid method

   Stubbing a non-existent method causes an error or does not work as expected.

3. Final Answer:

   Trying to stub a non-existent method 'val' on obj -> Option A

4. Quick Check:

   Stub method must exist on object [OK]

Hint: Stub only existing methods on objects [OK]

Common Mistakes:

• Using wrong method name in stub
• Forgetting to import stub
• Calling restore too early

5. You want to test a function that calls fetchData() which normally fetches data from the internet. Using Deno's stub, how can you replace fetchData to return a fixed value { success: true } only during the test, and ensure the original fetchData is restored after the test?

hard

A. Use const stubFetch = stub(obj, "fetchData", () => ({ success: true })); then call stubFetch.restore() after test

B. Replace fetchData globally without restore, returning fixed value

C. Use stub(obj, "fetchData", async () => Promise.resolve({ success: true })); but forget to restore

D. Call stub(obj, "fetchData", () => { return true; }); without storing stub

Solution

1. Step 1: Create a stub for fetchData returning fixed value

   Use stub on the object containing fetchData, replacing it with a function returning { success: true }.

2. Step 2: Restore original method after test

   Store the stub in a variable and call restore() after the test to revert changes.

3. Final Answer:

   Use const stubFetch = stub(obj, "fetchData", () => ({ success: true })); then call stubFetch.restore() after test -> Option A

4. Quick Check:

   Stub with restore keeps tests clean [OK]

Hint: Always restore stub after test to keep original code [OK]

Common Mistakes:

• Not restoring stub after test
• Replacing globally without control
• Returning wrong stub value type