Unable to get jest working with route

[jamesh-purr]

Ziggy version

1.3.1

Laravel version

8.65

Description

I don't seem to be able to get the route helper to work in any with jest. I have tried numerous and various ways of trying to achieve the route helper to work but have been unsuccessful

I have tried using this as a "guide" on how to get the rout help in jest but just doesn't work. https://github.com/tighten/ziggy/issues/264

I have tried using global mixins in jest - https://test-utils.vuejs.org/api/#global . To which again I haven't been able to resolve the error(below)

TypeError: _ctx.route is not a function

If you could maybe guide me to something that explains how to achieve the route helper in the jest tests?

import SidebarNavigation from '../../../resources/js/Components/SidebarNavigation/SidebarNavigation.vue';
import sidebarNavigationLinks from '../../../resources/js/Helpers/SidebarNavigationLinks';
import { mount } from '@vue/test-utils';
import route from '../../../vendor/tightenco/ziggy/dist';

describe('SidebarNavigation.vue', () => {
    const wrapper = mount(SidebarNavigation, {
        global: {
            mixins: [route],
        }
    })
    test('links are mounting', async () => {
        await wrapper.setData({ sidebarNavigationLinks })
    })
});

This is just one example I have tried but with no luck. I have undone and redone the code so many times that I don't have any more examples I have tried.

I would greatly appreciate the help if you could please? I am using laravel breeze with inertia.

Ziggy call and context

Jest tests and failing on the route helper.

Ziggy configuration

No able to print this.

Route definition

Its not a route issue.

[bakerkretzmar]

I think you'll have to do at least 2 things to get this working:

• Make sure the route function is being included/mixed in correctly. In your example above you're passing Ziggy's route() function to the component as if it's a Vue mixin, but it's not. You could either do mixins: { route: route } or import and use the Vue plugin that Ziggy provides.
• Provide a configuration object with all your routes. If you already have a generated ziggy.js file somewhere, import it and pass it in when you're setting up the mixin or plugin. If you're just using the @routes Blade directive, you will have to use the php artisan ziggy:generate command to generate a file containing all your routes and configuration, import that in your tests too, and pass it to Ziggy. If you don't want to keep this file up to date you could build your own stub config object inside your tests.

Let me know if that works, and if it doesn't please include the entire output of any error messages or logs you see so that we can help debug.

[Tofandel]

@bakerkretzmar The mixin is mixins: { methods: { route } } but then you need to declare a global with your routes list

Why not just use localVue and install the vue plugin on localVue

But in any case you'll need to use the php artisan ziggy:generate command if you want to use your routes in jest

import SidebarNavigation from '../../../resources/js/Components/SidebarNavigation/SidebarNavigation.vue';
import sidebarNavigationLinks from '../../../resources/js/Helpers/SidebarNavigationLinks';
import { createLocalVue, mount } from '@vue/test-utils';
import {ZiggyVue} from '../../../vendor/tightenco/ziggy/dist/vue';
import routes from '../../../resources/js/ziggy.js';

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

describe('SidebarNavigation.vue', () => {
    const wrapper = mount(SidebarNavigation, { localVue ))
    test('links are mounting', async () => {
        await wrapper.setData({ sidebarNavigationLinks })
    })
});

This is a pretty basic way to setup your test environnement with plugins and doesn't have much to do with ziggy

You should use the same in your app setup which is in the documentation in the vue section

[jamesh-purr]

Hey

I really appreciate you trying to help. I am not sure where I am going wrong. This is my first time using jest with vue and I am having a nightmare with this.

import SidebarNavigation from '../../../resources/js/Components/SidebarNavigation/SidebarNavigation.vue';
import sidebarNavigationLinks from '../../../resources/js/Helpers/SidebarNavigationLinks';
import { mount } from '@vue/test-utils';
import route  from '../../../vendor/tightenco/ziggy/dist/index';
import {Ziggy} from '../../../resources/js/ziggy'

describe('SidebarNavigation.vue', () => {
    const wrapper = mount(SidebarNavigation, {
        global: {
            plugin: [[route, Ziggy]]
        }
    })
    test('links are mounting', async () => {
        await wrapper.setData({ sidebarNavigationLinks })
    })
});

I have tried what you suggested by using it via plugin and passing the routes in and I still get the same error that route is not defined. I also tried using dist/vue and ZiggyVue as the plugin and the error is the same.

TypeError: _ctx.route is not a function

      78 |
      79 | <script>
    > 80 | import { Link } from '@inertiajs/inertia-vue3';
         |                ^
      81 | import sidebarNavigationLinks from '../../Helpers/SidebarNavigationLinks';
      82 |
      83 | export default {

Any more help would be greatly appreciated.

[jamesh-purr]

@bakerkretzmar The mixin is mixins: { methods: { route } } but then you need to declare a global with your routes list

Why not just use localVue and install the vue plugin on localVue

But in any case you'll need to use the php artisan ziggy:generate command if you want to use your routes in jest

import SidebarNavigation from '../../../resources/js/Components/SidebarNavigation/SidebarNavigation.vue';
import sidebarNavigationLinks from '../../../resources/js/Helpers/SidebarNavigationLinks';
import { createLocalVue, mount } from '@vue/test-utils';
import {ZiggyVue} from '../../../vendor/tightenco/ziggy/dist/vue';
import routes from '../../../resources/js/ziggy.js';

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

describe('SidebarNavigation.vue', () => {
    const wrapper = mount(SidebarNavigation, { localVue ))
    test('links are mounting', async () => {
        await wrapper.setData({ sidebarNavigationLinks })
    })
});

This is a pretty basic way to setup your test environnement with plugins and doesn't have much to do with ziggy

You should use the same in your app setup which is in the documentation in the vue section

Thanks for trying to help out :) Vue 3 doesn't use local vue app in the test utils.

[Tofandel]

@jamesh-purr Indeed but you didn't say which version you were using 😉

Your code Is the correct way to install the plugin in vue3 tests, except you are missing an s in plugin

const wrapper = mount(SidebarNavigation, {
    global: {
        plugins: [[route, Ziggy]]
    }
})

[jamesh-purr]

@jamesh-purr Indeed but you didn't say which version you were using 😉

Your code Is the correct way to install the plugin in vue3 tests, except you are missing an s in plugin

const wrapper = mount(SidebarNavigation, {
    global: {
        plugins: [[route, Ziggy]]
    }
})

Thanks for helping out :) and good catch with the typo. That did help however I did need to make a change to my code. This is the final test that got jest working correctly with the route help :)

import SidebarNavigation from '../../../resources/js/Components/SidebarNavigation/SidebarNavigation.vue';
import sidebarNavigationLinks from '../../../resources/js/Helpers/SidebarNavigationLinks';
import { mount } from '@vue/test-utils';
import { ZiggyVue }  from 'ziggy-js/dist/vue'
import {Ziggy} from '../../../resources/js/ziggy'

describe('SidebarNavigation.vue', () => {
    const wrapper = mount(SidebarNavigation, {
        global: {
            plugins: [[ZiggyVue, Ziggy]]
        }
    })
    test('links are mounting', async () => {
        await wrapper.setData({ sidebarNavigationLinks })
    })
});

@Tofandel @bakerkretzmar thank you for taking your time to help out with this 👍