tighten / ziggy

Use your Laravel routes in JavaScript.
MIT License
3.91k stars 248 forks source link

Unable to get jest working with route on Vue 2.7.14 #681

Closed danielsballes closed 1 year ago

danielsballes commented 1 year ago

Ziggy version

1.6.2

Laravel version

9.52.16

Description

Hi, I got a very simple test, but I'm unable to make it work, it constantly says that the route method is not defined. I tried some fixes from past issues posted on this repo, but nothing seems to work for me.

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:

Details

adgem button is succesfully rendered with clasess 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..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. (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)

Ziggy call and context

Jest tests are failing on the route helper.

Ziggy configuration

Not able to print this info

Route definition

Not a route issue