Add snapshot example (#261)

Author: bahmutov

README.md

@@ -169,6 +169,7 @@ Folder Name | Description
 [react-scripts-folder](examples/react-scripts-folder) | A project using `react-scripts` with component tests in `cypress/component`
 [tailwind](examples/tailwind) | Testing styles built using [Tailwind CSS](https://tailwindcss.com/)
 [sass-and-ts](examples/sass-and-ts) | Example with Webpack, Sass and TypeScript
+[snapshots](examples/snapshots) | Component HTML and JSON snapshots using [cypress-plugin-snapshots](https://github.com/meinaart/cypress-plugin-snapshots)
 [visual-sudoku](examples/visual-sudoku) | [Visual testing](#visual-testing) for components using open source plugin [cypress-image-snapshot](https://github.com/palmerhq/cypress-image-snapshot). For larger example with an hour long list of explanation videos, see [bahmutov/sudoku](https://github.com/bahmutov/sudoku).
 [visual-testing-with-percy](examples/visual-testing-with-percy) | [Visual testing](#visual-testing) for components using 3rd party service [Percy.io](https://percy.io/)
 [visual-testing-with-happo](examples/visual-testing-with-happo) | [Visual testing](#visual-testing) for components using 3rd party service [Happo](https://happo.io/)

circle.yml

@@ -159,6 +159,19 @@ workflows:
                   npm run only-covered
                 working_directory: examples/sass-and-ts
 
+      - cypress/run:
+          name: Example Snapshots
+          requires:
+            - Install
+          executor: cypress/base-12
+          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
+          install-command: npm install
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/snapshots
+          command: npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Visual Sudoku
           executor: cypress/base-12
@@ -256,6 +269,7 @@ workflows:
             - Example Component Folder
             - Example React Scripts
             - Example Sass
+            - Example Snapshots
             - Example Tailwind
             - Example Webpack options
             - Visual Sudoku

cypress/component/basic/react-tutorial/pretty-snapshots-spec.js

@@ -11,8 +11,4 @@ it('says hello world', () => {
     .invoke('html')
     .then(pretty)
     .should('equal', '<h1>Hello, world!</h1>')
-
-  // too bad - cypress-plugin-snapshots throws
-  // ReferenceError: regeneratorRuntime is not defined
-  // .toMatchSnapshot()
 })

cypress/plugins/index.js

@@ -1,7 +1,6 @@
 const path = require('path')
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 const babelConfig = require('../../babel.config.js')
-// const { initPlugin } = require('cypress-plugin-snapshots/plugin')
 
 // should we just reuse root webpack config?
 const webpackOptions = {
@@ -42,7 +41,5 @@ const options = {
 
 module.exports = (on, config) => {
   on('file:preprocessor', webpackPreprocessor(options))
-
-  // initPlugin(on, config)
   return config
 }

cypress/support/index.js

@@ -16,5 +16,3 @@
 // custom commands provided by this package, built from TypeScript code in "lib"
 // using "npm run transpile"
 import 'cypress-react-unit-test/hooks'
-// import '@percy/cypress'
-// import 'cypress-plugin-snapshots/commands'

examples/snapshots/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/snapshots/README.md

@@ -0,0 +1,24 @@
+# example: react-snapshots
+
+> Component testing with snapshots using [cypress-plugin-snapshots](https://github.com/meinaart/cypress-plugin-snapshots)
+
+Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+
+```shell
+npm install
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
+Example component taken from [Snapshot Testing React Components with Jest](https://semaphoreci.com/community/tutorials/snapshot-testing-react-components-with-jest)
+
+![Snapshot test](images/snapshot-test.png)
+
+See [cypress/component/PositiveCounter-spec.js](cypress/component/PositiveCounter-spec.js) and saved snapshots in [cypress/component/**snapshots**/](cypress/component/__snapshots__/PositiveCounter-spec.js.snap).
+
+## Failing test
+
+If the snapshot contents does not match the saved snapshot file, the test fails. You can click on the snapshot command, review the difference, and if the difference is expected, update the snapshot from the Test Runner's GUI.
+
+![Update snapshot](images/update-snapshot.gif)

examples/snapshots/cypress.json

@@ -0,0 +1,16 @@
+{
+  "fixturesFolder": false,
+  "testFiles": "**/*-spec.js",
+  "viewportWidth": 500,
+  "viewportHeight": 500,
+  "experimentalComponentTesting": true,
+  "ignoreTestFiles": [
+    "**/__snapshots__/*",
+    "**/__image_snapshots__/*"
+  ],
+  "env": {
+    "cypress-plugin-snapshots": {
+      "prettier": true
+    }
+  }
+}

examples/snapshots/cypress/component/PositiveCounter-spec.js

@@ -0,0 +1,81 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import PositiveCounter from './PositiveCounter'
+
+// current version 1.4.3 of cypress-plugin-snapshots only works with
+// objects and images.
+// https://github.com/meinaart/cypress-plugin-snapshots/issues/122
+it.skip('sanity check: string snapshots work', () => {
+  cy.wrap('hello, world').toMatchSnapshot()
+})
+
+// utility child command that grabs element's HTML and snapshots its as an object
+Cypress.Commands.add('toMatchHTML', { prevSubject: 'element' }, $el => {
+  return cy
+    .wrap({
+      html: $el[0].outerHTML,
+    })
+    .toMatchSnapshot()
+})
+
+describe('PositiveCounter', () => {
+  it('starts with zero', () => {
+    mount(<PositiveCounter />)
+    cy.contains('Value: 0')
+      // previous command yields jQuery element
+      // I would like to get its outer HTML which
+      // we can do via $el[0].outerHTML shorthand
+      .its('0.outerHTML')
+      // convert text to JSON object for the snapshot plugin to work
+      // https://github.com/meinaart/cypress-plugin-snapshots/issues/122
+      .then(html => ({
+        html,
+      }))
+      .toMatchSnapshot()
+
+    // in other tests we will use utility child command .toMatchHTML()
+  })
+
+  it('should render counts', () => {
+    mount(<PositiveCounter />)
+    cy.get('.increment')
+      .click()
+      .click()
+      .click()
+    // make sure the component updates
+    cy.contains('Value: 3').toMatchHTML()
+
+    cy.get('.increment')
+      .click()
+      .click()
+      .click()
+
+    cy.contains('Value: 6').toMatchHTML()
+  })
+
+  it('should not go negative', () => {
+    mount(<PositiveCounter />)
+    cy.get('.increment').click()
+    cy.get('.decrement')
+      .click()
+      .click()
+    cy.contains('Value: 0').toMatchHTML()
+  })
+
+  it('snapshots the component state', () => {
+    mount(<PositiveCounter />)
+    cy.get('.increment')
+      .click()
+      .click()
+      .click()
+      .click()
+    // The component's code set its reference
+    // as a property on the "window" object
+    // when running inside Cypress. This allows
+    // the test to access it.
+    cy.window()
+      .its('PositiveCounter.state')
+      .toMatchSnapshot()
+  })
+})

examples/snapshots/cypress/component/PositiveCounter.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+
+export default class PositiveCounter extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      count: 0,
+    }
+    // if we are running inside Cypress, expose the state
+    if (window.Cypress) {
+      window.PositiveCounter = this
+    }
+  }
+
+  increment = () => {
+    this.setState({
+      count: this.state.count + 1,
+    })
+  }
+
+  decrement = () => {
+    this.setState({
+      count: Math.max(0, this.state.count - 1),
+    })
+  }
+
+  render() {
+    return (
+      <span>
+        Value: {this.state.count}
+        <button className="decrement" onClick={this.decrement}>
+          &minus;
+        </button>
+        <button className="increment" onClick={this.increment}>
+          +
+        </button>
+      </span>
+    )
+  }
+}