Unable to get jest working with tighten/ziggy route helper on Vue 2.7.14/Laravel 9.52.16

36 views Asked by At

I got a very simple test, but I'm unable to make it work, it constantly says that the route method is not defined.

Here's my test and my last try.

import { createLocalVue, mount } from '@vue/test-utils'
import AdgemButton from '@/Components/Common/AdgemButton.vue';
import TableConfigurationModal from '@/Components/Modal/TableConfigurationModal.vue';
import { ZiggyVue } from 'ziggyvue';
import { Ziggy } from '../../../../resources/js/ziggy';

const localVue = createLocalVue()
localVue.use(ZiggyVue, Ziggy.routes)

test('adgem button is succesfully rendered with clasess', () => {
    const wrapper = mount(TableConfigurationModal, {
        localVue,
    })
  
    expect(wrapper.text()).toContain('Hello world')
})

Here's my jest.config.js:

// jest.config.js
module.exports = {
    "roots": [
        "<rootDir>/tests/Vue"
    ],
    "transform": {
        "^.+\\.js$": "babel-jest",
        "^.+\\.vue$": "vue-jest"
    },
    "moduleNameMapper": {
        "^@/(.*)$": "<rootDir>/resources/js/$1",
        "axios": "axios/dist/node/axios.cjs",
        "^ziggyvue$": "<rootDir>/vendor/tightenco/ziggy/dist/vue",
    },
    "moduleFileExtensions": [ 'js', 'json', 'vue' ],
    "setupFilesAfterEnv": [
        "<rootDir>tests/Vue/setup.js"
    ],
    "testEnvironment": "jsdom",
}

And here's the trace of the error:

ReferenceError: route is not defined

  130 |             this.selectedFields = res.data.selectedFields
  131 |                 ? Object.keys(res.data.selectedFields).reduce((acc, key) => {
> 132 |                     acc[key] = { label: res.data.selectedFields[key], selected: false };
      |                       ^
  133 |                     return acc;
  134 |                 }, {})
  135 |                 : {};

  at VueComponent.mounted (resources/js/Components/Modal/TableConfigurationModal.vue:132:23)
  at invokeWithErrorHandling (node_modules/vue/dist/vue.runtime.common.dev.js:2919:61)
  at callHook$1 (node_modules/vue/dist/vue.runtime.common.dev.js:3983:13)
  at Object.insert (node_modules/vue/dist/vue.runtime.common.dev.js:4369:13)
  at invokeInsertHook (node_modules/vue/dist/vue.runtime.common.dev.js:6864:36)
  at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:7073:9)
  at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3718:25)
  at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3828:16)
  at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:3400:33)
  at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:3390:51)
  at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3845:5)
  at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8687:12)
  at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:14067:21)
  at Object.<anonymous> (tests/Vue/Components/Common/AdgemButton.test.js:11:26)
  at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
  at runJest (node_modules/@jest/core/build/runJest.js:404:19)
  at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
  at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

0

There are 0 answers