To test an implementation of NextAuth.js, we encourage you to use Cypress.
To get started, install the dependencies:
npm install --save-dev cypress cypress-social-logins @testing-library/cypress
If you are using username/password based login, you will not need the
Cypress will install and initialize the folder structure with example integration tests, a folder for plugins, etc.
Next you will have to create some configuration files for Cypress.
First, the primary cypress config:
This initial Cypress config will tell Cypress where to find your site on initial launch as well as allow it to open up URLs at domains that aren't your page, for example to be able to login to a social provider.
Second, a cypress file for environment variables. These can be defined in
cypress.json under the key
env as well, however since we're storing username / passwords in here we should keep those in a separate file and only commit
cypress.json to version control, not
You must change the login credentials you want to use, but you can also redefine the name of the
GOOGLE_* variables if you're using a different provider.
COOKIE_NAME, however, must be set to that value for NextAuth.js.
Third, if you're using the
cypress-social-login plugin, you must add this to your
/cypress/plugins/index.js file like so:
Finally, you can also add the following npm scripts to your
Once we've got all that configuration out of the way, we can begin writing tests to login using NextAuth.js.
The basic login test looks like this:
Things to note here include, that you must adjust the CSS selector defined under
postLoginSelector to match a selector found on your page after the user is logged in. This is how Cypress knows whether it succeeded or not. Also, if you're using another provider, you will have to adjust the