merge master into this branch

Author: bahmutov

.travis.yml

@@ -1,4 +1,4 @@
-# cypress-react-unit-test [![Build Status](https://travis-ci.org/bahmutov/cypress-react-unit-test.svg?branch=master)](https://travis-ci.org/bahmutov/cypress-react-unit-test) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/z9dxah) [![renovate-app badge][renovate-badge]][renovate-app] [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/bahmutov/cypress-react-unit-test)
+# cypress-react-unit-test [![CircleCI](https://circleci.com/gh/bahmutov/cypress-react-unit-test/tree/master.svg?style=svg)](https://circleci.com/gh/bahmutov/cypress-react-unit-test/tree/master) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/z9dxah) [![renovate-app badge][renovate-badge]][renovate-app] [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/bahmutov/cypress-react-unit-test)
 
 > A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) E2E test runner **ALPHA**
 
@@ -16,7 +16,7 @@
 
 ## Install
 
-Requires [Node](https://nodejs.org/en/) version 6 or above.
+Requires [Node](https://nodejs.org/en/) version 8 or above.
 
 ```sh
 npm install --save-dev cypress cypress-react-unit-test
@@ -63,79 +63,75 @@ describe('HelloState component', () => {
 
 ![Unit testing React components](images/demo.png)
 
-## Configuration
+### styles
 
-If your React and React DOM libraries are installed in non-standard paths (think monorepo scenario), you can tell this plugin where to find them. In `cypress.json` specify paths like this:
+You can add individual style to the mounted component by passing its text as an option
 
-```json
-{
-  "env": {
-    "cypress-react-unit-test": {
-      "react": "node_modules/react/umd/react.development.js",
-      "react-dom": "node_modules/react-dom/umd/react-dom.development.js"
+```js
+it('can be passed as an option', () => {
+  const style = `
+    .component-button {
+      display: inline-flex;
+      width: 25%;
+      flex: 1 0 auto;
     }
-  }
-}
-```
-
-## Transpilation
 
-How can we use features that require transpilation? Using [@cypress/webpack-preprocessor](https://github.com/cypress-io/cypress-webpack-preprocessor#readme). You can use [cypress/plugins/index.js](cypress/plugins/index.js) to configure any transpilation plugins you need.
+    .component-button.orange button {
+      background-color: #F5923E;
+      color: white;
+    }
+  `
+  cy.mount(<Button name='Orange' orange />, null, { style })
+  cy.get('.orange button')
+    .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+})
+```
 
-For example, to enable class properties:
+Often your component rely on global CSS style imported from the root `index.js` or `app.js` file
 
 ```js
-// cypress/plugins/index.js
-const webpack = require('@cypress/webpack-preprocessor')
-const webpackOptions = {
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx|mjs)$/,
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-env', '@babel/preset-react'],
-          plugins: ['@babel/plugin-proposal-class-properties'],
-        },
-      }
-    ]
-  }
-}
+// index.js
+import './styles.css'
+// bootstrap application
+```
 
-const options = {
-  // send in the options from your webpack.config.js, so it works the same
-  // as your app's code
-  webpackOptions,
-  watchOptions: {}
-}
+You can read the CSS file and pass it as `style` option yourself
 
-module.exports = on => {
-  on('file:preprocessor', webpack(options))
-}
+```js
+cy.readFile('cypress/integration/Button.css')
+  .then(style => {
+    cy.mount(<Button name='Orange' orange />, null, { style })
+  })
 ```
 
-Install dev dependencies
+You can even let Cypress read the file and inject the style
 
-```shell
-npm i -D @cypress/webpack-preprocessor \
-  babel-loader @babel/preset-env @babel/preset-react \
-  @babel/plugin-proposal-class-properties
+```js
+const cssFile = 'cypress/integration/Button.css'
+cy.mount(<Button name='Orange' orange />, null, { cssFile })
 ```
 
-And write a component using class properties
+See [cypress/integration/inject-style-spec.js](cypress/integration/inject-style-spec.js) for more examples.
 
-```js
-import React from 'react'
+## Configuration
 
-export class Transpiled extends React.Component {
-  state = {
-    count: 0
-  }
+If your React and React DOM libraries are installed in non-standard paths (think monorepo scenario), you can tell this plugin where to find them. In `cypress.json` specify paths like this:
 
-  // ...
+```json
+{
+  "env": {
+    "cypress-react-unit-test": {
+      "react": "node_modules/react/umd/react.development.js",
+      "react-dom": "node_modules/react-dom/umd/react-dom.development.js"
+    }
+  }
 }
 ```
 
+## Transpilation
+
+How can we use features that require transpilation? By using [@cypress/webpack-preprocessor](https://github.com/cypress-io/cypress-webpack-preprocessor#readme) - see the plugin configuration in [cypress/plugins/index.js](cypress/plugins/index.js)
+
 ## Examples
 
 All components are in [src](src) folder. All tests are in [cypress/integration](cypress/integration) folder.

README.md

@@ -0,0 +1,47 @@
+version: 2.1
+orbs:
+  cypress: cypress-io/cypress@1
+workflows:
+  build:
+    jobs:
+      # install and cache dependencies in this job
+      # AND build the library once
+      # then the workspace will be passed to other jobs
+      - cypress/install:
+          name: Install
+          build: npm run transpile
+          post-steps:
+            - run:
+                name: Show info 📺
+                command: npx cypress info
+            - run:
+                name: Linting code 🧹
+                command: npm run lint
+
+      # the test job automatically attaches the workspace
+      # created by the install job, so it is ready to test
+      - cypress/run:
+          name: Test
+          requires:
+            - Install
+          # notice a trick to avoid re-installing dependencies
+          # in this job - a do-nothing "install-command" parameter
+          install-command: echo 'Nothing to install in this job'
+          # we are not going to use results from this job anywhere else
+          no-workspace: true
+          record: false
+
+      # this job attaches the workspace left by the install job
+      # so it is ready to run Cypress tests
+      # only we will run semantic release script instead
+      - cypress/run:
+          name: NPM release
+          # we need newer Node for semantic release
+          executor: cypress/base-12-6-0
+          requires:
+            - Install
+            - Test
+          install-command: echo 'Nothing to install in this job'
+          no-workspace: true
+          # instead of "cypress run" do NPM release 😁
+          command: npm run semantic-release

circle.yml

@@ -22,7 +22,9 @@ context('Users', () => {
       // preventing race conditions where you wait on untouched routes
     })
 
-    it('can inspect real data in XHR', () => {
+    // Cypress v4 is failing on this test
+    // but this test passes in new mount mode
+    it.skip('can inspect real data in XHR', () => {
       cy.route('/users?_limit=3').as('users')
       mount(<Users />)
       cy.wait('@users')

cypress/component/component tests/basic/network/users-spec.js

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+/// <reference types="../../lib" />
+import React from 'react'
+
+/* eslint-env mocha */
+describe('Empty div jsx', () => {
+  it('works with El', () => {
+    const El = () => <div>foo</div>
+    cy.mount(<El></El>)
+  })
+
+  it('works with div', () => {
+    cy.mount(<div>I am a div</div>)
+    cy.contains('I am a div').should('be.visible')
+  })
+})

cypress/integration/empty-spec.js

@@ -0,0 +1,97 @@
+// <reference types="cypress" />
+/// <reference types="../../lib" />
+import React from 'react'
+
+class Button extends React.Component {
+  handleClick() {
+    this.props.clickHandler(this.props.name)
+  }
+
+  render() {
+    const className = [
+      'component-button',
+      this.props.orange ? 'orange' : '',
+      this.props.wide ? 'wide' : '',
+    ]
+
+    return (
+      <div className={className.join(' ').trim()}>
+        <button onClick={this.handleClick.bind(this)}>{this.props.name}</button>
+      </div>
+    )
+  }
+}
+
+describe('Injecting style', () => {
+  it('can be passed as an option', () => {
+    const style = `
+      .component-button {
+        display: inline-flex;
+        width: 25%;
+        flex: 1 0 auto;
+      }
+
+      .component-button.orange button {
+        background-color: #F5923E;
+        color: white;
+      }
+    `
+    cy.mount(<Button name="Orange" orange />, null, { style })
+    cy.get('.orange button').should(
+      'have.css',
+      'background-color',
+      'rgb(245, 146, 62)',
+    )
+  })
+
+  it('read CSS file and pass as style', () => {
+    cy.readFile('cypress/integration/Button.css').then(style => {
+      cy.mount(<Button name="Orange" orange />, null, { style })
+    })
+
+    cy.get('.component-button')
+      .should('have.class', 'orange')
+      .find('button')
+      .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+  })
+
+  it('can be read automatically', () => {
+    const cssFile = 'cypress/integration/Button.css'
+    cy.mount(<Button name="Orange" orange />, null, { cssFile })
+    cy.get('.orange button').should(
+      'have.css',
+      'background-color',
+      'rgb(245, 146, 62)',
+    )
+  })
+
+  context('read CSS file once', () => {
+    before(() => {
+      // .as('style') will save the loaded CSS text
+      // in the text context property "style"
+      cy.readFile('cypress/integration/Button.css').as('style')
+    })
+
+    it('is orange', function() {
+      // notice we use "function () {}" callback
+      // to get the test context "this" to be able to use "this.style"
+      cy.mount(<Button name="Orange" orange />, null, { style: this.style })
+
+      cy.get('.orange button').should(
+        'have.css',
+        'background-color',
+        'rgb(245, 146, 62)',
+      )
+    })
+
+    it('is orange again', function() {
+      cy.mount(<Button name="Orange" orange />, null, { style: this.style })
+
+      cy.get('.orange button').should(
+        'have.css',
+        'background-color',
+        'rgb(245, 146, 62)',
+      )
+    })
+  })
+})

cypress/integration/inject-style-spec.js

@@ -5,12 +5,6 @@ const { initPlugin } = require('cypress-plugin-snapshots/plugin')
 
 // should we just reuse root webpack config?
 const webpackOptions = {
-  // https://webpack.js.org/configuration/node/
-  // avoid winston logger problem
-  // https://github.com/percy/percy-cypress/issues/58
-  node: {
-    fs: 'empty',
-  },
   resolve: {
     alias: {
       react: path.resolve('./node_modules/react'),

cypress/plugins/index.js

@@ -18,7 +18,7 @@ export default function getDisplayName(
     return nameFromCache
   }
 
-  let displayName: string
+  let displayName: string | null = null;
 
   // The displayName property is not guaranteed to be a string.
   // It's only safe to use for our purposes if it's a string.