Frontend Tooling and Testing

What you will learn

• npm and package.json
• Vite and bundling
• ESLint and Prettier
• Unit tests with expect and mocks
• Testing Library queries
• Deploying and CI

Lessons

1. 1

   npm and package.json

   Start a project with npm: package.json, installing packages, dependencies versus devDependencies, semver ranges, the lockfile, npm scripts, npx and npm audit.

   11 exercises

2. 2

   Libraries, Frameworks and Build Tools

   Decide when third-party code is worth it, tell a library from a framework, evaluate a package before you add it, scaffold with Vite, and understand bundling, build output, source maps and why import.meta.env is public.

   12 exercises

3. 3

   Linting and Formatting

   Tell ESLint from Prettier, read a lint report, and fix the real bugs behind eqeqeq, no-undef and no-unused-vars before a user finds them.

   11 exercises

4. 4

   Unit Testing

   Write describe, it and expect tests that catch real bugs: arrange, act, assert, toBe versus toEqual, testing throws and async code, and mock functions.

   11 exercises

5. 5

   Testing the DOM and Accessibility

   Test pages the way people use them: query by role, label and text, act with userEvent, run automated accessibility checks, and know what they miss, from keyboard passes to cross-browser and usability testing.

   10 exercises

6. 6

   Shipping a Site

   Connect to GitHub with an SSH key and sign your commits, publish with GitHub Pages, deploy from a repository to Netlify or Vercel with preview deploys, point a custom domain, and run lint and tests in GitHub Actions.

   13 exercises

7. 7

   Putting It Together

   Work a ticket the way a frontend team does: clear a lint report, write a suite that catches planted bugs in a cart module, reproduce a bug with a failing test and fix it, and test and repair a form component through its roles and labels.

   8 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

• Type the answer: 20
• Code exercise: 12
• Fix the bug: 10
• Fill in the blank: 9
• Match the pairs: 6
• Spot the bug: 4
• Multiple choice: 4
• Select all that apply: 4
• Predict the output: 4
• Reorder lines: 3