Write better code, faster. This TDD strategy for Vue.js decouples your tests from implementation details, enabling you to refactor with total confidence.
#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.
The HTML Elements That You’re Probably Over-EngineeringAs 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...
What Developers Really Need to Create Great Code DemosEvery 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 ...