Integration test a Vue component with vue-testing-library

Counter.spec.js

import { render, Simulate } from "vue-testing-library";
import Counter from "@/components/Counter.vue";

describe("Counter.vue", () => {
  it("increments by 1 on click", () => {
    const { getByTestId, getByText } = render(Counter);
    Simulate.click(getByText("Increments"));
    expect(getByTestId("count").textContent).toBe("1");
  });

  it("decrements by 1 on click", () => {
    const { getByTestId, getByText } = render(Counter);
    Simulate.click(getByText("Decrements"));
    expect(getByTestId("count").textContent).toBe("-1");
  });

  it("increments by multiplier", () => {
    const { getByTestId, getByText } = render(Counter, { props: { multiplier: 4 } });
    Simulate.click(getByText("Increments"));
    expect(getByTestId("count").textContent).toBe("4");
  });

  it("decrements by multiplier", () => {
    const { getByTestId, getByText } = render(Counter, { props: { multiplier: 4 } });
    Simulate.click(getByText("Decrements"));
    expect(getByTestId("count").textContent).toBe("-4");
  });

  it("resets to 0", () => {
    const { getByTestId, getByText } = render(Counter);
    Simulate.click(getByText("Reset"));
    expect(getByTestId("count").textContent).toBe("0");
  });
});

jest.config.js

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
    "^.+\\.jsx?$": "babel-jest"
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))",
    "<rootDir>/tests/integration/**/*.spec.(js|jsx|ts|tsx)"
  ]
};