[docs] Document jsm usage: Can't reexport the named export 'BREAK'

[haf]

./node_modules/graphql/index.mjs 42:0-48:205
Can't reexport the named export 'BREAK' from non EcmaScript module (only default export is available)
    at HarmonyExportImportedSpecifierDependency._getErrors (src/site/node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js:363:6)
    at HarmonyExportImportedSpecifierDependency.getErrors (src/site/node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js:343:16)
    at Compilation.reportDependencyErrorsAndWarnings (src/site/node_modules/webpack/lib/Compilation.js:1425:22)
    at hooks.finishModules.callAsync.err (src/site/node_modules/webpack/lib/Compilation.js:1221:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (src/site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (src/site/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (src/site/node_modules/webpack/lib/Compilation.js:1216:28)
    at hooks.make.callAsync.err (src/site/node_modules/webpack/lib/Compiler.js:662:17)
    at _err0 (eval at create (src/site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at _addModuleChain (src/site/node_modules/webpack/lib/Compilation.js:1148:12)
    at processModuleDependencies.err (src/site/node_modules/webpack/lib/Compilation.js:1060:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/cypress-graphql-mock/dist/index.js
 @ ./cypress/support/commands.js
 @ ./cypress/support/index.js
 @ multi ./cypress/support/index.js

When following the readme; 1) install, 2) add import to commands.js, 3) save a .ts test file.

[dmtrKovalenko]

Yeah, that's because by default cypress is not allowing import statements. Moreover you need to be sure that your config can import .mjs files that are used by graphql.

I am not sure about it. It needs only if you are importing GraphqlError from tests

[dmtrKovalenko]

This error looks like missing import configuration for .mjs files

[haf]

So how do I use this? There are no docs for how to use it, besides to use 'import "cypress-graphql-mock"'. What bits from your sample do I need to port into my code-base?

[haf]

Feel free to use for docs:

--- a/cypress/plugins/cy-ts-preprocessor.js
+++ b/cypress/plugins/cy-ts-preprocessor.js
@@ -1,17 +1,26 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const wp = require('@cypress/webpack-preprocessor')

 const webpackOptions = {
   resolve: {
-    extensions: ['.ts', '.js']
+    extensions: ['.ts', '.js', '.mjs', '.jsx', '.tsx', '.json']
   },
   module: {
     rules: [
       {
-        test: /\.ts$/,
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto",
+      },
+      {
+        test: /\.tsx?$/,
         exclude: [/node_modules/],
         use: [
           {
-            loader: 'ts-loader'
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            }
           }
         ]
       }

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index 3252828..fbbbbcc 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -1,13 +1,16 @@
 {
   "compilerOptions": {
     "strict": true,
+    "sourceMap": true,
     "baseUrl": "../node_modules",
     "target": "es5",
-    "lib": ["es5", "dom"],
+    "lib": ["es5", "es2016", "dom"],
     "types": ["cypress"],
-    "esModuleInterop": true
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "experimentalDecorators": true
   },
-  "include": [
-    "**/*.ts"
-  ]
+  "include": [ "**/*.ts" ]
 }

--- a/package.json
+++ b/package.json
@@ -163,6 +163,7 @@
     "babel-plugin-macros": "^2.6.1",
     "babel-plugin-module-resolver": "^3.2.0",
     "cypress": "3.4.1",
+    "cypress-graphql-mock": "^0.5.0-alpha.4",
     "eslint": "^6.1.0",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.6.1",

--- a/yarn.lock
+++ b/yarn.lock
@@ -4754,6 +4754,14 @@ cyclist@~0.2.2:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
   integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=

+cypress-graphql-mock@^0.5.0-alpha.4:
+  version "0.5.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/cypress-graphql-mock/-/cypress-graphql-mock-0.5.0-alpha.4.tgz#8871ba12e7beb1658a46caa5e0a26d788b9d1307"
+  integrity sha512-dgsczorpXRyG0Jak0N8RdNcyJv+9FPE1cS9UlKEx8g+JBABZF3mVDjpzksnWDvSAUHGrhD+nHFgtgqMXojQVAw==
+  dependencies:
+    graphql-tools "^4.0.3"
+    tslib "^1.9.3"
+
 [email protected]:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-3.4.1.tgz#ca2e4e9864679da686c6a6189603efd409664c30"
@@ -6665,7 +6673,7 @@ [email protected]:
     tslib "^1.9.3"
     valid-url "1.0.9"

-[email protected], graphql-tools@^4.0.0:
+[email protected], graphql-tools@^4.0.0, graphql-tools@^4.0.3:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-4.0.5.tgz#d2b41ee0a330bfef833e5cdae7e1f0b0d86b1754"
   integrity sha512-kQCh3IZsMqquDx7zfIGWBau42xe46gmqabwYkpPlCLIjcEY1XK+auP7iGRD9/205BPyoQdY8hT96MPpgERdC9Q==