feat: allow importing fixture files in react-scripts tests (#290)

For example, from `src/App.spec.js` you can now do
```js
// we can directly import JSON fixture files
// from the local JSON file
import names from './names.json'
// try importing JavaScript
import { add } from '../cypress/fixtures/add'
// try importing JSON from fixtures folder
import fixtureNames from '../cypress/fixtures/names.json'
```

examples/react-scripts/README.md

@@ -2,9 +2,10 @@
 
 A typical project using `react-scripts` with components and matching component tests residing in the [src](src) folder.
 
-Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+Note: run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
 
 ```shell
+npm install
 npm run cy:open
 # or just run headless tests
 npm test

examples/react-scripts/cypress.json

@@ -1,5 +1,4 @@
 {
-  "fixturesFolder": false,
   "testFiles": "**/*cy-spec.js",
   "viewportWidth": 500,
   "viewportHeight": 800,

examples/react-scripts/cypress/fixtures/add.js

@@ -0,0 +1 @@
+export const add = (a, b) => a + b

examples/react-scripts/cypress/fixtures/names.json

@@ -0,0 +1 @@
+["joe", "mary"]

examples/react-scripts/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "test": "../../node_modules/.bin/cypress run",
     "cy:open": "../../node_modules/.bin/cypress open",
-    "check-coverage": "../../node_modules/.bin/check-coverage src/App.js src/calc.js src/Child.js",
-    "only-covered": "../../node_modules/.bin/only-covered src/App.js src/calc.js src/Child.js"
+    "check-coverage": "../../node_modules/.bin/check-coverage src/App.js src/calc.js src/Child.js cypress/fixtures/add.js",
+    "only-covered": "../../node_modules/.bin/only-covered src/App.js src/calc.js src/Child.js cypress/fixtures/add.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."

examples/react-scripts/src/fixture.cy-spec.js

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+// we can directly import JSON fixture files
+// from the local JSON file
+import names from './names.json'
+// try importing JavaScript
+import { add } from '../cypress/fixtures/add'
+// try importing JSON from fixtures folder
+import fixtureNames from '../cypress/fixtures/names.json'
+
+describe('fixtures', () => {
+  it('imports the array', () => {
+    expect(names).to.deep.equal(['joe', 'mary'])
+    expect(fixtureNames).to.deep.equal(['joe', 'mary'])
+    expect(add(2, 4)).to.equal(6)
+  })
+})

examples/react-scripts/src/names.json

@@ -0,0 +1 @@
+["joe", "mary"]

examples/sass-and-ts/README.md

@@ -4,10 +4,13 @@
 
 ![Sass test](images/sass.png)
 
-To run, need to install link first
+Note: run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
 
 ```
 npm install
+npm run cy:open
+# or just run headless tests
+npm test
 ```
 
 Note that Node Sass is a binary dependency, thus we need to run it using the same system version of Node as we installed. See [cypress.json](cypress.json) file.

package.json

@@ -126,7 +126,7 @@
     "@cypress/webpack-preprocessor": "5.4.1",
     "babel-plugin-istanbul": "6.0.0",
     "debug": "4.1.1",
-    "find-webpack": "1.13.0",
+    "find-webpack": "1.14.0",
     "mime-types": "2.1.26"
   },
   "release": {

plugins/cra-v3/file-preprocessor.js

@@ -33,10 +33,17 @@ module.exports = config => {
     config && config.env && config.env.coverage === false
   debug('coverage is disabled? %o', { coverageIsDisabled })
   debug('component test folder: %s', config.componentFolder)
+  debug('fixtures folder', config.fixturesFolder)
+
+  const additionalFolders = [config.componentFolder]
+  // user can disable fixtures folder, so check first
+  if (config.fixturesFolder) {
+    additionalFolders.push(config.fixturesFolder)
+  }
 
   const opts = {
     reactScripts: true,
-    addFolderToTranspile: config.componentFolder,
+    addFolderToTranspile: additionalFolders,
     coverage: !coverageIsDisabled,
     // insert Babel plugin to mock named imports
     looseModules: true,