add to circleci

Author: bahmutov

circle.yml

@@ -47,6 +47,18 @@ workflows:
           command: npm test
           store_artifacts: true
 
+      - cypress/run:
+          name: Example Webpack options
+          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/webpack-options
+          command: npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Test
           parallelism: 4
@@ -78,6 +90,7 @@ workflows:
             - Test
             - Example React Scripts
             - Example Component Folder
+            - Example Webpack options
           install-command: echo 'Already installed'
           verify-command: echo 'Already verified'
           no-workspace: true

examples/webpack-options/README.md

@@ -0,0 +1,16 @@
+# example: webpack-options
+
+The Webpack preprocessor in [cypress/plugins/index.js](cypress/plugins/index.js) adds the Babel React preset to the list of default Webpack plugins. This allows Cypress to transpile JSX code in [cypress/component/Test.cy-spec.js](cypress/component/Test.cy-spec.js) file.
+
+```js
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+describe('components', () => {
+  it('works', () => {
+    mount(<div>Text</div>)
+    cy.contains('Text')
+  })
+})
+```
+
+![Test screenshot](images/test.png)

examples/webpack-options/cypress/plugins/index.js

@@ -1,9 +1,14 @@
 // @ts-check
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+
+// Cypress Webpack preprocessor includes Babel env preset,
+// but to transpile JSX code we need to add Babel React preset
 module.exports = (on, config) => {
-  on(
-    'file:preprocessor',
-    // @ts-ignore
-    webpackPreprocessor(webpackPreprocessor.defaultOptions),
+  // @ts-ignore
+  const opts = webpackPreprocessor.defaultOptions
+  // add React preset to be able to transpile JSX
+  opts.webpackOptions.module.rules[0].use[0].options.presets.push(
+    require.resolve('@babel/preset-react'),
   )
+  on('file:preprocessor', webpackPreprocessor(opts))
 }