Why unit tests? Unit tests solve the smallest area of the problem and can be time-consuming, but critical to development. Unit tests can take longer to write than they do to develop, and the payoff is often less than the effort. Let’s do it

The first example

//Components.tsx
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'VueComponent'.setup() {
        return () = >(
            <div>Vue Component</div>)}})Copy the code
//components.test.js
import { mount } from "@vue/test-utils";
import comp from './Components.tsx'
describe('component.tsx'.() = > {
    it('Initialize a component'.async() = > {const wrapper = mount(comp);
        expect(wrapper.find('div').text()).toBe('Vue Component'); })})Copy the code

The test unit section above verifies that the text content in div is equal,

Second example

//ConditionalRendering.tsx
import { defineComponent, ref } from 'vue'
export default defineComponent({
    name: 'ConditionalRendering'.setup() {
        const admin = ref(false);
        return () = >(
            <nav>
                <a id="profile" href="/profile">My Profile</a>
                <a v-show={admin} id="admin" href="/admin">Admin</a>
            </nav>)}})Copy the code
//conditionalrendering.test.js
import { mount } from "@vue/test-utils";
import conditionalrendering from './ConditionalRendering.tsx'
describe('conditionalrendering.tsx'.() = > {
    it('rendering profile'.async() = > {const wrapper = mount(conditionalrendering);
        expect(wrapper.find('#profile').text()).toBe('My Profile')
    })
    it('Can render admin'.async() = > {const wrapper = mount(conditionalrendering, {
            data(){
                return {
                    admin: true}}}); expect(wrapper.find('#admin').isVisible()).toBe(true);
    })
    it('Cannot render admin'.async() = > {const wrapper = mount(conditionalrendering);
        expect(wrapper.find('#admin').isVisible()).toBe(false); })})Copy the code

The above test example verifies that the current content is rendered and can be rendered

Write unit test files to verify the logical and business integrity of the components. Depending on the situation, the level of complexity can vary greatly, and each line of code you create is a great accomplishment for you on the team.

New person code farmer one, everybody refuels ！！！！

This paper is based on

  1. “@ vue/test – utils” : “^ 2.0.0 – alpha. 8”,
  2. “Vue” : “^ 3.0.11”,
  3. “Jest” : “^ 25.2.7”,
  4. “Babel – jest” : “^ 25.2.6”,