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:
- I need to setup the wholte Vuex environment just to make
setupTestUtils(VuexORMGraphQL);
work, correct? - Where should the
setupTestUtils
,mock
calls be exactly? The documentation doesn't give any context on this. - 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.