-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(gatsby-cypress): Add TS types & improve README (#37984)
- Loading branch information
Showing
22 changed files
with
245 additions
and
284 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
This file was deleted.
Oops, something went wrong.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { defineConfig } from "cypress" | ||
|
||
export default defineConfig({ | ||
e2e: { | ||
baseUrl: `http://localhost:8000`, | ||
specPattern: `cypress/e2e` | ||
} | ||
}) |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
describe("Smoke tests", () => { | ||
it("Visits the index page and navigates", () => { | ||
cy.visit("/").waitForRouteChange() | ||
cy.findByText(/go to page 2/i) | ||
.click() | ||
}) | ||
}) |
This file was deleted.
Oops, something went wrong.
2 changes: 1 addition & 1 deletion
2
...ples/using-cypress/cypress/support/e2e.js → ...ples/using-cypress/cypress/support/e2e.ts
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
import "./commands" | ||
import "gatsby-cypress/commands" | ||
import "cypress-axe" | ||
import "@testing-library/cypress/add-commands" |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"compilerOptions": { | ||
"types": ["cypress", "@testing-library/cypress", "cypress-axe", "gatsby-cypress"] | ||
}, | ||
"include": ["."] | ||
} |
6 changes: 5 additions & 1 deletion
6
examples/using-cypress/gatsby-config.js → examples/using-cypress/gatsby-config.ts
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,12 @@ | ||
module.exports = { | ||
import type { GatsbyConfig } from "gatsby" | ||
|
||
const config: GatsbyConfig = { | ||
siteMetadata: { | ||
title: `Gatsby Default Starter`, | ||
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, | ||
author: `@gatsbyjs`, | ||
}, | ||
plugins: [], | ||
} | ||
|
||
export default config |
This file was deleted.
Oops, something went wrong.
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
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
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
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
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,77 +1,60 @@ | ||
# gatsby-cypress | ||
|
||
This package provides additional [Cypress](https://cypress.io/) commands for [testing Gatsby websites](/docs/end-to-end-testing/). | ||
This package provides additional [Cypress](https://cypress.io/) commands for [testing Gatsby websites](https://www.gatsbyjs.com/docs/how-to/testing/end-to-end-testing/). | ||
|
||
> **NOTE:** This package is _not_ required to use Gatsby and Cypress together. It only exists to add extra commands for convenience. | ||
**Please note:** This package is **not** required to use Gatsby and Cypress together. It only exists to add extra commands for convenience. | ||
|
||
If you want to find elements (e.g. by test ID or by text/label/etc.), consider using [`@testing-library/cypress`](https://github.com/testing-library/cypress-testing-library). | ||
|
||
## Installation | ||
|
||
To use these commands, first install the necessary packages: | ||
|
||
```shell | ||
npm install cypress gatsby-cypress start-server-and-test --save-dev | ||
npm install gatsby-cypress --save-dev | ||
``` | ||
|
||
## Add custom Gatsby testing commands | ||
## Adding custom Gatsby testing commands | ||
|
||
Next, add a new file located at `cypress/support/index.js` and add the Gatsby-specific Cypress commands: | ||
Next, add a new file located at `cypress/support/e2e.ts` and add the Gatsby-specific Cypress commands: | ||
|
||
```js:title=cypress/support/index.js | ||
```ts:title=cypress/support/e2e.ts | ||
import "gatsby-cypress/commands" | ||
``` | ||
|
||
If you're using TypeScript, add its types to Cypress' `tsconfig.json` file: | ||
|
||
```json:title=cypress/tsconfig.json | ||
{ | ||
"compilerOptions": { | ||
// highlight-next-line | ||
"types": ["cypress", "gatsby-cypress"] | ||
}, | ||
"include": ["."] | ||
} | ||
``` | ||
|
||
Once imported, the following additional commands are available: | ||
|
||
- `cy.waitForRouteChange()`: Waits for Gatsby to finish the route change, in | ||
order to ensure event handlers are properly setup. Example: | ||
|
||
```js | ||
// after navigating to another page via a link | ||
cy.waitForRouteChange().get(`#element-with-event-handler`).click() | ||
cy.visit(`/page-2`).waitForRouteChange() | ||
``` | ||
|
||
- [**no longer recommended**] `cy.getTestElement(selector)`: Selects elements where the `data-testid` | ||
attribute matches the value of `selector`. Example: | ||
- `cy.waitForAPI('api-name')`: Waits for a specific Gatsby API to finish. Example: | ||
|
||
```jsx | ||
<button data-testid="btn-to-test">click me</button> | ||
```js | ||
cy.waitForAPI(`onRouteUpdate`).get(`#element-with-event-handler`).click() | ||
``` | ||
|
||
- `cy.waitForAPIorTimeout('api-name')`: Waits for a specific Gatsby API to finish. It timeouts if it doesn't finish. Example: | ||
|
||
```js | ||
cy.getTestElement("btn-to-test").click() | ||
cy.waitForAPIorTimeout(`onRouteUpdate`) | ||
``` | ||
|
||
> **NOTE:** It’s recommended not to use test IDs. Instead, consider using [`cypress-testing-library`](https://github.com/testing-library/cypress-testing-library) and relying on `findByText` instead. | ||
## Running Cypress tests in Gatsby | ||
|
||
Add a new script in `package.json` to run the Cypress tests. A common name for this is `cy:open`. | ||
|
||
You also need to expose a `CYPRESS_SUPPORT` environment variable to enable [Gatsby test utilities](https://github.com/gatsbyjs/gatsby/blob/1fb376f84ee538bac79824cd119bef6a17c19b33/packages/gatsby/cache-dir/api-runner-browser.js#L9-L18). Place it in your test script in `package.json`, for example: | ||
|
||
```diff:title=package.json | ||
"scripts": { | ||
... other scripts ... | ||
+ "cy:open": "cypress open", | ||
+ "test:dev": "CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:open", | ||
+ "test": "CYPRESS_SUPPORT=y npm run build && start-server-and-test serve http://localhost:9000 cy:open" | ||
} | ||
``` | ||
|
||
> **NOTE:** `test:dev` runs the site in development mode, which allows you to quickly fix and retest any issues. `test` is better suited for build systems like Circle CI, Travis CI, etc. | ||
## Writing Cypress tests for Gatsby pages | ||
|
||
Add tests by creating a spec file. We recommend starting with a `cypress/integrations/index.spec.js` to test the home page: | ||
|
||
```js | ||
context("Homepage", () => { | ||
beforeEach(() => { | ||
cy.visit(`http://localhost:8000`) | ||
cy.waitForRouteChange() | ||
}) | ||
|
||
it("has focusable buttons", () => { | ||
cy.findByText("click me").focus() | ||
cy.focused().should("have.text", "click me") | ||
}) | ||
}) | ||
``` | ||
Read the [End-to-End Testing documentation](https://www.gatsbyjs.com/docs/how-to/testing/end-to-end-testing/) to learn how to use Cypress and Gatsby together. |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
declare global { | ||
namespace Cypress { | ||
interface Chainable<Subject = any> { | ||
/** | ||
* Waits for Gatsby to finish the route change, in order to ensure event handlers are properly setup | ||
* @example | ||
* cy.visit(`/page-2`).waitForRouteChange() | ||
*/ | ||
waitForRouteChange: () => Chainable<Subject> | ||
/** | ||
* Waits for a specific Gatsby API to finish | ||
* @example | ||
* cy.waitForAPI(`onRouteUpdate`).get(`#element-with-event-handler`).click() | ||
*/ | ||
waitForAPI: (lifeCycleName: string) => Chainable<Subject> | ||
/** | ||
* Waits for a specific Gatsby API to finish. It timeouts if it doesn't finish. | ||
* @example | ||
* cy.waitForAPIorTimeout(`onRouteUpdate`) | ||
*/ | ||
waitForAPIorTimeout: (lifeCycleName: string, options?: WaitForApiOrTimeoutOptions) => Chainable<Subject> | ||
} | ||
} | ||
} | ||
|
||
export interface WaitForApiOrTimeoutOptions { | ||
timeout?: number | ||
} | ||
|
||
export {} |
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
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