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.

Featured Partners

Related Videos

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

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

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

Let's get visual - Visual testing in your project

Ramona Schwering

Why I Recommend Svelte to Every New Web Developer31:21

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

petite-vue - Progressively enhancing every application?44:40

petite-vue - Progressively enhancing every application?

Alexander Lichter

Under The Hood Of Vue 3 Reactivity54:44

Under The Hood Of Vue 3 Reactivity

Marc Backes

Web development best practices in 202151:10

Web development best practices in 2021

Laurie Voss

Write tests you love, not hate56:49

Write tests you love, not hate

Jens Happe

Why you must use TDD now!30:55

Why you must use TDD now!

Alex Banul

From learning to earning

Jobs that call for the skills explored in this talk.