Writing Good Tests for Vue Applications (e2e vs. Component Tests, Features of a *Good* Test)

Following the expansion of the Vue ecosystem, Vue.js Live Conference has grown from a local Meetup to an international conf. The event will welcome more 5k Vue folks remotely from anywhere in the world. Every participant around the world can access online workshops, fun & networking with stellar Vue people.

Vue.js Live Conference

I'm attending Vue.js Live 2024 – get your free remote ticket and join me there with 5k other Vue.js engineers and 15+ great speakers.

Vue.js London 2023

Markus Oberlehner

No More Mocking! Write Better Tests For Your Nuxt Application With Contract Tests

Vue.js Live 2024

Navigating a Large Scale Modernization With DDD

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2024

Which technology stack to choose? What to do to get rid of legacy applications? And how the heck can we structure our teams to support our efforts? Let's talk about the big problems that can arise during a large-scale modernization effort, offering solutions and preventative measures to ensure a successful migration. We delve into the intricacies of transitioning from a hodgepodge of diverse projects and technologies to a more streamlined architecture. Let's explore leveraging Domain-Driven Design (DDD) to structure teams, their responsibilities, and project boundaries, creating a more efficient and effective tech environment.

Let's explore how to create more resilient software systems employing API-first techniques. By utilizing the contract testing tool Specmatic and the Playwright test runner, we can develop tests that ensure our Nuxt applications work perfectly and communicate correctly with Microservices they rely on to get data. We will take a closer look at how to write OpenAPI specifications that aid us in documenting our APIs and enable us to ensure they work correctly. Furthermore, we can use those specifications to automatically spin up a stub server, which we can use to test our application in a controlled environment with Playwright. The techniques I'll show you will help you write tests that enable you to rapidly iterate without fearing regressions. Learning Outcomes: 1. You know about the basic principles of Contract Testing and how it also helps drive our E2E tests. 2. You know to opt for Contract Testing when working with Microservices and BFFs, database seeding when using Nuxt with a database, and mocking when dealing with SPAs. 3. You know the steps to create your first OpenAPI specification and integrate Specmatic with Playwright or Cypress, and you are keen to apply this technique to your projects.

The emergence of SPAs, and therefore logic-heavy client-side code, drastically changed the game for front-end developers. As a result, for the last couple of years, we have had to catch up with sophisticated techniques to build high-quality applications—one of the essential being testing.More and more people started to add tests to their Vue.js-powered applications. With varying degrees of success. The field is still relatively new, and we all need more experience in how to test client-side applications most effectively.With my talk, I want to walk through 1) how to come up with a solid testing strategy (tools and practices) and 2) work on a real-world example of how we combine E2E testing with component testing.I want to highlight some general principles from testing theory and then go into the practical application—live coding in a TDD manner.