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