diff --git a/examples/react-scripts/README.md b/examples/react-scripts/README.md index f6766d6b..fe56ee39 100644 --- a/examples/react-scripts/README.md +++ b/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 diff --git a/examples/react-scripts/cypress.json b/examples/react-scripts/cypress.json index 528d7572..43076c62 100644 --- a/examples/react-scripts/cypress.json +++ b/examples/react-scripts/cypress.json @@ -1,5 +1,4 @@ { - "fixturesFolder": false, "testFiles": "**/*cy-spec.js", "viewportWidth": 500, "viewportHeight": 800, diff --git a/examples/react-scripts/cypress/fixtures/add.js b/examples/react-scripts/cypress/fixtures/add.js new file mode 100644 index 00000000..6e31ef4b --- /dev/null +++ b/examples/react-scripts/cypress/fixtures/add.js @@ -0,0 +1 @@ +export const add = (a, b) => a + b diff --git a/examples/react-scripts/cypress/fixtures/names.json b/examples/react-scripts/cypress/fixtures/names.json new file mode 100644 index 00000000..23592b50 --- /dev/null +++ b/examples/react-scripts/cypress/fixtures/names.json @@ -0,0 +1 @@ +["joe", "mary"] diff --git a/examples/react-scripts/package.json b/examples/react-scripts/package.json index a3248d86..0e47ecb1 100644 --- a/examples/react-scripts/package.json +++ b/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:../.." diff --git a/examples/react-scripts/src/fixture.cy-spec.js b/examples/react-scripts/src/fixture.cy-spec.js new file mode 100644 index 00000000..c7d0ed9a --- /dev/null +++ b/examples/react-scripts/src/fixture.cy-spec.js @@ -0,0 +1,16 @@ +/// +// 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) + }) +}) diff --git a/examples/react-scripts/src/names.json b/examples/react-scripts/src/names.json new file mode 100644 index 00000000..23592b50 --- /dev/null +++ b/examples/react-scripts/src/names.json @@ -0,0 +1 @@ +["joe", "mary"] diff --git a/examples/sass-and-ts/README.md b/examples/sass-and-ts/README.md index 4ecdd358..966ca535 100644 --- a/examples/sass-and-ts/README.md +++ b/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. diff --git a/package-lock.json b/package-lock.json index 838054ba..018c8913 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14119,9 +14119,9 @@ } }, "find-webpack": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/find-webpack/-/find-webpack-1.13.0.tgz", - "integrity": "sha512-L/pfCPR6E03l3+MTZtVw8N9G2nTGM5ZTZpStxgS+lHNI9QrMNdtAFflfLCZAU7olcOiL4eUsFTpTEoRgSsMNxA==", + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/find-webpack/-/find-webpack-1.14.0.tgz", + "integrity": "sha512-47qE/GEhyy1MmGm7fWvcbvOBfNf5RHM85Ywe9tQp9t3D1ZKXDecrv68ou6FwDzqGZBc3jXSh3t9tf6o1eTvYpw==", "requires": { "debug": "4.1.1", "find-yarn-workspace-root": "1.2.1", diff --git a/package.json b/package.json index 4b453c4b..eac55f3c 100644 --- a/package.json +++ b/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": { diff --git a/plugins/cra-v3/file-preprocessor.js b/plugins/cra-v3/file-preprocessor.js index da01108b..d415649e 100644 --- a/plugins/cra-v3/file-preprocessor.js +++ b/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,