Jest "spyOn" not working after upgrading babel 7

Viewed 289

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.

0 Answers
Related