CODEWITHSUNDEEP
vue.jsjestjsmockingvuejs3vue-composition-api
Tertiadecima
Tertiadecima

Reputation: 85

Jest test vue 3 - composition api

I have a route simulation test, but the test fails, swears at "Cannot read properties of undefined (reading 'name')". The routes themselves are connected in the route/index.js

It's my test file

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

import Subnav from "@/components/Navigation/Subnav.vue";

describe("Subnav", () => {
  describe("wen user is on job page", () => {
    it("displays job count", () => {
      const $route = {
        name: "jobResults",
      };
      const wrapper = shallowMount(Subnav, {
        global: {
          mocks: {
            $route,
          },
          stubs: {
            FontAwesomeIcon: true,
          },
        },
      });
      const jobCount = wrapper.find("[data-test='job-count']");
      expect(jobCount.exists()).toBe(true);
    });
  });

and my component

<script>
import { computed } from "@vue/runtime-core";
import { useRoute } from "vue-router";

export default {
  name: "Subnav",

  setup() {
    const route = useRoute();

    const onJobResultsPage = computed(() => {
      return route.name === "jobResults";
    });

    return {
      onJobResultsPage,
    };
  },
};
</script>

Upvotes: 1

Views: 771

Answers (1)

Tertiadecima
Tertiadecima

Reputation: 85

need to add some lines

**jest.mock("vue-router");**

describe("when user is on job page", () => {
    it("displays job count", () => {
      **require("vue-router").useRoute.mockReturnValueOnce({
        name: "jobResults",
      });**
     ...
  });

Upvotes: 1

Related Questions