Easy Test Driven Development with TypeScript and Vitest from Udemy

What's inside

Learning objectives

Go from noob to pro with real-world test driven development
Learn a fast effective way of bringing test automation into your coding
Understand how vitest allows us to build unit tests that test business logic and ui code

Learn how to write the right sorts of tests that add real value to your development
See how tdd is done in real life

Go from noob to pro with real-world test driven development
Learn a fast effective way of bringing test automation into your coding
Understand how vitest allows us to build unit tests that test business logic and ui code
Learn how to write the right sorts of tests that add real value to your development
See how tdd is done in real life

Syllabus

We will have learned the cycle of writing tests before we write code. We'll understand how this fits into a workflow and how to set up testing within our project.

Why might you be taking this course? What does the course cover? and how will it work?

The first example of TDD, from no code to a working algorithm in a couple of minutes.

Example code - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%201/leap-year-1

The demo in the previous lecture went through a lot of concepts quickly. Let's unpack everything that we did.

How to download the sample code
How to set up a fresh vitest project

Working from https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%201/fresh-project

Introducing checklists and another feature for the leap year algorithm

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%201/leap-year-2

A challenge to follow the checklist in 'leap-year-2' from the example code via linktr.ee/ashleyfriezetdd

Or here - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%201/leap-year-2

We look at the solution to the leap year problem, including a little surprise when the "free handling of zero" is affected by the algorithm developing.

Solution code at https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%201/leap-year-solution

A recap of the main principles we've learned from TDD so far

Put TDD into context with some more complex problems

We expand our test driven development process to a more complex problem and discover state and the need for test isolation.

Example code https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1

We look at how to fit a tidy up into the test cycle, and cover given/when/then

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1

Making code that's testable often involves making code that's more self-contained. We look at a few patterns to avoid the dreaded global variable favoured by JavaScript.

Various solutions discussed:
https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1-class
https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1-object-factory
https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-1-pure-functions

Let's mature and extend the code behind the example we've been working on.

Example code - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-2

A little coding challenge for you to try.

See `theatre-booking-2` from the repo at linktr.ee/ashleyfriezetdd and github.com/ashleyfrieze/easy-tdd-typescript

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-2

We look at a possible solution to the spare seats problems posed in the exercise.

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%202/theatre-booking-2-solution

A deeper look at assertions.

Wrapping up the Fundamentals

Apply Test Driven Development to some software engineering tasks to learn more tricks of the trade

Let's solve some algorithmic problems test first, starting with a little string manipulation of titles.

Example code - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-1

A challenge to follow from the previous example by reversing the algorithm. The code is at

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-1

We look at how to solve the exercise, and consider the benefits of adding round trip tests to see that the data converts correctly each way.

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-1-solution

An exercise to try. Get used to the rhythm of building tests and algorithms one step at a time.

Start with the `kebab-case-1-solution` project - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-1-solution

We look at a solution for converting Kebab Case to Title Case, then we look at how to reverse the algorithm, along with experimenting with regular expressions in regexr.com

Example code at - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/kebab-case-2

This is a more complex component with more complex objects and relationships. We look at where to start.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/org-chart-1

As we progress from day 1, we write more of the real algorithms and get into more tests. Test data factories help us go faster by making test data for us.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/org-chart-1

We look at how to solve the challenge around building an org chart component

Solution found at: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/org-chart-2

Now we've built some algorithms test first, what have we learned about the process?

For tests to be helpful and useful, we need to know how to maintain them and run them. We look at how the tests can be a valuable part of our repo.

Refactoring of org-chart into a separate test directory looks like this - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%203/org-chart-2-test-dir

As we tackle more real-world examples, we need to manage how the code we're writing interfaces to other things.

We may write production code that uses environment variables for configuration. We look at how to write that code test first and safely manipulate environment variables within a test fixture.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-id-1

As we structure code that depends on environment variables in a more complex way, we need to rethink how we test it.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-id-2

Sometimes our code depends on knowing the time. Let's look at how to assert and control for that at test time.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-id-3

While we can set environment variables within our test fixtures, we may prefer to set some global environment variables via a .env file.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-id-4

When our code uses real dependencies, we may need to replace those at test time, and see what happened when they were called.

Includes an exercise found at https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-1

Solution to the exercise set in the previous lecture. How to mock and spy on dependencies injected into a function.

Solution at: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-2

When dependency injection is not the solution we can use mocks and spies at module level.

Example code - https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-3

Before we can fetch the source data from our web service, we need to be able to convert it into our program's format. A short exercise - the source code for this is over on https://github.com/ashleyfrieze/easy-tdd-typescript in the vitest/section 4/record-source-push-3 directory

Let's solve the data conversion challenge from the previous video

https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-4

The time has come to hook up to a web service, but can we make it one which we control at test time?

Example code https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-msw-1

While MSW makes it possible to provide mock web services, we look at how to combine it with vi.fn() to give us variable responses at test time, and spying on the calls received by MSW.

Example code: https://github.com/ashleyfrieze/easy-tdd-typescript/tree/main/vitest/section%204/record-source-push-msw-2

A look back at the main techniques and decisions within this section.

Integrate Test Driven Development into building a web UI

We look at the basic set up of a project which uses React, React Testing Library and Vitest together. We look at how to assert what's on the screen and what happens after interactions.

It's followed by an exercise found in https://github.com/ashleyfrieze/easy-tdd-typescript/section 5/react-example-1

We solve the Go Down problem from the previous lecture, and then look at modularising react components and how to test them, along with the use of `vi.fn()` as a way to capture callback events.

Code found at https://github.com/ashleyfrieze/easy-tdd-typescript/section 5/react-example-2

Reflect on the major learnings from the course

I hope you enjoyed this course. Please ask questions if you have them. Good luck in putting these techniques into practice.

Attached are some cheat sheets, also available here - https://github.com/ashleyfrieze/easy-tdd-typescript/blob/main/cheatsheets.md

This is a summary of the main lessons, along with some notes for those wishing to use Jest.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Uses TypeScript and Vitest, which are modern tools for building scalable and maintainable applications, and are highly relevant to industry standards

Focuses on practical examples and realistic scenarios, which helps learners connect theory with real-world application and build confidence

Covers mocks and test doubles, which are essential techniques for isolating units of code and writing effective tests, especially when dealing with external dependencies

Explores testing code that depends on APIs, which is a common challenge in modern software development and crucial for ensuring application reliability

Includes examples using React Testing Library, which is a popular tool for testing React components and ensures that the user interface behaves as expected

Provides code examples on GitHub, which allows learners to easily access, experiment with, and adapt the code to their own projects, enhancing the learning experience

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Easy Test Driven Development with TypeScript and Vitest with these activities:

Review TypeScript Fundamentals

Show steps

Solidify your understanding of TypeScript syntax and features to better grasp the examples used in the course.

Browse courses on TypeScript

Show steps

Review TypeScript documentation on basic types and syntax.
Practice writing simple TypeScript functions and classes.
Familiarize yourself with TypeScript's type system.

Brush Up on Vitest Basics

Show steps

Familiarize yourself with Vitest's syntax and features to better understand the testing examples used in the course.

Show steps

Read the Vitest documentation on basic setup and assertions.
Write simple tests using Vitest to test basic functions.
Explore Vitest's mocking and spying capabilities.

Implement TDD on Simple Algorithms

Show steps

Practice applying TDD principles to simple coding problems to reinforce the concepts learned in the course.

Browse courses on Test Driven Development

Show steps

Choose a simple algorithm (e.g., string reversal, factorial).
Write a test case for the algorithm's expected behavior.
Implement the algorithm to pass the test.
Refactor the code if necessary.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Build a Simple API Client with TDD

Show steps

Apply TDD to a real-world scenario by building a client for a public API, solidifying your understanding of testing asynchronous code.

Browse courses on API

Show steps

Choose a public API (e.g., OpenWeatherMap, JSONPlaceholder).
Write tests for the API client's functions.
Implement the API client using TDD.
Handle different API responses and error scenarios.

Create a TDD Cheat Sheet

Show steps

Summarize the key concepts and steps of TDD in a concise cheat sheet for future reference and to reinforce your learning.

Browse courses on Test Driven Development

Show steps

Review the course materials on TDD principles.
Identify the most important concepts and steps.
Create a cheat sheet with clear explanations and examples.

Read 'Test-Driven Development: By Example'

Show steps

Deepen your understanding of TDD principles and practices by studying a well-regarded book on the subject.

View Test Driven Development: By Example on Amazon

Show steps

Read the book 'Test-Driven Development: By Example'.
Take notes on key concepts and examples.
Apply the concepts to your own coding projects.

Contribute to a Vitest Plugin

Show steps

Gain practical experience with Vitest and TDD by contributing to an open-source Vitest plugin, enhancing your skills and knowledge.

Show steps

Explore existing Vitest plugins on GitHub.
Identify a plugin that needs improvement or a new feature.
Contribute code, documentation, or bug fixes to the plugin.

Career center

Learners who complete Easy Test Driven Development with TypeScript and Vitest will develop knowledge and skills that may be useful to these careers:

Software Developer

A software developer writes and maintains code, and this course provides direct techniques to improve code quality and reliability through Test Driven Development. This course teaches the basics of testing, the red-green-refactor cycle, code coverage, mocks, and testing with APIs and user interfaces, all critical elements for a software developer. By learning to write tests first, a software developer can design and build more robust and maintainable software. This course will help developers avoid common pitfalls and ensure they're testing the right elements to provide valuable results.

See salaries and explore the career path for Software Developer

Test Engineer

A test engineer specializes in designing and implementing test strategies. The course provides practical, real-world insights into Test Driven Development, helping a test engineer understand how to bring test automation into a workflow effectively. This course emphasizes not just the syntax of testing frameworks but the context of when to use certain techniques. A test engineer needs to understand why tests are needed, how to set up tests, and how to use mocks and test doubles. This course may be useful for anyone wanting to understand the fundamental relationship between testing and software development.

See salaries and explore the career path for Test Engineer

Full-Stack Developer

A full stack developer works on both the frontend and backend of applications. This course will help a full stack developer gain skill in crafting testable code for both sides. The course covers testing user interfaces and also server-side code with API dependencies, relevant to the work of a full stack developer. A full stack developer needs a holistic view of testing, and this course will help them achieve that. It will help to improve the quality of code, from the user interface all the way down to the business logic, through effective implementation of Test Driven Development.

See salaries and explore the career path for Full-Stack Developer

Backend Developer

A backend developer focuses on the server-side logic of applications. This course will help a backend developer to ensure the business logic is robust. The course covers testing code that depends on APIs, a common concern for backend developers. This course dives into mocks and test doubles, essential for backend projects. This course may be useful for backend developers because it emphasizes the practical application of Test Driven Development and showcases how to write effective tests, which can help a backend developer write more reliable code.

See salaries and explore the career path for Backend Developer

Frontend Developer

A frontend developer builds the user interface of applications. This course directly addresses how to use Test Driven Development with user interfaces, a skill crucial for a frontend developer. The course uses practical examples, and covers testing code that interacts with APIs, a common task for frontend development. By understanding the principles and practices of Test Driven Development covered in this course, a frontend developer can create more robust and reliable user interfaces, gaining skills to test code that depends on APIs and how to keep control of test code. This course may be helpful in that respect.

See salaries and explore the career path for Frontend Developer

Quality Assurance Engineer

A quality assurance engineer is responsible for ensuring the quality of software products. This course is a good fit because it focuses on Test Driven Development, a methodology that can help a quality assurance engineer implement effective test automation. The course covers how to determine what to test ensuring the tests will be valuable. This course teaches how to avoid common testing pitfalls, ensuring that the right things are being tested. This course may be helpful because it emphasizes the practical aspects of testing.

See salaries and explore the career path for Quality Assurance Engineer

Automation Engineer

An automation engineer focuses on automating software testing and deployment processes. This course will help an automation engineer by demonstrating how to integrate test automation into a workflow. The course covers techniques such as mocks and test doubles, important for creating effective automated tests. An automation engineer needs to understand the entire test cycle. This course may be useful because it emphasizes practical skills that are useful in their role, such as writing specific kinds of tests that add value to the development cycle.

See salaries and explore the career path for Automation Engineer

DevOps Engineer

A DevOps engineer works on automating and streamlining software development processes, including testing. This course can be valuable for a DevOps engineer because it emphasizes integrating tests into the software development workflow. By focusing on real-world Test Driven Development, the course helps DevOps engineers understand how to implement test automation effectively. The course touches on code coverage, and testing with APIs, which are all useful tools for a DevOps engineer to understand and implement.

See salaries and explore the career path for DevOps Engineer

Technical Lead

A technical lead guides a development team and makes technical decisions. A technical lead benefits from understanding how to use Test Driven Development to manage and maintain code quality. This course covers the complete test cycle, from setting up tests to using mocks and test doubles. It teaches how to avoid common testing pitfalls, which is valuable for guiding a team. This course may be helpful to understand how to write effective tests and how these tests add real value to the development as a whole.

See salaries and explore the career path for Technical Lead

Software Architect

A software architect designs the structure of software systems. This course may be useful for a software architect since it provides insight into how to build testable software. The course shows how to use techniques like mocks and test doubles, which will lead to software that's easier to maintain. The practical examples in the course can help a software architect to make informed decisions about design patterns that improve testing. This course covers the entire test cycle, including managing test code. This would give a software architect a better understanding of how to implement effective testing strategies.

See salaries and explore the career path for Software Architect

Data Engineer

A data engineer builds and maintains data pipelines and infrastructure. While this course is not directly focused on data engineering, it introduces key practices around ensuring code quality with Test Driven Development. A data engineer can use the principles of testing to validate their pipelines and transformations are correct. The focus on code coverage and testing APIs is relevant to data engineering workflows. This course may be helpful as it emphasizes the value of effective testing and provides practical ways to approach test automation, which translates to data engineers.

See salaries and explore the career path for Data Engineer

Technical Consultant

A technical consultant advises clients on technology solutions. This course may be beneficial for a technical consultant who needs to understand the testing process. By using the practical approach to Test Driven Development, as taught in this course, a technical consultant can better understand test automation. The course covers the test cycle, including mocks and test doubles, which is useful for understanding the practical aspects of software development. This course may be helpful as the consultant can make more informed recommendations to clients.

See salaries and explore the career path for Technical Consultant

Project Manager

A project manager oversees software development projects. This course may be useful for a project manager who wants to understand the principles of Test Driven Development, a key aspect of software quality. The course will help a project manager in that they will learn how testing fits into the development workflow. The course covers the test cycle, and how to avoid common testing pitfalls, which are useful for project planning and management. This course may be helpful as the project manager needs to understand what their developers are doing and why.

See salaries and explore the career path for Project Manager

Solutions Architect

A solutions architect designs specific solutions to business problems. This course may be useful for a solutions architect because it emphasizes how to build testable and robust software. The course covers writing effective tests and how the tests add value. It also discusses techniques like mocks and test doubles, which help improve modularity and testability. This course may be helpful as it shows how testing can lead to higher quality software, which is essential when creating large systems.

See salaries and explore the career path for Solutions Architect

Engineering Manager

An engineering manager leads and manages engineering teams. This course may be useful as Test Driven Development is a key practice for software development. By understanding how to apply Test Driven Development covered in this course, an engineering manager can provide better guidance to their team. The course covers how to write effective tests, and how to avoid common testing pitfalls. This may be helpful as these techniques are helpful in assuring that a team is building high quality software.

See salaries and explore the career path for Engineering Manager

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Easy Test Driven Development with TypeScript and Vitest.

Test Driven Development

Save

Classic guide to TDD, providing numerous practical examples. It offers a deeper understanding of the TDD cycle and its benefits. It is commonly used as a reference by industry professionals. Reading this book will provide a solid foundation and expand on the concepts introduced in the course.

Test Driven Development: By Example

Paperback

Test-driven development (Korean Edition)

Paperback

$$$

Easy Test Driven Development with TypeScript and Vitest

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses