Created
July 9, 2022 20:28
-
-
Save tuckbloor/2d3bd2c89e80ef724985b5fbc2cec448 to your computer and use it in GitHub Desktop.
laravel 8 with vue3 inertia and jest
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"presets": [ | |
"@babel/preset-env" | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"], | |
}, | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
}) | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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]", | |
}, | |
}); |
run php artisan inertia:middleware
and add
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\HandleInertiaRequests::class, to app/Http/kernal.php
],
]
npm i flush promises
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
directories are separated by period as / are not allowed