How to preprocess *spec.ts with @babel/preset-typescript

[matt-erhart]

After looking at examples and the browserify or webpack preprocessor docs, I could not get typescript syntax to work in a spec file without error. I tried way too many combos of config files and plugins. I think something like the following should work but it throws errors from ts syntax in a spec file:

const browserify = require("@cypress/browserify-preprocessor");
const presetTs = require.resolve("@babel/preset-typescript")
module.exports = on => {
  const options = browserify.defaultOptions
  options.browserifyOptions.transform[1][1].presets.push(presetTs)
  on("file:preprocessor", browserify(options));
};

What am I doing wrong here? Would be great to get some updated typescript examples as it's pretty rough to get going with ts specs now.

[bahmutov]

sure @matt-erhart can you specify exactly what the setup for your repo is? Versions of babel and plugins? The best would be for you to make a pull request to this repo after installing dependencies in the root (in this repo all dependencies are in the root) and making new examples subfolder with just your case. Even if it errors we can fix it and do the example that would work for you (and other people in your situation)

[matt-erhart]

https://github.com/matt-erhart/CodeExperiments

Working toward fast animation/interaction testing in that repo. Had to update cypress-app-watcher-preprocessor to get source changes to rerun tests, which I posted here: TheBrainFamily/cypress-app-watcher-preprocessor#2

[bahmutov]

I still don't see what you

• do step by step
• expect to see at each step
• what Cypress does at each step

Without easily reproducible step by step report, I am not sure I should spend any time investigating this issue, since there are a lot of other things I could spend time on.

[matt-erhart]

Goal is in the title, implementation details don't matter, and I'm just checking out cypress, so I'll not be spending time on it either. Maybe I'll try test cafe instead.

[wKovacs64]

@bahmutov - as far as I can tell being relatively new to TypeScript, there is a recent community interest towards using Babel's TypeScript preset (@babel/preset-typescript) to compile TypeScript code instead of tsc and only using tsc for type-checking. Getting Cypress working in an existing project configured this way can be painful because the Cypress documentation currently recommends tsify or ts-loader and they often require TS configuration (tsconfig.json) that conflicts with how the project is already configured and working. I believe this issue pertains to getting Cypress working without those plugins, and relying instead on the Babel preset (@matt-erhart can correct me if I'm mistaken).

I've tried exactly what Matt included in the code above, thinking that should work, but with no luck. I also tried toggling babelrc: true since my Babel config is already working outside of Cypress, but that didn't appear to do anything either.

Anecdotally: I have one project that seems to require tsify in the Cypress config while another one does not (both have .spec.ts and quite frankly, I'm not even sure why/how one is working without tsify but it does). One requires its own tsconfig.json in the cypress directory, one does not (due to global Jest type conflicts). Neither of them use tsconfig.json settings from the Cypress documentation. It was pretty rough to get started. Continuing this part of the discussion probably belongs somewhere other than this issue, though.