feat: add component testing folder to react-scripts Babel transpile list

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-folder/cypress/plugins/index.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/support/index.js

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

examples/react-scripts-folder/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-react-scripts-folder",
+  "description": "Handles component tests from cypress folder",
+  "private": true,
+  "scripts": {
+    "test": "../../node_modules/.bin/cypress run",
+    "cy:open": "../../node_modules/.bin/cypress open"
+  },
+  "devDependencies": {
+    "cypress-react-unit-test": "file:../.."
+  }
+}

examples/react-scripts-folder/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/react-scripts-folder/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/react-scripts-folder/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

examples/react-scripts-folder/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/react-scripts-folder/src/App.js

@@ -0,0 +1,38 @@
+import React from 'react'
+// this CSS will be inlined ✅
+import './App.css'
+import logo from './logo.svg' // => "/__root/src/logo.svg"
+import cypressLogo from './cypress-logo-dark.png' // => "/__root/src/cypress-logo-dark.png"
+
+// large image will be transformed into
+// a different url static/media/vans.25e5784d.jpg
+// import giantImage from './vans.jpg'
+
+// we cannot load the image from direct url
+// import giantImage from '/__root/src/vans.jpg'
+// <img src={giantImage} alt="cypress-logo" />
+
+function App() {
+  return (
+    <div className="App">
+      <img src={cypressLogo} className="Cypress-log" />
+
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  )
+}
+
+export default App

examples/react-scripts-folder/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import App from './App'
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />)
+  const linkElement = getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})

examples/react-scripts-folder/src/Logo.cy-spec.js

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+// import SVG as ReactComponent
+import { ReactComponent as Logo } from './logo.svg'
+
+describe('Logo', () => {
+  it('imports SVG', () => {
+    mount(<Logo />)
+    cy.get('path').should('have.attr', 'd')
+  })
+})

examples/react-scripts-folder/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/react-scripts-folder/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister()