bahmutov / add-typescript-to-cypress

Quickly adds TypeScript spec support to Cypress

@bahmutov/add-typescript-to-cypress

Quickly adds TypeScript spec support to Cypress

Why

Cypress is awesome, but does not come with TypeScript support right out of the box. Instead you need to install either Cypress webpack preprocessor or Cypress browserify preprocessor and configure them to transpile TypeScript spec files.

Which is too much hustle. With this module you just need to execute regular npm install command and you can write TypeScript spec files right away.

note overwrites existing cypress/plugins/index.js file once. In other installs looks for file cypress/plugins/cy-ts-preprocessor.js to avoid overwriting.

Install

After install Cypress (version 1.x) and opening it once to scaffold the projects:

npm install --save-dev @bahmutov/add-typescript-to-cypress

This should create cypress/plugins/index.js that uses webpack preprocessor and ts-loader to transpile .ts files.

note this module does NOT install TypeScript module, but lists it as a peerDependency. If your project does not have typescript yet, install it with npm i -D typescript.

note if there is no root tsconfig.json, empty file will be created, otherwise ts-loader crashes.

Use

Just start writing *.ts spec and supporting files and it should work. If the types are still not found, add to the top of the spec file the following line

/// <reference types="Cypress" />

See this in action

Debug

Install this package with environment variable DEBUG=add-typescript-to-cypress

Eject

If you want to uninstall this module after installing it once, then you need to still have the dependencies referenced from src/cy-ts-preprocessor.js:

• @cypress/webpack-preprocessor (and its peer dependencies)
• ts-loader (and its peer dependencies)

You can install them with

npm i -D @cypress/webpack-preprocessor ts-loader

and then uninstall this package.

Small print

Author: Gleb Bahmutov <[email protected]> © 2017

• @bahmutov
• glebbahmutov.com
• blog

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet / open issue on Github

MIT License

Copyright (c) 2017 Gleb Bahmutov <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

add-typescript-to-cypress's Issues

README disagrees with current Cypress documentation after Cypress 4.4.0

The README says:

"Cypress is awesome, but does not come with TypeScript support right out of the box. Instead you need to install either Cypress webpack preprocessor or Cypress browserify preprocessor and configure them to transpile TypeScript spec files."

---

The Cypress documentation page Tooling > TypeScript > History:

4.4.0 Added support for TypeScript without needing your own transpilation through preprocessors.

---

So the README information is out of date and should be corrected.

Create tsconfig.json if does not exist

For projects that just start adding TypeScript, creating default tsconfig.json would be nice. It can be very simple

{
  "include": [
    "node_modules/cypress",
    "cypress/*/*.ts"
  ]
}

npm install issue

Is there a way to skip opening cypress once before installing the types?
What I need to do is:
npm install
tsc
npm test
And it should be in CI pipeline but npm install fails because

Please scaffold Cypress folder by opening Cypress once and then installing this package again
Do you have a solution for that?

Thanks!

error on installation if cypress folder is not found

• version 1.1.0
• platform macOS 10.13.2

I get an error on installation

> @bahmutov/[email protected] postinstall /Users/martin/_dev/angular/cypress/cypress-test/node_modules/@bahmutov/add-typescript-to-cypress
> node src/add-plugin.js

adding TypeScript plugin to Cypress
current folder /Users/martin/_dev/angular/cypress/cypress-test/node_modules/@bahmutov/add-typescript-to-cypress
cp /Users/martin/_dev/angular/cypress/cypress-test/node_modules/@bahmutov/add-typescript-to-cypress/src/plugin.js /Users/martin/_dev/angular/cypress/cypress-test/cypress/plugins/index.js
/Users/martin/_dev/angular/cypress/cypress-test/node_modules/shelljs/src/common.js:417
      if (config.fatal) throw e;
                        ^

Error: cp: copyFileSync: could not write to dest file (code=ENOENT):/Users/martin/_dev/angular/cypress/cypress-test/cypress/plugins/index.js
    at Object.error (/Users/martin/_dev/angular/cypress/cypress-test/node_modules/shelljs/src/common.js:128:27)
    at copyFileSync (/Users/martin/_dev/angular/cypress/cypress-test/node_modules/shelljs/src/cp.js:66:14)
    at /Users/martin/_dev/angular/cypress/cypress-test/node_modules/shelljs/src/cp.js:293:7
    at Array.forEach (<anonymous>)
    at Object._cp (/Users/martin/_dev/angular/cypress/cypress-test/node_modules/shelljs/src/cp.js:238:11)
    at Object.cp (/Users/martin/_dev/angular/cypress/cypress-test/node_modules/shelljs/src/common.js:399:25)
    at addPluginFile (/Users/martin/_dev/angular/cypress/cypress-test/node_modules/@bahmutov/add-typescript-to-cypress/src/add-plugin.js:22:11)
    at Object.<anonymous> (/Users/martin/_dev/angular/cypress/cypress-test/node_modules/@bahmutov/add-typescript-to-cypress/src/add-plugin.js:39:3)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @bahmutov/[email protected] postinstall: `node src/add-plugin.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @bahmutov/[email protected] postinstall script.

set up renovate app

to keep dependencies up to date

need end-to-end test

To make sure we are not accidentally breaking this module

"webpack module missing" error when adding this module to project

I added @bahmutov/add-typescript-to-cypress ^2.1.2 to a fresh project with cypress ^4.9.0

$ uname -a
Linux manjaro 4.19.126-1-MANJARO #1 SMP Wed Jun 3 22:30:22 UTC 2020 x86_64 GNU/Linux

I ran a simple test that uses a page object I created:

/// <reference types="cypress" />
import CountersPracticePage from "../components/CountersPracticePage";
import Role from 'data/Role'

context('counters-practice', () => {
    it.only('evaluates pick', () => {
        const page = new CountersPracticePage();
        page.open()
        page.selectRole(Role.Support)
        page.locator.approveButton().click()
    })
})

As a result of running that test, cypress shows the following error message:

/usr/bin/node /usr/lib/node_modules/npm/bin/npx-cli.js cypress run --no-exit --headed --reporter /home/chriego/Projects/personal/projects/cypress/node_modules/cypress-intellij-reporter --spec /home/chriego/Projects/personal/project/cypress/cypress/integration/counters-practice.spec.js
The plugins file is missing or invalid.

Your `pluginsFile` is set to `/home/chriego/Projects/personal/project/cypress/cypress/plugins/index.js`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js` or `.coffee` file.

Or you might have renamed the extension of your `pluginsFile` to `.ts`. If that's the case, restart the test runner.

Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.

 Error: Cannot find module 'webpack'
Require stack:
- /home/chriego/Projects/personal/project/cypress/node_modules/@cypress/webpack-preprocessor/index.js
- /home/chriego/Projects/personal/project/cypress/cypress/plugins/cy-ts-preprocessor.js
- /home/chriego/Projects/personal/project/cypress/cypress/plugins/index.js
- /home/chriego/.cache/Cypress/4.9.0/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js
- /home/chriego/.cache/Cypress/4.9.0/Cypress/resources/app/packages/server/lib/plugins/child/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:798:15)
    at Module._load (internal/modules/cjs/loader.js:691:27)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:853:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/chriego/Projects/personal/project/cypress/node_modules/@cypress/webpack-preprocessor/index.js:2:17)
    at Module._compile (internal/modules/cjs/loader.js:968:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:986:10)
    at Module.load (internal/modules/cjs/loader.js:816:32)
    at Module._load (internal/modules/cjs/loader.js:728:14)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:853:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/chriego/Projects/personal/project/cypress/cypress/plugins/cy-ts-preprocessor.js:1:12)

My tsconfig.json (I use tsconfig in project root instead of the one created by @bahmutov/add-typescript-to-cypress)

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom", "esnext"],
    "types": ["cypress"]
  },
  "include": [
    "**/*.ts"
  ],
  "@data/*": [
    "../backend/src/data/*"
  ]
}

My package.json

{
  "name": "tests",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cypress": "^4.9.0"
  },
  "devDependencies": {
    "@bahmutov/add-typescript-to-cypress": "^2.1.2",
    "cypress-intellij-reporter": "0.0.4"
  }
}

shelljs dependancy high vulnerability reported by npm audit

Thank you for taking time to open a new issue. Please answer a few questions to help us fix it faster. You can delete text that is irrelevant to the issue.

Is this a bug report or a feature request?

If this is a bug report, please provide as much info as possible

• version
• platform
• expected behavior
• actual behavior

If this is a new feature request, please describe it below
npm audit is notifying of a high vulnerability with shelljs. Looking at the diff, it looks like a relatively straight forward change to bump the version of shelljs from 0.8.3 to 0.8.5 in package.json

Don't overwrite a modified plugin file

@bahmutov, how could we update this so that it doesn't overwrite the customized plugin file in my repo? Or once I've included this module's code in plugin.js should I remove it from the dependencies?

I'm trying to use it in a team environment, and whenever a team member clones the repo and does npm install they have to reset the changes to plugin.js.

Any thoughts?

Can we use path aliases with TypeScript

like this example https://dev.to/lars124/path-aliases-with-typescript-in-nodejs-4353

instead of this

import { User } from '../../user/model';
import { Article } from '../../article/model';

import { Cache } from '../../../../cache';
import { MongoDB } from '../../../../mongodb';

you can use

import { User } from '@modules/user/model';
import { Article } from '@modules/article/model';

import { Cache } from '@services/cache';
import { MongoDB } from '@services/mongodb';

Add support for Yarn PnP

Thank you for taking time to open a new issue. Please answer a few questions to help us fix it faster. You can delete text that is irrelevant to the issue.

Is this a bug report or a feature request?

Feature request

If this is a bug report, please provide as much info as possible

• version
• platform
• expected behavior
• actual behavior

If this is a new feature request, please describe it below

Add support for Yarn PnP. Currently it breaks because the post-install script uses a relative directory to check for the cypress folder:

const root = path.join(process.cwd(), '..', '..', '..')

With Yarn PnP it does not use the node_modules folder. The folder it installs in is a path like this:

.yarn/unplugged/@bahmutov-add-typescript-to-cypress-virtual-782a3ce2bf/node_modules/@bahmutov/add-typescript-to-cypress/src/add-plugin.js

import json cause the Cypress to crash

Hi,
I want to assert that the visual content match to the data from the server.
For that i made a few things:

1. Import a json file (import assetsMock from '../../fixtures/assets.json')
2. Use it as the response of cy.route
3. Asset that some DOM element contain the same data

I just added this package in order to write test using typescript.
Now - the import statement cause Cypress to crash with this error:

Error running plugin

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

./cypress/integration/infrastructure/assets.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: Debug Failure. File C:\cypress_typescript_test\cypress\fixtures\assets.json has unknown extension.
at Object.extensionFromPath (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:4694:15)
at C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:78448:46
at Array.map ()
at resolveModuleNamesWorker (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:78442:195)
at resolveModuleNamesReusingOldState (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:78703:19)
at processImportedModules (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:79804:35)
at findSourceFile (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:79696:17)
at C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:79567:85
at getSourceFileFromReferenceWorker (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:79534:34)
at processSourceFile (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:79567:13)
at processRootFile (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:79414:13)
at C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:78497:60
at Object.forEach (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:1792:30)
at Object.createProgram (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:78497:16)
at synchronizeHostData (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:107641:26)
at Object.getProgram (C:\cypress_typescript_test\node_modules\typescript\lib\typescript.js:107723:13)
at Object.ensureProgram (C:\cypress_typescript_test\node_modules\ts-loader\dist\utils.js:177:41)
at Object.getEmitOutput (C:\cypress_typescript_test\node_modules\ts-loader\dist\instances.js:178:29)
at getEmit (C:\cypress_typescript_test\node_modules\ts-loader\dist\index.js:242:37)
at successLoader (C:\cypress_typescript_test\node_modules\ts-loader\dist\index.js:67:15)
at Object.loader (C:\cypress_typescript_test\node_modules\ts-loader\dist\index.js:22:12)
@ multi ./cypress/integration/infrastructure/assets.ts main[0]

Please help

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency cypress to v13
• chore(deps): update dependency mocha to v10
• chore(deps): update dependency standard to v17
• chore(deps): update dependency typescript to v5
• chore(deps): update dependency webpack to v5
• fix(deps): update dependency @cypress/webpack-preprocessor to v6
• fix(deps): update dependency chalk to v5
• fix(deps): update dependency ts-loader to v9
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• fix(deps): update dependency @cypress/webpack-preprocessor to v4.1.5
• fix(deps): update dependency shelljs to v0.8.5
• chore(deps): update dependency ban-sensitive-files to v1.10.2
• chore(deps): update dependency cypress to v3.8.3
• chore(deps): update dependency dependency-check to v3.4.1
• chore(deps): update dependency mocha to v6.2.3
• chore(deps): update dependency semantic-release to v15.14.0
• chore(deps): update dependency typescript to v3.9.10
• chore(deps): update dependency webpack to v4.47.0
• fix(deps): update dependency debug to v4.3.4
• chore(deps): update dependency dependency-check to v4
• chore(deps): update dependency license-checker to v25
• chore(deps): update dependency prettier-standard to v16

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency semantic-release to v23
• chore(deps): lock file maintenance

Detected dependencies

npm

e2e/package.json

• cypress 3.4.0
• typescript 3.5.3
• webpack 4.36.0

package.json

• @cypress/webpack-preprocessor 4.1.0
• am-i-a-dependency 1.1.2
• chalk 2.4.2
• debug 4.1.1
• shelljs 0.8.3
• terminal-banner 1.1.0
• ts-loader 5.4.5
• ban-sensitive-files 1.9.2
• dependency-check 3.3.0
• deps-ok 1.4.1
• dont-crack 1.2.1
• git-issues 1.3.1
• license-checker 16.0.0
• mocha 6.1.4
• nsp 3.2.1
• pre-git 3.17.1
• prettier-standard 9.1.1
• semantic-release 15.13.18
• standard 12.0.1
• typescript 3.5.3
• webpack 4.36.0
• typescript *
• node >=6

---

• Check this box to trigger a request for Renovate to run again on this repository

Yarn Warning: Browserslist 2 could fail

Dependency	Version
add-typescript-to-cypress	2.0.0
MacOS	10.14.3
Yarn	1.13.0

Bug Description

I'm getting the following console warning when installing this package with Yarn:

warning @bahmutov/add-typescript-to-cypress > @cypress/webpack-preprocessor > babel-preset-env > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

---

Not sure what the solution is but I'd be happy to investigate. Starting here in case someone already knows something about it.

docker build failed

> @bahmutov/[email protected] postinstall /node_modules/@bahmutov/add-typescript-to-cypress
> node src/add-plugin.js

⚠️ Cannot find "cypress" folder in /
Please scaffold Cypress folder by opening Cypress once
and then installing this package again
See: https://github.com/bahmutov/add-typescript-to-cypress/issues/3

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @bahmutov/[email protected] postinstall: `node src/add-plugin.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @bahmutov/[email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Docker build issues with add-typescript-to-cypress

Here is my github repo: https://github.com/dereklin/nrwl-nx-workspace-demo/tree/add-typescript-to-cypress

The branch is add-typescript-to-cypress

When I do npm i and then npm run build:app1, everything works fine.

When I do docker build -t nrwl-nx-workspace-demo:app1 .

I get these error messages:

> @bahmutov/[email protected] postinstall /app/node_modules/@bahmutov/add-typescript-to-cypress
> node src/add-plugin.js

(node:5) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
⚠️ Cannot find "cypress" folder in /app
Please scaffold Cypress folder by opening Cypress once
and then installing this package again
See: https://github.com/bahmutov/add-typescript-to-cypress/issues/3

Here is my Dockerfile:

# Stage 0, based on Node.js, to build and compile Angular
#docker build -t nrwl-nx-workspace-demo:app1 .
#docker run -d -p 80:80 nrwl-nx-workspace-demo:app1
FROM node:8.11.1 as node
WORKDIR /app
COPY package.json /app/
RUN npm install
COPY ./ /app/
ARG env=prod
RUN npm run build:app1

# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:alpine
COPY --from=node /app/dist/apps/app1/ /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

When I remove

"@bahmutov/add-typescript-to-cypress": "2.0.0",

from package.json, my docker build works

Which is the best way to integrate with @cypress/code-coverage?

This is a feature request mainly.

I am trying to integrate @cypress/code-coverage in my project where I am already using @bahmutov/add-typescript-to-cypress plugin.

I have tried following the official documentation and some examples like https://github.com/skylock/cypress-angular-coverage-example but without much success. I always get the error:

Error: The handler for the event `task` must be an object
    at createErrorResult (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\validate_event.js:3:71)
    at validate (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\validate_event.js:7:46)
    at isObject (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\validate_event.js:15:10)
    at validateEvent (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\validate_event.js:42:10)
    at register (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:35:32)
    at module.exports (C:\Projects\ppo-frontend\cypress\plugins\index.js:5:3)
    at C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:75:12
    at tryCatcher (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\util.js:16:23)
    at Function.Promise.attempt.Promise.try (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\method.js:39:29)
    at load (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:72:7)
    at EventEmitter.<anonymous> (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:196:5)
    at EventEmitter.emit (events.js:210:5)
    at process.<anonymous> (C:\Users\sanjimen\AppData\Local\Cypress\Cache\4.3.0\Cypress\resources\app\packages\server\lib\plugins\util.js:25:29)
    at process.emit (events.js:210:5)
    at emit (internal/child_process.js:876:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)

How should I do?

Thanks!

Create E2E test

• create new project
• scaffold (when cypress init becomes available cypress-io/cypress#619)
• install this dependency
• put a simple test into TS spec file
• run Cypress
• run typescript check "lint": "tsc --pretty --noEmit cypress/**/*.ts"

When installing via pnpm I get Cannot find "cypress" folder

Error:

@bahmutov/add-typescript-to-cypress postinstall$ node src/add-plugin.js
Cannot find "cypress" folder in C:\baps\react_all\tmd-test-webpack\node_modules.pnpm@[email protected][email protected]+webpac
│ Please scaffold Cypress folder by opening Cypress once
│ and then installing this package again
│ See: #3

- version -

• Node 14.15.0
• pnpm 6.16.1
• npm 7,21.1
• windows 10

instal
pnpm i bahmutov/add-typescript-to-cypress -D

- expected behavior

• to install

- actual behavior

• not installing

I also tried removing

• file cypress.json
  -folder /cypress

and running cypress open
pnpm run cypress open

then trying to install, and still fails

Performance suffers from having many .spec.ts files

Not sure if this belongs here or in @cypress/webpack-preprocessor;

Since each Typescript file is compiled separately, memory usage and compile time grows quickly when using many .spec.ts files. Moving all tests into one file (or importing all spec files into one) makes a huge difference.

In our project, total run time of cypress run is 60 seconds with one .spec.ts file, 90 seconds when the same tests are split into 8 files. Memory usage is over 1 GB with 8 different files, with one file it stays at 350 MB.

Moving all tests into one file is obviously not ideal, importing multiple files into one is slightly better but still not great. Perhaps this could be done behind the scenes by the preprocessor?

Can we uninstall this after the initial run?

After you've got everything situated--can't we remove this dependency? Maybe I'm missing something but it doesn't look like anything outside of the init is dependent on this package.

add renovate and start upgrading dependencies

Lots of old dependencies here

Not compatible with newer ts-loader

Thank you for taking time to open a new issue. Please answer a few questions to help us fix it faster. You can delete text that is irrelevant to the issue.

Is this a bug report or a feature request?

If this is a bug report, please provide as much info as possible

• version: "1.0.0"

Steps:
• Clone repo, npm install, npm run test. All works!
• Run npm install --save-dev ts-loader, then npm run test again. Dies with Module build failed: Error: You may be using an old version of webpack; please check you're using at least version 4

If this is a new feature request, please describe it below

bug: ts-loader@4 in project breaks cypress run

• version 2.0.0
• platform linux mint 18.3
• expected behavior - work :)
• actual behavior - doesn't work :)

tests build exception is Module build failed: TypeError: Cannot read property 'afterCompile' of undefined

works fine with ts-loader@3 but with ts-loader@4,
you will get an exception above

Regards, Dima

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml
• The new Node.js version is in-range for the engines in 1 of your package.json files, so that was left alone

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

• engines was only updated if it defined a single version, not a range.
• .nvmrc was updated to Node.js 10
• .travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

No types support after package installation

I installed the package but tsc command returns errors:
error TS2304: Cannot find name 'cy'

• cypress version: 1.4.2
• typescript version: 2.7.1
• platform: Windows 10

Support lerna projects with yarn workspace integration

Feature request

I'm using Lerna with yarn workspace integration. Below is my folder structure

* F:\greenfield\taskify
  | ----packages/
  | --------client/
  | ------------package.json
  | --------server/
  | ------------package.json
  | --------e2e/
  | ------------cypress/
  | ------------package.json
  | ----package.json
  | ----lerna.json

When I run the command (actual command after $):
F:\greenfield\taskify$ lerna add --scope=e2e @bahmutov/add-typescript-to-cypress --dev
or
F:\greenfield\taskify\packages\e2e $ yarn add --dev @bahmutov/add-typescript-to-cypress

I'm having the below error.

error F:\greenfield\taskify\node_modules\@bahmutov\add-t
ypescript-to-cypress: Command failed.
Exit code: 1
Command: node src/add-plugin.js
Arguments:
Directory: F:\greenfield\taskify\node_modules\@bahmutov\
add-typescript-to-cypress
Output:
⚠️ Cannot find "cypress" folder in F:\greenfield\taskify

Please scaffold Cypress folder by opening Cypress once
and then installing this package again
See: https://github.com/bahmutov/add-typescript-to-cypress

It seems like the process.cwd() is picking up the project root directory every time.

I've tried googling if it's possible to set the cwd when running the command but no luck.

feature: read cypress folder path from cypress.json if different than default

Configuration file 'cypress.json' gives us the possibility to change 'cypress' folder to something like 'e2e'.
This installation, however, expects 'cypress' folder.

Instead of assuming the cypress folder exists, we can read JSON data from cypress.json and use the right path if it's different from the default.

Cheers,
Miro

write task in typescript

Is this a bug report or a feature request?

Question or feature request.

Is it possible to write Feature Requests in TypeScript? I know the lib says that it is for Integration & Support files to work with TypeScript, but i do have a lot of Tasks to write as well, is there any workaround?

When TypeScript code not compiling, Cypress crashes

Current behavior:

If a test written in TypeScript is saved with the code not compiling, it causes the window containing the test to crash, and the main Cypress window to show the following:

This does not occur with JavaScript files left in an invalid state.

Desired behavior:

TypeScript files with invalid code should be handled in same way as JavaScript files are, i.e. the window containing the test should be left open, and an explanatory message should be shown, e.g.

Steps to reproduce: (app code and test code)

A repo with instructions on how to reproduce is available here: https://github.com/yonigibbs/cypress-typescript-crash

Versions

• Cypress: 3.8.0
• add-typescript-to-cypress: 2.1.2
• OS: Ubuntu 18.04
• Browser: Chrome or Electron from within Cypress