JavaScript Unit Testing - The Practical Guide

Set up a JavaScript testing environment to run tests, explore essential tools and base setups, and compare alternatives to choose the right tools for your projects.

Explore how to set up a JavaScript project for automated testing, including choosing a test runner and assertion library, and compare tools like Jest and Karma.

Explore the testing setup for JavaScript projects, compare Jest and Vitest, and learn to configure a test runner and assertion library across Node.js and front-end TypeScript projects.

Install vitest in your JavaScript project with npm install --save-dev, add a test script in package.json, and use --globals to access it and expect without imports for node and frontend.

Access three demo project folders with vitest to start testing front-end and back-end JavaScript, featuring ES modules, CommonJS, npm install, npm start, and a basic calculator on localhost.

Learn to write unit tests with v-test as runner and assertion library, use the arrange, act, and assert pattern, state expectations, and organize tests across multiple units.

Set up a JavaScript test project, install dependencies with npm, and write a unit test for the add function in math.js using vitest or jest, with a math.test.js file.

Write a first unit test for an add function that sums numbers in an array, using Vitest to import the function, run the test, and assert the result equals six.

Run tests with vitest using npm test (or npm run test), view a passing result with detailed outputs, and use watch mode or --run for automatic re-runs and failure feedback.

Discover why we write automated unit tests to verify behavior, catch bugs early, and ensure coverage for all functions and scenarios as code evolves, by running tests with npm test.

Learn the AAA pattern for unit tests by clearly separating arrange, act, and assert phases to improve readability and maintainability, and derive expected results with reduce rather than hardcoding.

Apply the triple a pattern and keep tests simple by using two numbers to verify sum behavior, ensuring quick understanding and maintainability.

Write multiple unit tests for the add function to handle invalid inputs and numeric strings, verify NaN outcomes, and enforce numeric conversion to prevent string concatenation, ensuring code reliability.

Demonstrates applying the aaa pattern to write multiple tests for a JavaScript add function, exploring scenarios and invalid inputs, and iteratively expanding coverage with empty array zero and missing-argument cases.

Learn to test for errors in JavaScript unit tests with Vitest, using toThrow, wrapping code in a function, and leveraging not for opposite conditions.

Add a test to ensure the add function throws an error when invoked with multiple arguments instead of an array, using a wrapped call and toThrow.

Learn to test thrown errors in JavaScript using toThrow with optional expectations: message, regex, or error class, and verify the exact error like 'is not iterable' to avoid false positives.

Practice JavaScript unit testing by transforming non-number values to numbers and testing simple and tricky functions, including extract numbers from a form data object with a get method.

Write unit tests for the transformToNumber function using vitest, validating that a string number converts to a numeric type. Verify that non-transformable values yield not-a-number results and discuss error handling.

Discover how to design tests with multiple assertions, challenge expectations with transformToNumber and not a number scenarios, and prepare validation.js tests for two functions across multiple inputs.

Review the validation.test.js to see how deliberate failing tests prompt you to adjust the validate number function, throwing errors for non numeric values or NaN.

Organize multiple tests into test suites with the describe function in Vitest and Jest. Nest describes to separate units and functions, improving output clarity and quick failure localization.

Learn to validate backend code with frontend tests by migrating test files, running npm install and npm test, and applying necessary code tweaks for cross-environment compatibility.

Master the AAA pattern, write expectations with not, organize tests with describe, and explore modes like watch to ensure robust JavaScript unit tests.

Learn what kind of code to test and what not to test with Vitest and Jest, keep tests short and concise, and evolve your tests alongside your application.

Test only your own code and the frontend project's reaction to responses and errors, while avoiding browser APIs, fetch, and any third-party code.

Apply the arrange-act-assert pattern to keep tests organized and simple. Test one unit and one behavior per test, keep tests focused on the essence, and minimize assertions to reveal failures.

Test one thing per test by focusing on a single feature or behavior, like validating input or transforming it; keep tests granular with multiple tests rather than one big test.

Split the formSubmitHandler into multiple functions to improve testability and readability in app.js by getting, validating, transforming input, deriving the result, and outputting the text to the DOM.

Refactor the code by extracting input parsing into extractEnteredNumberValues in parser.js. Create calculateResult in math.js, cleanNumbers in numbers.js, and generateResultText in output.js to enable unit testing.

Split the code into more units and write a vitest based test for generate result text that has no external dependencies and returns a string for various inputs.

Learn to split code into standalone logical pieces to ease testing and maintainability, apply iterative test practices, and prepare for testing future functions like clean numbers.

Explore the cleanNumbers function and dive into integration tests, learning how to test units with dependencies. Balance unit and integration tests to inform your JavaScript testing approach.

Explore how integration tests cover functions that call other functions and how combining multiple modules or functions forms an integration test, using cleanNumbers as an example.

Learn to write integration tests for cleanNumbers and transformToNumber with Vitest, validating that an array of string numbers returns real numbers and illustrating how function interactions are tested.

Practice robust unit testing by validating inputs and ensuring errors are thrown for invalid values, such as arrays containing empty strings. Explore integration tests that verify the combination of functions.

Balance unit and integration tests by testing many stand-alone functions while avoiding unnecessary fragmentation. Pair these with integration tests for combined behavior, noting end-to-end tests are separate resources.

Explore key testing library features that work with Vitest or Jest, including setup and cleanup hooks for tests, asynchronous testing, and concurrent tests to speed execution.

Explore why toBe checks exact equality for primitive values while toEqual performs deep comparison for arrays and objects.

Learn to test asynchronous code in JavaScript using callbacks and promises with vitest, validating a token generation function that produces a json web token for authentication.

Learn to test asynchronous code with callbacks by passing a done parameter and signaling completion for Vitest and Jest. Ensure assertions run inside the callback and handle errors with try-catch.

Learn to test asynchronous code in JavaScript using promises and async/await. See how to test a promise-returning function like generateTokenPromise with expect, resolves, and a defined token value.

Learn how hooks, functions automatically executed by the test runner, in V-Test and Jest, enable testing a user class by instantiating it and verifying properties with toHaveProperty.

Explore why hooks matter for testing: avoid shared state by isolating user and test email setup, and prevent failing tests caused by global values.

Master testing hooks—beforeAll, beforeEach, afterEach, and afterAll—from Vitest (and Jest) to initialize and clean up tests. Use beforeEach/afterEach to reset state between tests, and beforeAll/afterAll for suite setup and cleanup.

Learn to run tests concurrently with the concurrent annotation in Vitest and Jest to speed up execution, applying it to individual tests or an entire describe suite.

Explore advanced unit testing concepts, including asynchronous testing with callbacks and promises, lifecycle hooks (beforeAll, beforeEach, afterEach, afterAll), and parallel execution with concurrent annotations to speed up large test suites.

Explore side effects and external dependencies, and learn how to use spies and mocks to solve testing problems with practical examples.

Explore side effects in a Node.js starter project by passing a log function to generateReportData and persisting generated data with storeData and writeData to data.txt, with testing implications.

Explore how to test code that writes data by focusing on function behavior and avoiding real file-system side effects; verify writeFile is invoked with the data passed to it.

Learn how spies and mocks remove side effects by wrapping or replacing functions, and use test-specific logic to simulate scenarios in Vitest and Jest.

Explore spies and mocks by testing that generateReportData triggers an optional log function using a spy replacement, with vi/jest utilities and toBeCalled checks.

Explore mocks and automocking to isolate code, replacing fs writeFile with a mocked function so tests avoid file writes. Use spies and toBeCalled to verify interactions in Vitest or Jest.

Learn how mocking isolates tests from production code and avoids side effects, with Vitest hoisting mocks automatically, unlike Jest, and how test file scope and order affect mock behavior.

Explore how spies in JavaScript unit testing act as trackers for function execution, verify specific call counts, and inspect arguments to validate behavior.

Explains using mocks and spies to simplify tests, including mocking the path module to return a filename and verify writeFile receives the correct data and filename.

Set up global mock implementations via the __mocks__ folder to have Vitest and Jest automatically use your custom fs.js replacement and track calls with spies.

explore advanced mocking in JavaScript unit testing by using mockImplementation and mockImplementationOnce to replace function behavior in specific tests, with automatic restoration after use.

Explore mocking and spies in JavaScript unit testing, learn how mocking replaces entire modules and allows custom implementations, including the __mocks__ folder, to prevent side effects.

Dive into mocking global objects and functions with a front-end focus, explore multiple mocking patterns, and write concrete tests that demonstrate replacing functionalities in JavaScript unit testing.

Explore a browser-based demo front-end app to learn JavaScript unit testing, focusing on extracting form data, simulating a request with promises, and testing error handling and validation.

Practice writing unit tests for custom error classes using Vitest, covering HTTP error and validation error with assertions on status code, message, and data.

Test a validation function by asserting that empty or blank strings throw errors using Vitest and expect. Verify error messages via npm test, then move toward mocking.

Learn why mocking improves JavaScript unit tests by replacing real HTDP requests in the HTDP JS file’s send data request, avoiding real fetch calls and backend changes.

Learn to mock a global fetch using vi.stubGlobal in an http.test.js setup, replacing fetch with a vi.fn that returns a controlled promise, and verify that sendDataRequest resolves to parsed responseData.

Explore test-specific mocking to verify that data sent via a fetch-based function is properly stringified to JSON before transmission, using async tests to distinguish resolves from rejects.

Demonstrates mocking the fetch function to simulate non-ok responses, using mock implementation once to set okay to false, and asserting that the promise rejects with HttpError.

learn to test extractPostData using local mock values by creating a mock form data object with a get method, validating title and content extraction in a post.test.js suite using vitest.

Master practical mocking techniques, including stubbing objects like fetch and building fake mock data without testing frameworks. Embrace creative testing to verify original code behaviors by shaping data and environments.

Learn to test code that interacts with the DOM, handle DOM related side effects, and compare browser and node environments, using libraries that simplify DOM access in tests.

Explore how dom.js show error manipulates the DOM, why document dependency breaks tests in node environments, and how to mock or rely on DOM support in Vitest or Jest.

Choose the right testing environment for JavaScript tests, switching from node to dom-enabled environments like jsdom or happy-dom (Vitest or Jest) to access browser APIs and run front-end tests.

Set up a virtual dom by loading the index.html into a happy-dom document, using fs and path to read the file, and stub the document with vitest for testing.

Write a test that calls show error with a dummy message, then verify a paragraph is inserted into the errors element using vitest's expect.

Demonstrates tests for document behavior by checking no error paragraph initially and that show error inserts one, while resetting the virtual document before each test.

Finish your DOM tests by validating that showError outputs the provided message in the error paragraph. Learn to assert the error text matches the test message and run npm test.

Explore the Testing Library, a third-party tool that simplifies DOM testing with Jest or Vitest, offering element selectors and user event utilities for React, Angular, and vanilla JavaScript.

Switch to a DOM-specific testing environment, set up mocks, replace global modules with test-specific code to avoid side effects, and write tests that interact with the DOM.

Continue applying what you learned by building demo projects and using the skills in your day-to-day work to solidify your foundation.