Weekly Vue.js News - #55 - Test components using Vue Testing Library
Hi 👋
Busy times for me, as we started planning our house 🏡
I also started working on a new side project. It's a tool to create code snippets because the existing solutions are either too expensive or do not satisfy my needs.
In this issue, I will explain why you should use the Vue Testing Library. Additionally, you get curated articles about Vue and web development.
Have a great week ☀️
Vue Tip: Test components using Vue Testing Library
Vue Testing Library is my preferred Vue.js testing library. It is built on top of @vue/test-utils, the official testing library for Vue.
If we write tests for our Vue components, we want them to be maintainable. Therefore, our tests should not include implementation details of our components.
The primary guiding principle of Vue Testing Library is:
The more your tests resemble the way your software is used, the more confidence they can give you.
So rather than dealing with instances of rendered Vue components, the tests will work with actual DOM nodes. The library provides methods to query the DOM the same way the user would. Users are looking for specific text or a button to click. They don't look for the nth child of a div with the class .button-container.
Let's take a look at a simple example:
This test does not contain any implementation details of our Button component, so it's unlikely to break even under heavy refactoring.
The byText query could be replaced by a more suitable query like getByRole, see Which query should I use?.
Installing jest-dom adds some useful assertions like .toBeInTheDocument(). In our example, we could then change the assertion to expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument().
Curated Vue Content
📕 The 101 guide to Script Setup in Vue 3
👉🏻 This article by Anthony Konstantinidis covers all of the things you need to know to get started with script setup in Vue 3.
📕 Nuxt 3 State Management: Pinia vs useState
👉🏻 "Pinia is what you get if you keep adding more and more features to useState. More complex apps will benefit from the extra features in Pinia, but useState is better for small and simple apps."
📕 Validating Your Vue Props Like a Pro
👉🏻 Vue requires users to declare any data passed to a component as props explicitly.
👉🏻 Fotis explores how that can help to reduce bugs and increase our confidence during development and debugging.
👉🏻 4 hour stream on Nuxt 3 with Daniel Roe and Ryan Carniato
👉🏻 They discuss SSR, performance, deployment and more while building a Hackernews clone.
🛠️ Most complete Vue 3 datepicker
👉🏻 Custom Input Design
👉🏻 Time select option
👉🏻 Scoped slots for handling every scenario
JavaScript Tip: Scroll to element with smooth animation
The Element interface's scrollIntoView() method scrolls the element's ancestor containers such that the element on which scrollIntoView() is called is visible to the user:
We can add a smooth behavior option to get a nice smooth scroll animation.
The element may not be scrolled completely to the top or bottom depending on the layout of other elements.
Curated Web Development Content
📕 How TypeScript Conditional Types Work
👉🏻 Conditional types in TypeScript let us check if a type conforms to a certain condition, and return types based on that.
📕 Learning Patterns: Modern Web App Design Patterns
👉🏻 A free book.
👉🏻 Learn about lots of fundamentals, from how different styles of rendering or importing resources work to performance optimizations and case studies.
📕 Why DRY is the most over-rated programming principle
👉🏻 How people abuse the DRY concept and then don't understand why the code base is so complex.
👉🏻 It's literally fireworks on your web page.
👉🏻 The homepage has a neat demo where you can dynamically play around with all of the library’s parameters.
Quote of the Week
