Solving CORS issue when using hot reload with Jetstream and Cypress

After a bit of trial and error, I got cypress to work with a new laravel jetstream app. I'm posting what I did here, in the hope that it will be helpful to someone else (and because I'll probably need to refer to it later, too).

Start with basic setup:

laravel new test --jet    # In my case, using Inertia
cd test
yarn add --dev cypress
npx cypress open          # to install cypress boilerplate

composer require --dev laracasts/cypress
php artisan cypress:boilerplate
touch database/database.sqlite

Edit some files

.env.cypress:

DB_CONNECTION=sqlite
(remove other DB_ lines)

cypress.json:

{"baseUrl": "http://test.test"}

cypress/support/laravel-commands.js:

change: times = null
to:     times = 1

Otherwise, will get error: TypeError: Argument 1 passed to Illuminate\Database\Eloquent\Factories\Factory::times() must be of the type int, null given

In cypress/support/commands.js, add:

Cypress.on('uncaught:exception', (err, runnable) => {
    expect(err.message).to.include('CORS header')
    return false
});

Otherwise, will get cross origin script error

Create a cypress test

describe('Auth', () => {
    beforeEach(() => {
        cy.refreshDatabase()
    })

    specify.only('a user can log in', () => {
        cy.create('App\Models\User', {email: '[email protected]'});

        cy.visit('/').contains('Login').click()
            .location('pathname').should('equal', '/login')

        cy.get('input[name="email"]').type('[email protected]')
        cy.get('input[name="password"]').type('password')

        cy.get('button').contains('Login').click()

        cy.location('pathname').should('equal', '/dashboard')
    })
})

Set up to run tests

php artisan migrate --env=cypress

otherwise, will get error: General error: 1 no such table: sessions

yarn hot
npx cypress open

At this point, the test should work, and hot reloading should still work.