vuex-orm / plugin-graphql

Vuex ORM persistence plugin to sync the store against a GraphQL API.

Home Page:https://vuex-orm.github.io/plugin-graphql/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Difficulty configuring for Jest tests.

somazx opened this issue · comments

I'm following the instructions here https://vuex-orm.github.io/plugin-graphql/guide/testing.html#unit-testing in an attempt to get jest unit testing for components using the graphql plugin working.

However ...

I keep getting the following error:

fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/unfetch.

For example:
import fetch from 'unfetch';
import { createHttpLink } from 'apollo-link-http';

I've attempted do handle this with the following code:

import VuexORM from "@vuex-orm/core";
import { MyModel } from "@/models";
import VuexORMGraphQL from "@vuex-orm/plugin-graphql";
import CustomAdapter from "./orm_adapter";
import MyComponent from "@/components/MyComponent";
import Vuex from "vuex";
import { shallowMount, createLocalVue } from "@vue/test-utils";
import { setupTestUtils, mock } from "@vuex-orm/plugin-graphql";
import fetch from "unfetch";
import ApolloClient from "apollo-boost";

const database = new VuexORM.Database();

// Register Models to Database.
database.register(MyModel);

const apolloClient = new ApolloClient({ fetch: fetch });

VuexORM.use(VuexORMGraphQL, {
  database,
  url: `/graphql`,
  adapter: new CustomAdapter(),
  client: apolloClient
});

const store = new Vuex.Store({ plugins: [VuexORM.install(database)] });
const localVue = createLocalVue(store);
localVue.use(Vuex);

describe("MyComponent.vue", () => {
  test("is a Vue instance", () => {
    const wrapper = shallowMount(List, localVue);

    setupTestUtils(VuexORMGraphQL);

    mock("fetch")
      .for(MyModel)
      .andReturn([]);

    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

A few questions:

  1. I need to setup the wholte Vuex environment just to make setupTestUtils(VuexORMGraphQL); work, correct?
  2. Where should the setupTestUtils,mock calls be exactly? The documentation doesn't give any context on this.
  3. finally after all this I'm still seeing the fetch is not found globally and no fetcher passed - not sure why.

I was able to address Q3 by using unfetch's global polyfill

import 'unfetch/polyfill'

I was able answer Q1 and Q2 by reviewing your source code related to testing, like the createStore (context) function defined in the /test/support directory.

Q1 Answer is Yes, Q2 Answer is right after the store is created.