trying to work around exports problems

Author: bahmutov

examples/using-babel/.babelrc

@@ -1,24 +1,27 @@
 {
+  "sourceType": "unambiguous",
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react",
-    {
-      "plugins": ["@babel/plugin-proposal-class-properties"]
-    },
+    // {
+    //   "plugins": ["@babel/plugin-proposal-class-properties"]
+    // },
     "@emotion/babel-preset-css-prop"
   ],
+  "plugins": ["@babel/plugin-proposal-class-properties"],
   "env": {
     // TODO switch this to "development" name
-    "test": {
+    "development": {
       "plugins": [
         // during Cypress tests we want to instrument source code
         // to get code coverage from tests
-        "babel-plugin-istanbul",
+        // "babel-plugin-istanbul"
         // we also want to export ES6 modules as objects
         // to allow mocking named imports
         [
           "@babel/plugin-transform-modules-commonjs",
           {
+            "allowCommonJSExports": true,
             "loose": true
           }
         ]

examples/using-babel/src/Component.jsx

@@ -0,0 +1,10 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { getRandomNumber } from './calc'
+
+const Component = () => {
+  const n = getRandomNumber()
+  return <div className="random">{n}</div>
+}
+
+export default Component

examples/using-babel/src/Component.spec.js

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import Component from './Component.jsx'
+import * as calc from './calc'
+
+describe('Component', () => {
+  it('mocks call from the component', () => {
+    cy.stub(calc, 'getRandomNumber')
+      .as('lucky')
+      .returns(777)
+    mount(<Component />)
+  })
+})

examples/using-babel/src/ComponentReq.jsx

@@ -0,0 +1,10 @@
+/// <reference types="cypress" />
+const React = require('react')
+const { getRandomNumber } = require('./calc')
+
+const Component = () => {
+  const n = getRandomNumber()
+  return <div className="random">{n}</div>
+}
+
+module.exports = Component

examples/using-babel/src/ComponentReq.spec.js

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+const React = require('react')
+const { mount } = require('cypress-react-unit-test')
+const Component = require('./ComponentReq.jsx')
+const calc = require('./calc')
+
+describe('Component', () => {
+  it('mocks call from the component', () => {
+    cy.stub(calc, 'getRandomNumber')
+      .as('lucky')
+      .returns(777)
+    mount(<Component />)
+  })
+})

examples/using-babel/src/Mock.spec.js

@@ -6,7 +6,7 @@ import * as calc from './calc'
 
 describe('Mocking', () => {
   // https://github.com/bahmutov/cypress-react-unit-test/issues/266
-  it.skip('mocks import used by the Post', () => {
+  it('mocks import used by the Post', () => {
     cy.stub(calc, 'getRandomNumber')
       .as('lucky')
       .returns(777)

examples/using-babel/src/plain.spec.js

@@ -0,0 +1,14 @@
+import * as calc from './calc'
+
+// checking mocked value if there is no React involved
+describe('plain', () => {
+  it('mocks es6 import', () => {
+    cy.stub(calc, 'getRandomNumber')
+      .as('lucky')
+      .returns(777)
+
+    cy.then(() => {
+      return calc.getRandomNumber()
+    }).should('equal', 777)
+  })
+})

package-lock.json

@@ -121,7 +121,7 @@
     "url": "https://github.com/bahmutov/cypress-react-unit-test.git"
   },
   "dependencies": {
-    "@babel/plugin-transform-modules-commonjs": "7.7.5",
+    "@babel/plugin-transform-modules-commonjs": "7.10.1",
     "@cypress/code-coverage": "3.8.1",
     "@cypress/webpack-preprocessor": "5.4.1",
     "babel-plugin-istanbul": "6.0.0",

package.json

@@ -59,6 +59,7 @@ module.exports = config => {
 
   const wpPreprocessorOptions = webpackPreprocessor.defaultOptions
   enableBabelrc(wpPreprocessorOptions.webpackOptions)
+  debug('webpack options %o', wpPreprocessorOptions.webpackOptions)
 
   addImageRedirect(wpPreprocessorOptions.webpackOptions)