From d5d6b3f7434b63c6d5c4121dd714c55e58b863e5 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Fri, 12 Jun 2020 17:38:42 -0400 Subject: [PATCH 1/4] add failing test loading fixture file --- examples/react-scripts/cypress.json | 1 - examples/react-scripts/cypress/fixtures/names.json | 1 + examples/react-scripts/src/fixture.cy-spec.js | 13 +++++++++++++ examples/react-scripts/src/names.json | 1 + plugins/cra-v3/file-preprocessor.js | 9 ++++++++- 5 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 examples/react-scripts/cypress/fixtures/names.json create mode 100644 examples/react-scripts/src/fixture.cy-spec.js create mode 100644 examples/react-scripts/src/names.json 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/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/src/fixture.cy-spec.js b/examples/react-scripts/src/fixture.cy-spec.js new file mode 100644 index 00000000..05ca4e5e --- /dev/null +++ b/examples/react-scripts/src/fixture.cy-spec.js @@ -0,0 +1,13 @@ +/// +// we can directly import JSON fixture files +// from the local JSON file +import names from './names.json' +// and from the 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']) + }) +}) 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/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, From e120f418ca6c83b59484de737bb16ff6a03d6b67 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Fri, 12 Jun 2020 18:02:30 -0400 Subject: [PATCH 2/4] play with loading code --- examples/react-scripts/cypress/fixtures/add.js | 1 + examples/react-scripts/src/fixture.cy-spec.js | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) create mode 100644 examples/react-scripts/cypress/fixtures/add.js 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/src/fixture.cy-spec.js b/examples/react-scripts/src/fixture.cy-spec.js index 05ca4e5e..bc1f2343 100644 --- a/examples/react-scripts/src/fixture.cy-spec.js +++ b/examples/react-scripts/src/fixture.cy-spec.js @@ -2,12 +2,14 @@ // we can directly import JSON fixture files // from the local JSON file import names from './names.json' -// and from the fixtures folder -import fixtureNames from '../cypress/fixtures/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(fixtureNames).to.deep.equal(['joe', 'mary']) }) }) From 1348dfbf2434d51b5907b18632e43758ad113ad4 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Sat, 13 Jun 2020 08:33:26 -0400 Subject: [PATCH 3/4] load fixtures correctly --- examples/react-scripts/README.md | 3 ++- examples/react-scripts/src/fixture.cy-spec.js | 5 +++-- examples/sass-and-ts/README.md | 5 ++++- package-lock.json | 6 +++--- package.json | 2 +- 5 files changed, 13 insertions(+), 8 deletions(-) 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/src/fixture.cy-spec.js b/examples/react-scripts/src/fixture.cy-spec.js index bc1f2343..c7d0ed9a 100644 --- a/examples/react-scripts/src/fixture.cy-spec.js +++ b/examples/react-scripts/src/fixture.cy-spec.js @@ -5,11 +5,12 @@ 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' +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(fixtureNames).to.deep.equal(['joe', 'mary']) + expect(add(2, 4)).to.equal(6) }) }) 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": { From 8079dc801e1a4014b5feb3b8c08e77e80b49bdb8 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Sat, 13 Jun 2020 08:44:20 -0400 Subject: [PATCH 4/4] add new file to expected code coverage --- examples/react-scripts/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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:../.."