I had a simple Vue component which imports a method from a utils.js file and calls it on a button click. There's also the test for the component which used to setup a spy for the same method and then shallowMount the component and invoke its function. It used to work on babel 6:
index.vue
<template>
...
<button
id="Button"
:class="['foo']"
@click="clickMethod"
/>
...
</template>
<script>
...
import { auxFunc } from '../../../utils'
...
export default {
props: {
...
},
...
methods: {
clickMethod () {
if (auxFunc()) {
// do stuff
} else {
const element = this.$el.querySelector('#IdThatIveOmited')
element.focus()
}
},
},
}
</script>
utils/index.js
...
const auxFunc = () => window.matchMedia('(max-width: someWidth)').matches
...
export {
...
auxFunc,
...
}
index.spec
import * as utils from '../../../utils'
import MyComponent from './index.vue'
import { shallowMount } from '@vue/test-utils'
describe('Component above', () => {
it('should focus on clickMethod', () => {
const auxFunc = jest.spyOn(utils, 'auxFunc')
auxFunc.mockImplementation(() => false)
const wrapper = shallowMount(MyComponent, { propsData: { ...props } })
const spy = jest.spyOn(wrapper.find('#IdThatIveOmited').element, 'focus')
wrapper.find('#Button').trigger('click')
expect(spy).toHaveBeenCalled()
auxFunc.mockRestore()
})
})
After upgrading to babel 7 as a necessity on another part of the project, this test started failing. And while investigating with some console.log(stuff) I noted that the vue component isn't calling the mocked version of auxFunc.
Things I've tried:
Changing how the spy is created in every possible way and how I import each file, as well as using Rewire
const auxFunc = jest.fn().mockImplementation(() => false)
utils.auxFunc = auxFunc
console.log(utils.auxFunc.toString()) // prints original version instead of spy object
And updating every package that I found related
I'm not very proficient with babel configs but here's my .babelrc:
{
"plugins": [
"@babel/plugin-syntax-object-rest-spread",
"babel-plugin-rewire"
],
"presets": [
["@babel/preset-env", { "modules": false }]
],
"env": {
"test": {
"presets": [
["@babel/preset-env", { "targets": { "node": "current" }}]
]
}
}
}
and the package version of what I consider related:
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-object-rest-spread": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^23.4.2",
"babel-plugin-rewire": "1.2.0",
"jest": "^25.5.4",
"vue": "^2.6.11",
"vue-jest": "3.0.3",
"vue-loader": "^15.8.3",
"vue-template-compiler": "^2.6.11",
}
And it's not just here, every other jest.spyOn in my project is being ignored after this.
I feel like it's just some babel configuration I've missed since this used to work before. But I couldn't find anything related in the other questions.