Weekly Vue News

By Michael Hoffmann (Mokkapps)

Weekly Vue.js News - #55 - Test components using Vue Testing Library

#55・
358

subscribers

61

issues

Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that Weekly Vue News will receive your email address.

Michael Hoffmann (Mokkapps)
Michael Hoffmann (Mokkapps)
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
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
Quote of the Week
Did you enjoy this issue? Yes No
Michael Hoffmann (Mokkapps)
Michael Hoffmann (Mokkapps) @mokkapps

Hi 👋

My name is Michael Hoffmann and I'm a Senior Frontend Developer, Freelancer and Blogger.

I focus on Vue.js, JavaScript, TypeScript and Spring Boot. Occasionally I also give career & freelancer advice.

My weekly emails reflect this preference.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Holzapfelkreuther Straße 19, 81375 Munich, Germany