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

Copyright Disclaimer:
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.