feat: specify custom paths to React and React DOM, close #66

Author: bahmutov

README.md

@@ -63,6 +63,21 @@ describe('HelloState component', () => {
 
 ![Unit testing React components](images/demo.png)
 
+## Configuration
+
+If your React and React DOM libraries are installed in non-standard paths (think monorepo scenario), you can tell this plugin where to find them. In `cypress.json` specify paths like this:
+
+```json
+{
+  "env": {
+    "cypress-react-unit-test": {
+      "react": "node_modules/react/umd/react.development.js",
+      "react-dom": "node_modules/react-dom/umd/react-dom.development.js"
+    }
+  }
+}
+```
+
 ## Transpilation
 
 How can we use features that require transpilation? Using [@cypress/webpack-preprocessor](https://github.com/cypress-io/cypress-webpack-preprocessor#readme). You can use [cypress/plugins/index.js](cypress/plugins/index.js) to configure any transpilation plugins you need.

cypress.json

@@ -3,5 +3,11 @@
   "viewportHeight": 100,
   "video": false,
   "projectId": "z9dxah",
-  "ignoreTestFiles": "*.css"
+  "ignoreTestFiles": "*.css",
+  "env": {
+    "cypress-react-unit-test": {
+      "react": "node_modules/react/umd/react.development.js",
+      "react-dom": "node_modules/react-dom/umd/react-dom.development.js"
+    }
+  }
 }

lib/index.ts

@@ -166,19 +166,6 @@ Cypress.Commands.overwrite('get', (originalFn, selector, options) => {
   }
 })
 
-const moduleNames = [
-  {
-    name: 'react',
-    type: 'file',
-    location: 'node_modules/react/umd/react.development.js'
-  },
-  {
-    name: 'react-dom',
-    type: 'file',
-    location: 'node_modules/react-dom/umd/react-dom.development.js'
-  }
-]
-
 /*
 Before All
 - Load and cache UMD modules specified in fixtures/modules.json
@@ -187,6 +174,21 @@ Before All
   Format: [{name, type, location}, ...]
 */
 before(() => {
+  const settings = Cypress.env('cypress-react-unit-test') || {}
+
+  const moduleNames = [
+    {
+      name: 'react',
+      type: 'file',
+      location: settings.react || 'node_modules/react/umd/react.development.js'
+    },
+    {
+      name: 'react-dom',
+      type: 'file',
+      location: settings['react-dom'] || 'node_modules/react-dom/umd/react-dom.development.js'
+    }
+  ]
+
   Cypress.modules = []
   cy.log('Initializing UMD module cache').then(() => {
     for (const module of moduleNames) {

package.json

@@ -9,6 +9,7 @@
     "build": "webpack -d",
     "cy:open": "cypress open",
     "transpile": "tsc",
+    "watch": "tsc -w",
     "pretest": "npm run lint && npm run transpile",
     "lint": "standard --verbose --fix *.js src cypress/integration",
     "semantic-release": "semantic-action pre && npm run transpile && npm publish && semantic-action post"