Add babelrc example (#243)

README.md

@@ -164,6 +164,7 @@ Folder Name | Description
 [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/)
+[using-babel](examples/using-babel) | Bundling specs and loaded source files using project's existing `.babelrc` file
 [webpack-options](examples/webpack-options) | Using the default Webpack options from `@cypress/webpack-preprocessor` to transpile JSX specs
 <!-- prettier-ignore-end -->
 

circle.yml

@@ -31,6 +31,18 @@ workflows:
                 name: Build folder 🏗
                 command: npm run build
 
+      - cypress/run:
+          name: Example Babel
+          requires:
+            - Install
+          # 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/using-babel
+          command: npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Example React Scripts
           requires:
@@ -175,6 +187,7 @@ workflows:
           requires:
             - Install
             - Test
+            - Example Babel
             - Example React Scripts
             - Example Component Folder
             - Example Tailwind

examples/using-babel/.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    {
+      "plugins": ["@babel/plugin-proposal-class-properties"]
+    },
+    "@emotion/babel-preset-css-prop"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "babel-plugin-istanbul"
+      ]
+    }
+  }
+}

examples/using-babel/.npmrc

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

examples/using-babel/README.md

@@ -0,0 +1,29 @@
+# example: using-babel
+
+Component testing for projects using Babel config
+
+Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+
+```shell
+npm run cy:open
+# or run headless tests
+npm test
+```
+
+![Example component test](images/dynamic.gif)
+
+## Specs
+
+See specs [src/Post.spec.js](src/Post.spec.js) and [src/Skeleton.spec.js](src/Skeleton.spec.js). The specs are bundled using [.babelrc](.babelrc) settings via [cypress/plugins/index.js](cypress/plugins/index.js) file that includes file preprocessor
+
+```js
+// let's bundle spec files and the components they include using
+// the same bundling settings as the project by loading .babelrc
+const preprocessor = require('cypress-react-unit-test/plugins/babelrc')
+module.exports = (on, config) => {
+  preprocessor(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}
+```

examples/using-babel/cypress.json

@@ -0,0 +1,8 @@
+{
+  "fixturesFolder": false,
+  "testFiles": "**/*spec.js",
+  "viewportWidth": 500,
+  "viewportHeight": 500,
+  "experimentalComponentTesting": true,
+  "componentFolder": "src"
+}

examples/using-babel/cypress/integration/spec.js

@@ -0,0 +1,6 @@
+/// <reference types="cypress" />
+describe('integration spec', () => {
+  it('works', () => {
+    expect(1).to.equal(1)
+  })
+})

examples/using-babel/cypress/plugins/index.js

@@ -0,0 +1,9 @@
+// let's bundle spec files and the components they include using
+// the same bundling settings as the project by loading .babelrc
+const preprocessor = require('cypress-react-unit-test/plugins/babelrc')
+module.exports = (on, config) => {
+  preprocessor(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}

examples/using-babel/cypress/support/index.js

@@ -0,0 +1 @@
+require('cypress-react-unit-test/dist/hooks')

examples/using-babel/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-using-babel",
+  "description": "Component testing for projects using Babel config",
+  "private": true,
+  "scripts": {
+    "test": "../../node_modules/.bin/cypress run",
+    "cy:open": "../../node_modules/.bin/cypress open"
+  },
+  "devDependencies": {
+    "cypress-react-unit-test": "file:../.."
+  }
+}

examples/using-babel/src/Post.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Skeleton from 'react-loading-skeleton'
+
+export default class Post extends Component {
+  static propTypes = {
+    title: PropTypes.string,
+    children: PropTypes.node,
+    size: PropTypes.oneOf(['small', 'large']),
+  }
+
+  static defaultProps = {
+    size: 'small',
+  }
+
+  getStyle() {
+    const { size } = this.props
+    const baseStyle = {
+      padding: 8,
+      width: '20em',
+    }
+    return Object.assign(baseStyle, {
+      fontSize: size === 'small' ? 16 : 25,
+      lineHeight: size === 'small' ? 'normal' : 2,
+    })
+  }
+
+  render() {
+    return (
+      <div style={this.getStyle()}>
+        <h1>{this.props.title || <Skeleton />}</h1>
+        <p>{this.props.children || <Skeleton count={5} />}</p>
+      </div>
+    )
+  }
+}

examples/using-babel/src/Post.spec.js

@@ -0,0 +1,85 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+
+import SideBySide from './SideBySide'
+import Post from './Post'
+import { SkeletonTheme } from 'react-loading-skeleton'
+
+// matches Post.story.js
+describe('Post skeletons', () => {
+  it('default', () => {
+    mount(
+      <SideBySide>
+        <Post />
+        <Post title="A title">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+          nec justo feugiat, auctor nunc ac, volutpat arcu. Suspendisse faucibus
+          aliquam ante, sit amet iaculis dolor posuere et. In ut placerat leo.
+        </Post>
+      </SideBySide>,
+    )
+  })
+
+  it('large size', () => {
+    mount(
+      <SideBySide>
+        <Post size="large" />
+        <Post size="large" title="A title">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+          nec justo feugiat, auctor nunc ac, volutpat arcu. Suspendisse faucibus
+          aliquam ante, sit amet iaculis dolor posuere et. In ut placerat leo.
+        </Post>
+      </SideBySide>,
+    )
+  })
+
+  it('different colors', () => {
+    const Test = () => (
+      <div>
+        <SkeletonTheme color="#1D5CA6" highlightColor="#164999">
+          <Post />
+        </SkeletonTheme>
+        <SkeletonTheme color="#333" highlightColor="#4a4a4a">
+          <Post />
+        </SkeletonTheme>
+      </div>
+    )
+
+    mount(<Test />)
+  })
+
+  // extra test - set Post title after a timeout
+  it('loads title after timeout', () => {
+    const Demo = () => {
+      // at first there is not title, no children
+      const [title, setTitle] = React.useState('')
+      const [text, setText] = React.useState('')
+
+      setTimeout(() => {
+        setTitle('Post title 👍')
+      }, 1000)
+
+      setTimeout(() => {
+        setText(`The text has arrived ...
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec
+          justo feugiat, auctor nunc ac, volutpat arcu. Suspendisse faucibus
+          aliquam ante, sit amet iaculis dolor posuere et. In ut placerat leo.
+        `)
+      }, 2000)
+
+      return <Post title={title} children={text} />
+    }
+    mount(<Demo />)
+    // at first, the title and the text are 💀
+    cy.get('h1 .react-loading-skeleton').should('have.length', 1)
+    cy.get('p .react-loading-skeleton').should('have.length', 5)
+
+    // then the title arrives, but the text is still skeletons
+    cy.contains('h1', 'Post title 👍').should('be.visible')
+    cy.get('p .react-loading-skeleton').should('have.length', 5)
+
+    // and then no skeletons remain
+    cy.get('.react-loading-skeleton').should('not.exist')
+  })
+})

examples/using-babel/src/SideBySide.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+const style = {
+  alignItems: 'flex-start',
+  display: 'flex',
+  justifyContent: 'center',
+}
+
+const arrowStyle = {
+  alignSelf: 'center',
+  fontSize: 20,
+  padding: '0 20px',
+}
+
+export default ({ children }) => {
+  const childrenWithArrows = []
+  React.Children.forEach(children, (child, index) => {
+    if (index > 0) {
+      childrenWithArrows.push(
+        <div key={index} style={arrowStyle}>
+          →
+        </div>,
+      )
+    }
+    childrenWithArrows.push(child)
+  })
+  return <div style={style}>{childrenWithArrows}</div>
+}