JavaScript tooling and testing
You set up a front-end project with Vite, add linting and formatting, write unit and end-to-end tests and manage dependencies safely.
Level 301 · 16 lessons · 15 practice labs
Lessons
Project setup
- Setting up a project with Vite
- What a bundler does: the module graph and outputs
- The dev server and hot reload
- Production builds and source maps
- Short task: a multi-page Vite project
Code quality
- ESLint rules and configuration
- Consistent formatting with Prettier
- Pre-commit checks
- Auditing and updating dependencies
- Short task: set up a quality gate for a project
Testing
- Unit tests with Vitest
- Mocks, fakes and fake timers
- DOM tests
- End-to-end tests with Playwright
- Measuring coverage and what it means
- Capstone: a tested and bundled app
Practice labs
- Inspect the production build size: Produce a Vite project's production build and list how much space each file takes.
- Trace an error back with a source map: Map an error line seen in minified output back to the original file and line with a source map.
- Split the report page into its own chunk: Move a rarely opened report page into its own chunk with dynamic import and cut the initial load size.
- Clear ESLint warnings without disabling rules: Clean a file that triggers unused-variable and == warnings without switching any rule off.
- Set one formatting rule for the team: Add Prettier to a project with mixed indentation and configure it so it doesn't clash with ESLint.
- Stop bad code at commit time: Set up a pre-commit hook that runs lint and tests on changed files only and try a bad commit.
- Sort out dependency vulnerabilities: Read npm audit output and separate vulnerabilities coming from direct and from indirect dependencies.
- Upgrade to a safe version without breaking: Upgrade a vulnerable package in small version steps and confirm the tests still pass.
- Pin a transitive dependency: Pin a vulnerable transitive dependency to a safe version with overrides while its parent stays unpatched.
- Write unit tests for a price function: Write Vitest tests, edge values included, for a function that applies discounts and VAT.
- Test against a mocked currency service: Test a module that calls a currency service with a mock instead of the real network.
- Test timer code with fake timers: Test code that logs out after thirty minutes of inactivity in seconds with fake timers.
- Close a gap in the coverage report: Find the error branch the coverage report shows as never run and write a test for it.
- Put an accordion widget through a DOM test: Test an accordion opening and closing in jsdom by clicking like a user.
- Write an end-to-end test for checkout: Test adding to cart, entering an address and confirming end to end in a real browser with Playwright.
About this course
You set up a front-end project with Vite, add linting and formatting, write unit and end-to-end tests and manage dependencies safely.
What you will learn
- Project setup
- Code quality
- Testing
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run in your own Kali Linux terminal that opens in the browser. Nothing to install; the lab starts clean in every lesson.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.