Vue.js 3 for Beginners: Learn the Essentials of Vue.js 3 and Its Ecosystem to Build Modern Web Applications by Simone Cuomo
Author:Simone Cuomo [Cuomo, Simone]
Language: eng
Format: epub
Tags: Computers, Web, General, Internet, Web Services & APIs, Languages, JavaScript
ISBN: 9781805123293
Google: N-gWEQAAQBAJ
Publisher: Packt Publishing Ltd
Published: 2024-09-06T03:27:00.464776+00:00
Figure 8.4: The terminal output of Vitest
The test results follow the same nested structure that we defined in our test. The words used within the describe and it methods form a readable word. If an error is triggered locally or in any deployment environment, the log will display the file name, followed by the different words we used to declare our test. In our case it would be TheButton.vue when mounted renders properly.
Vitest is fast â very fast
In the previous section, we mentioned that unit tests are fast, but we have not mentioned that among all unit test frameworks, Vitest is the fastest of all unit test frameworks. Its speed is to be attributed to the Vite server on which Vitest is built.
Our first test has not tested anything yet, as it has an empty body. Letâs go back and see how we can test our component. To complete this task, we will use the mount method offered by Vue Test Utils and the expect method, used to tell the Unit Test engine what we want to test.
The mount method is used to initialize a component by rendering it within the test framework, while expect is used to define our test cases.
In every test, we start by setting out our component and any state that this may require. In our case, we just need to mount it:
const wrapper = mount(component, {});
Next, we will assert that our component rendered successfully by checking whether it includes a button element:
expect(wrapper.html()).toContain('button');
The expect method accepts the value being tested as its argument and is then chained to the test performed on the given value. Vitest comes with a huge list of assertions.
For example, if we wanted to create a test that checks if two number are equals, we would do the following:
const numberFive = 5; expect(numberFive).toEqual(5);
The full test file should look like this:
import { expect, describe, it } from 'vitest' import component from '../atoms/TheButton.vue' import {mount} from "@vue/test-utils"; describe('TheButton.vue', () => { describe('when mounted', () => { it('renders properly', () => { const wrapper = mount(component, {}); expect(wrapper.html()).toContain('button'); }); }); });
So, to recap, we learned that tests follow a very structured approach. They require us to define what we are testing, and the scenario and assertion that we are considering.
Letâs add another test that would create the following test sentence: âGiven TheButton.vue, when it is mounted, then it defaults to the light theme.â
As you can see from the first two parts of the sentence, Given and When are the same, so this means that we can reuse the existing code blocks and just add another test.
To check whether the correct theme is applied, we will check whether the CSS class light has been applied to the component.
import { expect, describe, it } from 'vitest' import component from '../atoms/TheButton.vue' import {mount} from "@vue/test-utils"; describe('TheButton.vue', () => { describe('when mounted', () => { it('renders properly', () => { const wrapper = mount(component, {}); expect(wrapper.html()).toContain('button'); }); it('defaults to light theme', () => { const wrapper = mount(component, {}); expect(wrapper.
Download
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
ActiveX | ASP.NET |
Cold Fusion | CSS |
DHTML | Java Server Pages |
JavaScript | PHP |
Python | Ruby |
XSL |
Hello! Python by Anthony Briggs(9904)
The Mikado Method by Ola Ellnestam Daniel Brolund(9769)
Dependency Injection in .NET by Mark Seemann(9329)
Sass and Compass in Action by Wynn Netherland Nathan Weizenbaum Chris Eppstein Brandon Mathis(7771)
The Well-Grounded Java Developer by Benjamin J. Evans Martijn Verburg(7550)
Svelte with Test-Driven Development by Daniel Irvine(7088)
Test-Driven Development with PHP 8 by Rainier Sarabia(6817)
Layered Design for Ruby on Rails Applications by Dementyev Vladimir;(6684)
Secrets of the JavaScript Ninja by John Resig & Bear Bibeault(6530)
Secrets of the JavaScript Ninja by John Resig Bear Bibeault(6399)
Web Development with Django by Ben Shaw Saurabh Badhwar(6150)
React Application Architecture for Production by Alan Alickovic(5870)
Jquery UI in Action : Master the concepts Of Jquery UI: A Step By Step Approach by ANMOL GOYAL(5802)
Kotlin in Action by Dmitry Jemerov(5048)
Audition by Ryu Murakami(4583)
Software Architecture for Web Developers by Mihaela Roxana Ghidersa(4411)
Hands-On Full-Stack Web Development with GraphQL and React by Sebastian Grebe(4313)
Accelerating Server-Side Development with Fastify by Manuel Spigolon Maksim Sinik & Matteo Collina(4264)
Functional Programming in JavaScript by Mantyla Dan(4037)
