TypeScript tests fail with ParseError: 'import' and 'export' may appear only with 'sourceType: module'

[KeithGillette]

Attempting to set up cypress-cucumber-preprocessor with add-typescript-to-cypress, I receive the following error when running a .feature test in Cypress whose step definitions are in a steps.ts file containing an import statement:

Error running plugin
The following error was thrown by a plugin. We've stopped running your tests because a plugin crashed.

...

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Running a separate spec.ts file containing an import using only @bahmutov/add-typescript-to-cypress in cypress/plugins/index.js works fine, but as soon as I add on('file:preprocessor', cucumber()); TypeScript tests containing import fail with the same error.

I see other open issues related to that same error but for ES6, not TypeScript (targeting ES5), so I am opening this case.

Versions:

• cypress@3.0.1
• cypress-cucumber-preprocessor@1.0.0
• @bahmutov/add-typescript-to-cypress@2.0.0
• node@8.11.2
• MacOS X 10.13.5

[lgandecki]

can you try using require instead of import?

[KeithGillette]

I tried require, but then I just get another parsing error from our use of TypeScript decorators:

 Error running plugin
The following error was thrown by a plugin. We've stopped running your tests because a plugin crashed.

Error: Parsing file /path/to/file: Unexpected character '@' (X:Y)

[lgandecki]

that's not good. any chance for a simple reproduction?

I would love to make this work with typescript. import might be tricky but everthing else should work.

[KeithGillette]

Do you want a Github repo, @lgandecki? Is there a sample base project on which to create a reproduction?

[lgandecki]

Yeah github repo would be great, the simplest thing you can create that replicates the problem so I can jump in and see what’s going on

[KeithGillette]

Please see my reproduction in my cypress-cucumber-typescript repository, @lgandecki. The add-typescript-to-cypress preprocessor works fine with TypeScript syntax, but as far as I can tell, cypress-cucumber-preprocessor ignores its output and attempts to interpret .ts files as JavaScript instead of transpiling them first.

[lgandecki]

Thanks, I will take a look Friday/Saturday :)

[lgandecki]

ok.. I spent a couple hours on this, and it is much more work than I initially thought... I will have to pass on it for now. Maybe once we/I need to use typescript I will be able to spend more time to get this to work.

If we were able to use babel7 with cypress (possibly soon), then we can use the plugin-transform-typescript in browserify to remove types from our output js file. At this point I can't think of a quick fix here. :-(

Thanks for the reproduction and sorry couldn't help.

If someone would like to pick it up - looks like the compile function in index.js produces a file with, possibly, valid typescript code. We would need to transpile it to javascript before passing it back to browserify..

[KeithGillette]

Thanks for investigating, @lgandecki. Until TypeScript is actually supported, perhaps the README should be updated to remove TypeScript instructions.

[sloosch]

Hi @KeithGillette,
we ran into the same problem during evaluation of cypress + gherkin due to this and #52, #51 and #44 (which can be overcome by using a beforeStep-Hook) i have created https://www.npmjs.com/package/gherkin-to-mocha which is a webpack loader which transforms gherkin files into a mocha test suite. By using https://github.com/cypress-io/cypress-webpack-preprocessor you can have feature files and typescript steps/hooks.
In the end we have decided against cypress because there is no support for Firefox and IE... anyway you may find the loader useful for your project.

[lgandecki]

@sloosch that looks really cool :-)
I need to evaluate it a bit closer.

Right now #52 is fixed, #51 should be finalized this week (we want to make sure that we get it right the first time around so we don't mess up peoples tests changing the tags API in the future), and having #52 done gets us a step closer towards using typescript.

About.. #44 - could you elaborate a bit? what do you mean by overcoming it with beforeStep-hook?
Do you have a way of showing the separate steps in Cypress? Without resetting state between them?

[sloosch]

@lgandecki
by having beforeStep/beforeScenario you can keep the state by calling
Cypress.Cookies.preserveOnce() in beforeStep and overwrite Cypress.LocalStorage.clear with a noop in beforeScenario.

Of course this is a hack and we are all waiting for the user-managable state PR cypress-io/cypress#686 :) But it will make your manager happy to see the steps when you are trying to argue against established solutions like cucumber-jvm + selenium.

[lgandecki]

@sloosch yeah, that sounds like a workable hack :-) I might try it.
Thanks for the input.

Btw, TypeScript works with 1.2.0!
I've added instructions to the readme in 1.2.1

@KeithGillette These are the only changes You'd have to make in your repro to get your example to work:

diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
index a63eb04..bde8a9a 100644
--- a/cypress/plugins/index.js
+++ b/cypress/plugins/index.js
@@ -9,14 +9,13 @@
 // ***********************************************************
 
 const cucumber = require('cypress-cucumber-preprocessor').default;
-const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
+const browserify = require('@cypress/browserify-preprocessor');
 
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-  on('file:preprocessor', cypressTypeScriptPreprocessor);
-  // on('file:preprocessor', cucumber());
+module.exports = (on) => {
+  on('file:preprocessor', file => {
+      browserify.defaultOptions.browserifyOptions.plugin.push(['tsify'])
+      return cucumber(
+        browserify.defaultOptions
+      )(file);
+  });
 };
diff --git a/cypress/support/step_definitions/facebook.ts b/cypress/support/step_definitions/facebook.ts
index 6c7dbe5..7c01c24 100644
--- a/cypress/support/step_definitions/facebook.ts
+++ b/cypress/support/step_definitions/facebook.ts
@@ -1,4 +1,4 @@
-const {given} = require('cypress-cucumber-preprocessor');
+declare const given;
 
 const url = 'https://facebook.com';
 
diff --git a/package.json b/package.json
index 2a979be..bfc37e2 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "@bahmutov/add-typescript-to-cypress": "^2.0.0",
     "@types/node": "^10.3.4",
     "cypress": "^3.0.1",
-    "cypress-cucumber-preprocessor": "^1.0.0",
+    "cypress-cucumber-preprocessor": "^1.2.1",
+    "tsify": "^4.0.0",
     "typescript": "^2.9.2"
   }
 }

[KeithGillette]

Thanks, @sloosch & @lgandecki!

I confirm that the diffs above allow use of some TypeScript with cypress-cucumber-preprocessor. However, I notice that one can't use TypeScript standard import or export statements. Any remedy for either of those shortcomings?

[decebal]

wow, what an ugly hack!! why would you want to infer 'given' instead of importing the type ?

import and export make the most sense in typescript, solving the problem reported here makes me want to think 🤔 that I don't want to use cypress, ever.