Automatically mock require.context when VUE_CLI_BABEL_TRANSPILE_MODULES is true

[jardimfelipe]

I used yarn new module command to create a new vuex module to test my app. However, I stumbled in the following error:

src/state/modules/team.unit.js
  ● Test suite failed to run

    TypeError: require.context is not a function

      11 |   // Allow us to dynamically require all Vuex module files.
      12 |   // https://webpack.js.org/guides/dependency-management/#require-context
    > 13 |   const requireModule = require.context(
         |                                 ^
      14 |     // Search for files in the current directory.
      15 |     '.',
      16 |     // Search for files in subdirectories.

      at updateModules (src/state/modules/index.js:13:33)
      at Object.<anonymous> (src/state/modules/index.js:10:2)
      at Object.<anonymous> (src/utils/dispatch-action-for-all-modules.js:1:1)
      at Object.<anonymous> (src/state/store.js:3:1)
      at Object.<anonymous> (src/main.js:4:1)
      at Object.<anonymous> (src/services/api-instance.js:2:1)
      at Object.<anonymous> (src/services/team.js:2:1)
      at Object.<anonymous> (src/state/modules/team.js:1:1)
      at Object.<anonymous> (src/state/modules/team.unit.js:1:1)

This error occurs on every vuex module file.

Bellow, this is an example of a vuex module:

import { GetTeamList } from '@src/services/team'
export const state = {
    teamList: [],
}

export const getters = {
    totalList({ state }) {
        return state.teamList.totalItemCount
    },
}

export const mutations = {
    SET_LIST(state, newList) {
        state.teamList = newList
    },
}

export const actions = {
    async fetchList() {
        const resp = await GetTeamList()
        console.log(resp)
    },
}

And this is its test:

import * as teamModule from './team'

describe('@state/modules/team', () => {
  it('exports a valid Vuex module', () => {
    expect(teamModule).toBeAVuexModule()
  })
})

This error doesn't occurs on newly created module using yarn new modules so I'm probably doing something wrong. If anybody have any clues in this matter, I would be very grateful

[EgorFront]

As far as I understand, the problem is that Jest is not able to use dynamic imports (this is a feature of webpack)
The solution is to mock require.context
or u can polyfill it, see here

[chrisvfritz]

As @EgorFront mentioned, there are a number of solutions. My preferred solution has usually been to isolate the require.context call in a file that can be mocked, but I'm thinking about possibly building in an automatic workaround to the problem - the issue is none of the ones I know of are really ideal, so I'll probably have build in something custom.

[satyamqainfotech]

Adding a babel-plugin-transform-require-context plugin to .babelrc helps me solve the issue.

https://www.npmjs.com/package/babel-plugin-transform-require-context

Just add into .babelrc for test env and it will fix the issue

{ "env": { "test": { "plugins": ["transform-require-context"] } } }

[beamsies]

@satyamqainfotech

Adding a babel-plugin-transform-require-context plugin to .babelrc helps me solve the issue.

https://www.npmjs.com/package/babel-plugin-transform-require-context

Just add into .babelrc for test env and it will fix the issue

{ "env": { "test": { "plugins": ["transform-require-context"] } } }

Is this all you did? Because I can't get this to work.

Also, I'm new to Jest and not sure how to mock this if that is what I have to do.

tHanks.

[satyamqainfotech]

@satyamqainfotech

Adding a babel-plugin-transform-require-context plugin to .babelrc helps me solve the issue.
https://www.npmjs.com/package/babel-plugin-transform-require-context
Just add into .babelrc for test env and it will fix the issue
{ "env": { "test": { "plugins": ["transform-require-context"] } } }

Is this all you did? Because I can't get this to work.

Also, I'm new to Jest and not sure how to mock this if that is what I have to do.

tHanks.

Hey @beamsies - See this answer: https://stackoverflow.com/a/61137440/7358308, also you can look at other answers and try it out

[boydaihungst]

I used this package to fix this problem: https://www.npmjs.com/package/require-context.macro

[bencodezen]

Sorry for the delay in responding to this. I let the project lapse and am in the process of currently updating it to Vue 3 standards.

In order to clean up issues, I'll be closing this issue at this time, but if you still have issues with the new boilerplate or have questions, please don't hesitate to open another issue.