Markus Oberlehner

TDD for Vue.js Developers

Write better code, faster. This TDD strategy for Vue.js decouples your tests from implementation details, enabling you to refactor with total confidence.

TDD for Vue.js Developers
#1about 2 minutes

Why good tests enable confident refactoring and speed

Good automated tests provide fast feedback loops and the confidence to refactor code, ultimately leading to better code written faster.

#2about 11 minutes

Decouple tests from frameworks for flexibility and risk management

Abstracting test logic away from a specific framework like Cypress or Vitest reduces risk and allows you to use the best tool for each scenario.

#3about 10 minutes

Use semantic selectors to avoid implementation details

Replace fragile CSS class selectors with semantic queries like `findByRole` to make tests resilient to styling changes and improve accessibility.

#4about 8 minutes

Create a domain-specific language for readable tests

Abstracting UI interactions into a domain-specific language (DSL) makes tests more understandable for non-technical stakeholders and easier to maintain.

#5about 4 minutes

Write specifications first to improve public API design

Approaching tests as specifications written before the implementation forces you to consider the public API from a user's perspective, leading to better design.

#6about 11 minutes

Live coding a new feature using TDD in Vue.js

A practical demonstration shows how to write failing end-to-end and component tests first, then implement the feature to make them pass.

#7about 4 minutes

Convincing management to invest in test-driven development

Frame TDD not as an overhead cost but as a crucial practice for keeping the long-term cost of change low and maintaining development velocity.

#8about 7 minutes

Organizing test files and handling global state

Structure your test files by domain, with drivers in a separate folder, and use TDD to design components that are less reliant on global state.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The enduring value of freelance development for small businesses
07:26 MIN

The enduring value of freelance development for small businesses

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Building and iterating on an LLM-powered product
05:03 MIN

Building and iterating on an LLM-powered product

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Empathizing with users over chasing engagement metrics
05:24 MIN

Empathizing with users over chasing engagement metrics

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Building a one-time code input with semantic HTML
03:35 MIN

Building a one-time code input with semantic HTML

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
Write tests you love, not hate56:49

Write tests you love, not hate

Jens Happe

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

Why you must use TDD now!30:55

Why you must use TDD now!

Alex Banul

Let's get visual - Visual testing in your project54:23

Let's get visual - Visual testing in your project

Ramona Schwering

Yes, You Need to Unit Test your JavaScript. Here's How.1:00:10

Yes, You Need to Unit Test your JavaScript. Here's How.

James Bender

Why I Recommend Svelte to Every New Web Developer31:21

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

Frontend Performance Testing in practice36:50

Frontend Performance Testing in practice

Jonas Kröger

How to TDD in legacy code45:43

How to TDD in legacy code

Gil Zilberfeld

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
BR
Benjamin Ruschin
What Developers Really Need to Create Great Code Demos
Every developer on earth has, at some point, had another developer to thank for a breakthrough, a success, an aha moment they wouldn’t have had without coming across that blog post, that open-source contribution, that reply on socials or that humble ...
What Developers Really Need to Create Great Code Demos
CH
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take part
Starting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
WeAreDevelopers LIVE days are changing - get ready to take part

From learning to earning

Jobs that call for the skills explored in this talk.