laravel 8 with vue3 inertia and jest

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "inertiajs/inertia-laravel": "^0.6.3",
        "laravel/framework": "^8.75",
        "laravel/sanctum": "^2.11",
        "laravel/tinker": "^2.5"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/breeze": "^1.10",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^5.10",
        "phpunit/phpunit": "^9.5.10"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

jest.config.json

module.exports = {
    "testEnvironment": "jsdom",
    testRegex: 'resources/assets/js/test/.*.spec.js$',
    moduleFileExtensions: [
        'js',
        'json',
        'vue',
        'ts'
    ],
    'transform': {
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
        '.*\\.(vue)$': '@vue/vue3-jest',
        "^.+\\.tsx?$": "ts-jest"
    },
    testEnvironmentOptions: {
        customExportConditions: ["node", "node-addons"],
    },
}

pacakage.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
        "test": "jest"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@tailwindcss/forms": "^0.5.0",
        "@tailwindcss/typography": "^0.5.2",
        "@types/jest": "^28.1.4",
        "@vue/compiler-sfc": "^3.2.31",
        "@vue/vue3-jest": "^28.0.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^10.4.7",
        "axios": "^0.21",
        "babel-jest": "^28.1.2",
        "jest-cli": "^28.1.2",
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^3.1.3",
        "ts-jest": "^28.0.5",
        "vue": "^3.2.31",
        "vue-jest": "^3.0.7",
        "vue-loader": "^17.0.0",
        "vue-template-compiler": "^2.7.4"
    },
    "dependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@vue/test-utils": "^2.0.2",
        "jest-environment-jsdom": "^28.1.2",
        "ziggy-js": "^1.4.6"
    }
}

resources.assets.js.test.index.spec.js

import { mount } from '@vue/test-utils'
import ExampleComponent from '../../../js/Pages/Home'

describe('index testing', function() {
    test('it works', () => {
        expect(1 + 1).toBe(2)
    })
//
    test('should mount without crashing', () => {
        const wrapper = mount(ExampleComponent)
        expect(wrapper.exists()).toBe(true)
    })
});

resources.js.app.js

import './bootstrap';

import Alpine from 'alpinejs';
import { route } from 'ziggy-js'

window.Alpine = Alpine;

Alpine.start();

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";



InertiaProgress.init();

createInertiaApp({
    resolve: async (name) => {
        return (await import(`./Pages/${name}`)).default;
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(route)
            .component("Link", Link)
            .component("Head", Head)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

resources.views.app.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>
@inertia
</body>
</html>

routes.web.php

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth'])->name('dashboard');


Route::get('/home', function () {
    return Inertia::render('Home');//refers to resources/js/Pages/Home.vue
})->name('home');

require __DIR__.'/auth.php';

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js("resources/js/app.js", "public/js")
    .vue()
    .postCss("resources/css/app.css", "public/css", [
        //
    ]);

mix.webpackConfig({
    output: {
        chunkFilename: "js/[name].js?id=[chunkhash]",
    },
});

directories are separated by period as / are not allowed

run php artisan inertia:middleware

and add
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\HandleInertiaRequests::class, to app/Http/kernal.php
],
]

npm i flush promises