Preserve database data across page navigation (Cypress)

I have a create-react-app + cypress setup following the guide here: https://miragejs.com/quickstarts/cypress/

I would like to write a single test case that does the following:

1. Visit /register and post some user data.
2. Visit /login and login with the newly registered user.

It appears that the registration works just fine, but when Cypress navigates to /login the mirage server is being re-initialized and the created user entry is lost, thus not being able to login:

Here are the register and login handlers:

     this.post('/api/auth/login', (schema, request) => {

        const { email } = JSON.parse(request.requestBody)
        const user = schema.users.findBy({ email })

        if (!user) {
          return new Response(401)
        }

        return {
          data: {
            user,
            access_token: 'blah'
          }
        }
      })


      this.post('/api/auth/register', function (schema, request) {

        const { user: { name, password, surname, email }} = JSON.parse(request.requestBody)

        const user = schema.users.create({
          name,
          password,
          surname,
          email
        })

        return { data: { user }}
      })

I have a separate test case that programatically creates a user and then logs in, allowing me to assume the login handler works just fine.

Any hints on how to preserve the registered user entry across page visits?

[IanVS]

I believe this has to do with the way that cypress works, and not a problem with Mirage. In between tests, cypress clears everything out of the browser, including cookies, local storage, etc., and that will include the memory where mirage keeps its database.

There are some good instructions in the cypress docs about how to deal with this (https://docs.cypress.io/guides/getting-started/testing-your-app#Logging-in), but mostly it involves using cy.request() to interact directly with the api (in your case, mirage) to add the user and log in, and you can put that into a custom cypress command so you can just run something like cy.login() in a beforeEach hook in your specs.

Cypress recommends against keeping state around between tests, so instead of keeping the same user for all your tests, you’ll want to set up whatever state you need for the individual test by seeding the state, as described in https://miragejs.com/quickstarts/cypress/#step-5-write-tests-using-your-mirage-server.

I’m still getting cypress up and running for my own application, so I’m not 100% positive on the best approaches just yet, but hopefully this gives you something to get started with.

[IanVS]

Ah, yes, cy.visit() clears everything out (it’s the same as typing the address into the address bar and pressing enter). I think you might be able to get what you want by using history methods instead. See https://github.com/cypress-io/cypress/issues/128#issuecomment-406155816 for an example.

I’m going to close the issue since it’s not a miragejs bug, but happy to keep discussing here if it’s useful.