New Cohort Starts:

Donate
← Back to the skill map
Reliability & Operations/AI & reliability

Frontend Testing

6 micro-topics in Reliability & Operations, each with the evidence that proves you have it and the written reason behind every link. Before you start, it rests on 5 other domains. Downstream, it holds up 2 domains.

6 topics  ·  depth 5–8 of 16  ·  5 internal links  ·  5 in  ·  2 out

Before you start

Load-bearing links first. Each one says what in this domain rests on what outside it, and why.

The DOM

1 link

load-bearing

Test user interactions rests on Handle events

Simulated events mirror real ones.

JavaScript Core

1 link

load-bearing

Unit test JavaScript rests on Write and call functions

You unit test functions.

Next.js

1 link

load-bearing

Write end-to-end tests rests on Route with the file system

End-to-end tests drive real routes.

React

1 link

load-bearing

Testing Foundations

1 link

load-bearing

Unit test JavaScript rests on Reason about the testing pyramid

Unit tests are the base of the pyramid.

What you will be able to do

In prerequisite order. Each idea names the artifact that closes it, the market demand that put it on the map, and what it stands on.

Depth 5  ·  procedural  ·  unassisted  ·  M11 §11.2

Unit test JavaScript

Structures tests with describe, it and matchers

Evidence
Covers a utility module with meaningful assertions
Market anchor
Jest · JavaScript
Rests on
load-bearing

Reason about the testing pyramid · Testing Foundations

Unit tests are the base of the pyramid.

load-bearing

Write and call functions · JavaScript Core

You unit test functions.

Depth 6  ·  procedural  ·  unassisted  ·  M11 §11.2

Mock dependencies

Isolates the unit under test

Evidence
Tests a function without hitting the network
Market anchor
Software testing
Rests on
load-bearing

Unit test JavaScript

Mocking isolates a unit under test.

Depth 6  ·  procedural  ·  unassisted  ·  M11 §11.3

Test components as a user would

Queries by role and text, not implementation

Evidence
Test survives a refactor that changes internals
Market anchor
React Testing Library
Rests on
load-bearing

Compose components · React

You test components.

load-bearing

Unit test JavaScript

Component tests use the same runner and matchers.

Depth 7  ·  procedural  ·  unassisted  ·  M11 §11.3

Test user interactions

Simulates clicks, typing and selection

Evidence
Asserts on outcome after an interaction
Market anchor
React Testing Library
Rests on
load-bearing

Test components as a user would

Interaction tests act on rendered components.

load-bearing

Handle events · The DOM

Simulated events mirror real ones.

Depth 7  ·  procedural  ·  scaffolded  ·  M11 §11.5

Write end-to-end tests

Drives a real browser through a real flow

Evidence
A critical path is covered end to end
Market anchor
Playwright
Rests on
load-bearing

Route with the file system · Next.js

End-to-end tests drive real routes.

supporting

Test user interactions

End-to-end is the same idea against a real browser.

Depth 8  ·  meta  ·  scaffolded  ·  M11 §11.5

Write durable selectors

Locates elements without brittle coupling

Evidence
Test survives a markup change
Market anchor
Playwright
Rests on
load-bearing

Write end-to-end tests

Selector durability is a lesson learned from brittle E2E tests.

What rests on this domain

Everything downstream that names an idea here as a prerequisite, grouped by where it lives.

Delivery & CI/CD

1 link

supporting

Gate merges on checks rests on Unit test JavaScript

A gate needs something worth blocking on.

Backend Testing

1 link

supporting

Mock external APIs rests on Mock dependencies

Mocking transfers across languages.

Retool. Retrain. Relaunch.

375 ideas. 17 weeks. No tuition, ever.

Vets Who Code is a veteran-run 501(c)(3). The accelerator is free, remote, and we don’t take a share of your first paycheck.

Free · Remote · 17 weeks · EIN 86-2122804