DSchau · April 17, 2020 01:07 · Apr 17, 2020 · Apr 17, 2020 · Apr 17, 2020
diff --git a/recipe.mdx b/recipe.mdx
@@ -0,0 +1,76 @@
+Gatsby and Cypress can be used together seamlessly (and should be!). [Cypress](https://cypress.io) enables you to run end-to-end tests on your client-side application, which is what Gatsby produces.
+
+First, we'll want to install Cypress and additional dependencies.
+
+---
+
+<NPMPackage name="cypress" dependencyType="development" />
+<NPMPackage name="gatsby-cypress" dependencyType="development" />
+<NPMPackage name="@testing-library/cypress" dependencyType="development" />
+<NPMPackage name="start-server-and-test" dependencyType="development" />
+
+---
+
+Well look at that — we've added dependencies to your package.json and we also installed a useful package `gatsby-cypress`. `gatsby-cypress` exposes additional Cypress functionality which makes Gatsby and Cypress work together just a bit more nicely. We'll show that later with our first test, but hold tight for just a bit because first we need to scaffold out some boilerplate files for Cypress.
+
+---
+
+<File
+ path="cypress/plugins/index.js"
+ content={`https://gist.githubusercontent.com/DSchau/5b37ac430cc0b795728c7f476d2af6b3/raw/e7e7702c25453d49fa86a2789244cda1816fac8f/plugins-index.js`}
+/>
+
+<File
+ path="cypress/support/index.js"
+ content={`https://gist.githubusercontent.com/DSchau/5b37ac430cc0b795728c7f476d2af6b3/raw/e7e7702c25453d49fa86a2789244cda1816fac8f/support-index.js`}
+/>
+
+<File
+ path="cypress.json"
+ content={`https://gist.githubusercontent.com/DSchau/5b37ac430cc0b795728c7f476d2af6b3/raw/e7e7702c25453d49fa86a2789244cda1816fac8f/cypress.json`}
+/>
+
+---
+
+Cool cool! So we created a local `cypress` folder with two sub-folders, `support` and `plugins`. We've also automatically included all the nice `gatsby-cypress` utilities, which we can now use in our first test.
+
+---
+
+<File
+ path="cypress/integration/home-page/home-page.js"
+ content={`https://gist.githubusercontent.com/DSchau/5b37ac430cc0b795728c7f476d2af6b3/raw/e7e7702c25453d49fa86a2789244cda1816fac8f/home-page.js`}
+/>
+
+---
+
+Our first test! You'll notice it's failing. This is intentional -- we'd like you to run the test and fix it. This raises a question -- how do you run a Cypress test? Easy peasy.
+
+---
+
+<NPMScript
+  name="develop"
+  command="gatsby develop"
+/>
+
+<NPMScript
+  name="cy:open"
+  command="cypress open"
+/>
+
+<NPMScript
+  name="test:e2e"
+  command="start-server-and-test develop http://localhost:8000 cy:open"
+/>
+
+---
+
+Nifty! We've added two scripts:
+
+- `start-server-and-test`: This spins up a local Gatsby development server and "waits" until it's live so we can then run our tests
+- `test:e2e`: This is the command you'll use to run your tests.
+
+Let's give it a try. Run the following command in your terminal.
+
+npm run test:e2e
+
+Now you'll have a way to run and validate your Cypress tests with the dream-team combo of Gatsby and Cypress.
diff --git a/support-index.js b/support-index.js
@@ -1,3 +1,4 @@
+import '@testing-library/cypress/add-commands'
 import 'gatsby-cypress'
 // custom commands?
 // import './commands'
diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:8000"
+}
diff --git a/home-page.js b/home-page.js
@@ -0,0 +1,12 @@
+describe('My home page', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  /*
+   * TODO: make this test work
+   */
+  it('contains the text hello gatsby', () => {
+    expect(cy.getByText('sup')).should('eq', 'Hello Gatsby')
+  })
+})
diff --git a/plugins-index.js b/plugins-index.js
@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}
diff --git a/support-index.js b/support-index.js
@@ -0,0 +1,3 @@
+import 'gatsby-cypress'
+// custom commands?
+// import './commands'
No results found