The require.context method in Webpack cannot be found in Jest
recently did unit testing of Vue components for the new version of the framework. Jest, was selected but there was a problem testing a component.
was supposed to test the Login component, but this Login component introduces the SvgIcon subcomponent, which uses Webpack"s require.context method to bring in all svg resources, as follows:
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context("@/assets/svg-icons", false, /\.svg$/)
requireAll(req)
when Jest tests here, an error message appears:
how can I solve this problem? Or how to Mock this method?
has been solved, there are no questions and answers on SegmentDefault, and the answers on StockOverflow are very obscure. After further study of require.context, I found that this function is used to reference resources, but the timing of my reference will not be written outside the declaration cycle. Here is the original code:
<script type='text/ecmascript-6'>
// svg
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('../../assets/svg-icons', false, /\.svg$/)
requireAll(req)
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String
}
},
...
after the change, it looks like this:
export default {
...
created () {
this.requireSvgs()
},
methods: {
//
requireSvgs () {
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('../../assets/svg-icons', false, /\.svg$/)
requireAll(req)
}
}
}
write this way, you can pass the test
import Vue from 'vue'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import ElementUI from 'element-ui'
import Vuex from 'vuex'
import SvgIcon from '@/components/base/SvgIcon'
import Login from '@/components/Login'
Vue.use(ElementUI)
Vue.component('svg-icon', SvgIcon)
// Vue
const localVue = createLocalVue()
localVue.use(Vuex)
describe('Login', () => {
let wrapper
beforeEach(() => {
wrapper = shallowMount(Login, {
localVue
})
})
afterEach(() => {
wrapper.destroy()
})
test('LoginVue', () => {
expect(wrapper.isVueInstance()).toBeTruthy()
})
})
record here for reference to friends in need.
Note: the code was modified the next day to remove the code referenced by svg resources from the SvgIcon component to simplify the SvgIcon component, which is only used to render the icon icon, which is also conducive to the later testing of this component, and the introduction of resource code is transplanted to main.js.
jest only goes babel (babel-jest), not webpack, so there's nothing you can do about it. The only way is to replace the code
https://stackoverflow.com/que. where there is a mock method
you can use babel-plugin-require-context-hook, https://www.npmjs.com/package.
