Pass mocks object to global config

[lmiller1990]

Hi,

I have a feature request/idea.

I work in a non English speaking country, so we are using vue-i18n to create a bilingual app. It adds a global $t function. I have to do:

mocks: {
  $t: jest.fn()
}

in every test, or the test fails with $t is undefined, since almost all components have some form of text.

Should this be something handled by a test running? Not sure - if not, maybe we can have some way to set some default options for all tests, or all shallow renders or something.

[eddyerburgh]

We already have a global config to add stubs.

I think it would be useful for people to have a global config for mocks too. The local mounting options would overwrite the mocks set in the config if they clash.

Would you like to make a PR to implement this?

[lmiller1990]

I would like to make it! Do you have a good place I can look to get started?

Sorry the slow reply.

Edit: got something working using a similar way to config stubs. But it would be nice to have a config file (.js) we could load options from?

[eddyerburgh]

Do you want to make a PR with the original way, using the config object.

We should start another discussion about whether to support a config file or not.

[lmiller1990]

It seems like you can do the same thing at stubs in the current master, simply mocks['myMock'] = jest.fn() for example.

Maybe we should discuss a config file first before going any further.

[dobromir-hristov]

Exact same issue as @lmiller1990. Also things like ElementUI's $alert,$confirm or own global helpers we have can be easily mocked everywhere :)

[abhipanda]

Yes please - big problem :(

[lmiller1990]

A simple work around you can use in the meantime, before we solve the global config problem, is to make a helper with all your commonly used mocks, for example:

// Let's call it mocks.js
import { shallow } from '@vue/test-utils'

const mocks = {
  $t: () => {} // I always mock vuei18n
}

const shallowWithMocks = (component, otherData, otherMocks) => shallow(component, { 
  mocks: {
    ..mocks, ...otherMocks
  },
  ...otherData 
})

export shallowWithMocks

import { shallowWithMocks } from './mocks.js'

const wrapper = shallowWithMocks(component, { 
  propsData: { /* */ }
})

Note: I didn't test this, but I have something similar in a project somewhere. It probably has some typos.

---

I still think a config file would be good. I'd like to work on it, but not sure where to start. Maybe we can start by fleshing out an API? I'm thinking something along the lines of a test-utils.config.js that could be something like this:

export default {
  mocks: {
    // mocks to use in all tests
    // they should be merged with any mocks passed in `shallow` or `mount`
    // the ones from `shallow`, `mount` should take priority and override the ones in this config file
  },
  stubs: {
    /* I often find myself wanting to stub certain components a lot as well */
  }
}

You should be able to provide defaults for anything you can pass in the options object to shallow and mount.

vue-test-utils shouls look for a default config file in the root directory (for example test-utils.config.js.

I'd like to hear thoughts of everyone else too before starting hacking.

[eddyerburgh]

I believe there are two issues here:

1. Ability to add mocks to global mocks object (like VueTestUtils.config.stubs
2. Support a config file

I think we can go ahead and add mocks to the existing config object. We can create a separate issue for adding a config file.

@lmiller1990 would you like to create a PR that adds the ability to pass mocks to the config object?

[lmiller1990]

@eddyerburgh Sure. I'll look at the existing way we do it with stubs and mimic that.

Good idea, we should make another issue for config. I can do that this evening, and add a summary of the discussion in here.

[iztsv]

➕ for separated js config file

[lmiller1990]

Here is issue for discussion around a separate config file: #523