tgriesser / cypress-graphql-mock

Adds commands for executing a mocked GraphQL server using only the client
171 stars 43 forks source link

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

Open haf opened 5 years ago

haf commented 5 years ago
./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 commented 5 years ago

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 commented 5 years ago

This error looks like missing import configuration for .mjs files

haf commented 5 years ago

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 commented 5 years ago

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"
+
 cypress@3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-3.4.1.tgz#ca2e4e9864679da686c6a6189603efd409664c30"
@@ -6665,7 +6673,7 @@ graphql-toolkit@0.5.4:
     tslib "^1.9.3"
     valid-url "1.0.9"

-graphql-tools@4.0.5, graphql-tools@^4.0.0:
+graphql-tools@4.0.5, 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==