feat: add component testing folder to react-scripts Babel transpile list (#186)

If you use `react-scripts`, you can have your component tests in `src` or in any other folder like `cypress/component` and they will be transpiled using the same settings.

Author: bahmutov

README.md

@@ -2,6 +2,8 @@
 
 > A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) E2E test runner **v4.5.0+**
 
+**Jump to:** [Comparison](#comparison), [Install](#install), Examples: [basic](#basic-examples), [advanced](#advanced-examples), [full](#full-examples), [external](#external-examples), [Options](#options), [Code coverage](#code-coverage), [Visual testing](#visual-testing), [Commoon problems](#common-problems)
+
 ## TLDR
 
 - What is this? This package allows you to use [Cypress](https://www.cypress.io/) test runner to unit test your React components with zero effort. Here is a typical component testing, notice there is not external URL shown, since it is mounting the component directly.
@@ -64,8 +66,6 @@ module.exports = (on, config) => {
 
 See [Recipes](./docs/recipes.md) for more examples.
 
-**⚠️ Note:** when using `react-scripts` you must place component specs in the `src` folder too, otherwise they won't be transpiled correctly.
-
 3. ⚠️ Turn the experimental component support on in your `cypress.json`. You can also specify where component spec files are located. For example, to have them located in `src` folder use:
 
 ```json
@@ -145,7 +145,18 @@ Spec | Description
 [react-bootstrap](cypress/component/advanced/react-bootstrap) | Confirms [react-bootstrap](https://react-bootstrap.github.io/) components are working
 <!-- prettier-ignore-end -->
 
-### Large examples
+### Full examples
+
+We have several subfolders in [examples](examples) folder that have complete projects with just their dependencies installed in the root folder.
+
+<!-- prettier-ignore-start -->
+Folder Name | Description
+--- | ---
+[react-scripts](examples/react-scripts) | A project using `react-scripts` with component tests in `src` folder
+[react-scripts-folder](examples/react-scripts-folder) | A project using `react-scripts` with component tests in `cypress/component`
+<!-- prettier-ignore-end -->
+
+### External examples
 
 This way of component testing has been verified in a number of forked 3rd party projects.
 

circle.yml

@@ -33,6 +33,20 @@ workflows:
           command: npm test
           store_artifacts: true
 
+      - cypress/run:
+          # react-scripts example with component tests not in "src" folder
+          # but in "cypress/component" folder
+          name: Example Component Folder
+          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/react-scripts-folder
+          command: npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Test
           parallelism: 4
@@ -63,6 +77,7 @@ workflows:
             - Install
             - Test
             - Example React Scripts
+            - Example Component Folder
           install-command: echo 'Already installed'
           verify-command: echo 'Already verified'
           no-workspace: true

examples/react-scripts-folder/.npmrc

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

examples/react-scripts-folder/README.md

@@ -0,0 +1,13 @@
+# example: react-scripts-folder
+
+A typical project using `react-scripts` with components in the [src](src) folder and component tests inside [cypress/component](cypress/component) folder. Cypress automatically finds Webpack settings used by `react-scripts` and inserts the component folder name allowing to transpile the component specs the same way the `src` code is transpiled.
+
+Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+
+```shell
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
+![App test](images/app-test.png)

examples/react-scripts-folder/cypress.json

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

examples/react-scripts-folder/cypress/component/App.cy-spec.js

@@ -0,0 +1,18 @@
+/// <reference types="cypress" />
+// compare to App.test.js
+import React from 'react'
+import App from '../../src/App'
+import { mount } from 'cypress-react-unit-test'
+
+describe('App', () => {
+  it('renders learn react link', () => {
+    expect(1).to.equal(1)
+    mount(<App />)
+    cy.contains(/Learn React/)
+  })
+
+  it('renders inline component', () => {
+    mount(<div>JSX</div>)
+    cy.contains('JSX')
+  })
+})

examples/react-scripts/cypress/integration/spec.js renamed to examples/react-scripts-folder/cypress/integration/cy-spec.js

@@ -0,0 +1,7 @@
+const preprocessor = require('../../../../plugins/react-scripts')
+module.exports = (on, config) => {
+  preprocessor(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}

examples/react-scripts-folder/cypress/plugins/index.js

@@ -0,0 +1,2 @@
+require('cypress-react-unit-test/support')
+require('@cypress/code-coverage/support')