Transpiling (#8)

* Add failing test for component that needs to be transpiled

* Enable transpiling class properties

`npm install --save-dev babel-loader babel-plugin-transform-class-properties`

* Add note about example to readme

* Add readme instructions about transpiling

Author: Josh Justice

README.md

@@ -48,6 +48,64 @@ describe('HelloState component', () => {
 
 ![Unit testing React components](images/demo.png)
 
+## 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.
+
+For example, to enable class properties:
+
+```js
+// cypress/plugins/index.js
+const webpack = require('@cypress/webpack-preprocessor')
+const webpackOptions = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|mjs)$/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['env', 'react'],
+          plugins: ['transform-class-properties'],
+        },
+      }
+    ]
+  }
+}
+
+const options = {
+  // send in the options from your webpack.config.js, so it works the same
+  // as your app's code
+  webpackOptions,
+  watchOptions: {}
+}
+
+module.exports = on => {
+  on('file:preprocessor', webpack(options))
+}
+```
+
+Install dev dependencies
+
+```shell
+npm i -D @cypress/webpack-preprocessor \
+  babel-loader babel-preset-es2015 babel-preset-react \
+  babel-plugin-transform-class-properties
+```
+
+And write a component using class properties
+
+```js
+import React from 'react'
+
+export class Transpiled extends React.Component {
+  state = {
+    count: 0
+  }
+
+  // ...
+}
+```
+
 ## Examples
 
 All components are in [src](src) folder. All tests are in [cypress/integration](cypress/integration) folder.
@@ -56,6 +114,7 @@ All components are in [src](src) folder. All tests are in [cypress/integration](
 * [hello-x-spec.js](cypress/integration/hello-x-spec.js) - testing React component with props and state [hello-x.jsx](src/hello-x.jsx)
 * [counter-spec.js](cypress/integration/counter-spec.js) clicks on the component and confirms the result
 * [stateless-spec.js](cypress/integration/stateless-spec.js) shows testing a stateless component from [stateless.jsx](src/stateless.jsx)
+* [transpiled-spec.js](cypress/integration/stateless-spec.js) shows testing a component with class properties syntax from [transpiled.jsx](src/stateless.jsx)
 
 ## Large examples
 

cypress/integration/transpiled-spec.js

@@ -0,0 +1,47 @@
+import { Transpiled } from '../../src/transpiled.jsx'
+import React from 'react'
+import { mount } from '../../lib'
+
+/* eslint-env mocha */
+describe('Transpiled', () => {
+  it('counts clicks', () => {
+    mount(<Transpiled />)
+    cy.contains('count: 0')
+      .click()
+      .contains('count: 1')
+      .click()
+      .contains('count: 2')
+  })
+
+  it('counts clicks 2', () => {
+    mount(<Transpiled />)
+    cy.contains('count: 0')
+      .click()
+      .contains('count: 1')
+      .click()
+      .contains('count: 2')
+  })
+})
+
+describe('Counter mounted before each test', () => {
+  beforeEach(() => {
+    mount(<Transpiled />)
+  })
+
+  it('goes to 3', () => {
+    cy.contains('count: 0')
+      .click()
+      .click()
+      .click()
+      .contains('count: 3')
+  })
+
+  it('has count in state', () => {
+    cy.contains('count: 0')
+      .click()
+      .click()
+      .click()
+    Cypress.component().its('state')
+      .should('deep.equal', {count: 3})
+  })
+})

cypress/plugins/index.js

@@ -1,17 +1,26 @@
-// ***********************************************************
-// 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
-// ***********************************************************
+const webpack = require('@cypress/webpack-preprocessor')
+const webpackOptions = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|mjs)$/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['es2015', 'react'],
+          plugins: ['transform-class-properties'],
+        },
+      }
+    ]
+  }
+}
 
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
+const options = {
+  // send in the options from your webpack.config.js, so it works the same
+  // as your app's code
+  webpackOptions,
+  watchOptions: {}
+}
 
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+module.exports = on => {
+  on('file:preprocessor', webpack(options))
 }

package.json

@@ -29,6 +29,7 @@
     "@types/node": "^8.5.2",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "cypress": "^1.4.1",

src/transpiled.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export class Transpiled extends React.Component {
+  state = {
+    count: 0
+  }
+
+  click () {
+    this.setState({
+      count: this.state.count + 1
+    })
+  }
+
+  render () {
+    return <p onClick={this.click.bind(this)}>count: {this.state.count}</p>
+  }
+}