In this specific instance of my Vue app, I have globally loaded lodash as a Vue plugin in the main.js file:
import _ from "lodash"
export default function install(Vue) {
Vue.prototype._ = _
Vue.mixin({
computed: {
_: () => _
}
})
}Now, I encountered an issue when trying to shallowMount the parent component of a child element that uses a lodash function. The test failed with the following error message:
ReferenceError: _ is not defined
270 | },
> 272 | debouncedSearch: _.debounce(
| ^
273 | function (value) {
274 | this.currentQuery = value
275 | if (!_.isEmpty(this.currentQuery)) {Any insights on what could be missing here?
Solution:
Further investigation led me to import debounce using
import debounce from "lodash/debounce"_.debounce() with just debounce. After making these changes, the issue was resolved.