Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Difficulty configuring for Jest tests. #130

Closed
somazx opened this issue Oct 23, 2019 · 1 comment
Closed

Difficulty configuring for Jest tests. #130

somazx opened this issue Oct 23, 2019 · 1 comment

Comments

@somazx
Copy link

somazx commented Oct 23, 2019

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.
@somazx
Copy link
Author

somazx commented Oct 29, 2019

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.

@somazx somazx closed this as completed Oct 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant