Breaking News: Grepper is joining You.com. Read the official announcement!

How to test a Vue component with shallow rendering

Sumit Rawal answered on May 14, 2023 Popularity 1/10 Helpfulness 1/10

answer How to test a Vue component with shallow rendering

How to test a Vue component with shallow rendering

Comment

import { shallowMount } from "@vue/test-utils";
import App from "../src/App";

describe("App.test.js", () => {
  let cmp;

  beforeEach(() => {
    cmp = shallowMount(App, {
      // Create a shallow instance of the component
      data: {
        messages: ["Cat"]
      }
    });
  });

  it('equals messages to ["Cat"]', () => {
    // Within cmp.vm, we can access all Vue instance methods
    expect(cmp.vm.messages).toEqual(["Cat"]);
  });

  it("has the expected html structure", () => {
    expect(cmp.element).toMatchSnapshot();
  });
});

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: learningdaily.dev

Tags: javascript rendering vue-component

Link to this answer
Share Copy Link