bahmutov / local-cypress Goto Github PK

View Code? Open in Web Editor NEW

33.0 1.0 3.0 260 KB

Use Cypress without global objects

Home Page: https://glebbahmutov.com/blog/local-cypress/

JavaScript 69.99% TypeScript 30.01%

cypress cypress-example

local-cypress's Introduction

local-cypress

Use Cypress without global objects, read the blog post

The objects are still attached to the window object during the test, but the types are no longer global, you need to explicitly import them from this package.

WORK IN PROGRESS ⚠️

local cy and Cypress object types
local expect and assert assertion types
local Mocha's describe, it, etc types
missing EventEmitter and NodeEventEmitter types
uses relative path cy-chai.d.ts

Install

npm install -D local-cypress
# or
yarn add -D local-cypress postinstall-postinstall

Use

In your spec files, instead of using global variables like cy and expect, import them

// cypress/integration/spec.js
import { cy, Cypress, expect, it } from 'local-cypress'

it('works', () => {
  console.log(Cypress.config())
  cy.visit('/')
  expect(1).to.equal(1)
})

Examples

Small print

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

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.

local-cypress's People

Contributors

Stargazers

Watchers

Forkers

peterkrieg jamesbvaughan felixgeissler

local-cypress's Issues

Bring EventEmitter

In index.ts we use reference path

But after building the reference paths are gone

Thus EventEmitter type is not found in the user project, see bahmutov/local-cypress-and-jest-typescript-example#7

Dependency Dashboard

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

Open

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

Detected dependencies

github-actions

.github/workflows/badges.yml

.github/workflows/ci.yml

cypress-io/github-action v2

cycjimmy/semantic-release-action v2

npm

package.json

debug 4.3.4

cypress 9.7.0

semantic-release 19.0.5

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

cypress-testing-library support

Would be keen to use if https://testing-library.com/docs/cypress-testing-library/intro types would be available?

同学，您这个项目引入了331个开源组件，存在1个漏洞，辛苦升级一下

检测到 bahmutov/local-cypress 一共引入了331个开源组件，存在1个漏洞

漏洞标题：ansi-regex 安全漏洞
缺陷组件：[email protected]
漏洞编号：CVE-2021-3807
漏洞描述：Ansi-Regex是用于匹配ANSI 转义码的正则表达式。
ansi-regex 存在安全漏洞，该漏洞源于易受低效正则表达式复杂性的影响。
影响范围：(2.1.1, 5.0.1)
最小修复版本：5.0.1
缺陷组件引入路径：[email protected]>[email protected]>[email protected]>[email protected]>[email protected]>[email protected]
[email protected]>[email protected]>[email protected]>[email protected]>[email protected]>[email protected]
[email protected]>[email protected]>[email protected]>[email protected]>[email protected]>[email protected]
[email protected]>[email protected]>[email protected]>[email protected]>[email protected]>[email protected]

另外还有几个漏洞，详细报告：https://mofeisec.com/jr?p=a743f6

Custom command types

Hi and thanks for this package, this is coming in handy.
Any way to declare types for custom commands and chai-subsets ?
Extending Cypress.Chainable and Cypress.Chainer interfaces the classic way in a .d.ts doesn't seem to work.

Move Mocha functions to locals

If we enable "skipLibCheck": true in https://github.com/bahmutov/local-cypress-and-jest-typescript-example then we get the test function type errors

$ npm run lint

> [email protected] lint /Users/gleb/git/local-cypress-and-jest-typescript-example
> tsc --project tsconfig.lint.json

node_modules/@types/mocha/index.d.ts:2680:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'beforeEach' must be of type 'Lifecycle', but here has type 'HookFunction'.

2680 declare var beforeEach: Mocha.HookFunction;
                 ~~~~~~~~~~

  node_modules/@types/jest/index.d.ts:35:13
    35 declare var beforeEach: jest.Lifecycle;
                   ~~~~~~~~~~
    'beforeEach' was also declared here.

node_modules/@types/mocha/index.d.ts:2698:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'afterEach' must be of type 'Lifecycle', but here has type 'HookFunction'.

2698 declare var afterEach: Mocha.HookFunction;
                 ~~~~~~~~~

  node_modules/@types/jest/index.d.ts:37:13
    37 declare var afterEach: jest.Lifecycle;
                   ~~~~~~~~~
    'afterEach' was also declared here.

node_modules/@types/mocha/index.d.ts:2714:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'describe' must be of type 'Describe', but here has type 'SuiteFunction'.

2714 declare var describe: Mocha.SuiteFunction;
                 ~~~~~~~~

  node_modules/@types/jest/index.d.ts:38:13
    38 declare var describe: jest.Describe;
                   ~~~~~~~~
    'describe' was also declared here.

node_modules/@types/mocha/index.d.ts:2735:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'xdescribe' must be of type 'Describe', but here has type 'PendingSuiteFunction'.

2735 declare var xdescribe: Mocha.PendingSuiteFunction;
                 ~~~~~~~~~

  node_modules/@types/jest/index.d.ts:40:13
    40 declare var xdescribe: jest.Describe;
                   ~~~~~~~~~
    'xdescribe' was also declared here.

node_modules/@types/mocha/index.d.ts:2749:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'it' must be of type 'It', but here has type 'TestFunction'.

2749 declare var it: Mocha.TestFunction;
                 ~~

  node_modules/@types/jest/index.d.ts:41:13
    41 declare var it: jest.It;
                   ~~
    'it' was also declared here.

node_modules/@types/mocha/index.d.ts:2763:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'test' must be of type 'It', but here has type 'TestFunction'.

2763 declare var test: Mocha.TestFunction;
                 ~~~~

  node_modules/@types/jest/index.d.ts:44:13
    44 declare var test: jest.It;
                   ~~~~
    'test' was also declared here.

node_modules/@types/mocha/index.d.ts:2770:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'xit' must be of type 'It', but here has type 'PendingTestFunction'.

2770 declare var xit: Mocha.PendingTestFunction;
                 ~~~

  node_modules/@types/jest/index.d.ts:43:13
    43 declare var xit: jest.It;
                   ~~~
    'xit' was also declared here.


Found 7 errors.

updating cypress seems to break local-cypress until you reinstall

i updated to the last version of cypress today and then i got lots of errors in VS code for my jest tests, because VS code thought I was using cypress.

So I uninstalled local-cypress and reinstalled it, then restarted VS code and all the errors went away. Is this a known issue?

Types broken with [email protected]

The new Cypress types have a change that causes the imports from local-cypress to become any (or throw errors if skipLibCheck: false). This is especially painful for any custom commands. Addressed in #67.

Idea: Provide .d.ts file of the removed types to allow e2e types to use globals

I'm really just wrapping my head around how this all works, so apologies if this isn't actually possible.

My understanding is that local-cypress:

Patches the Cypress package to comment out global type declarations
Provides those fomerly-global types to be imported into tests

In our Angular project, we have lots and lots of e2e tests that work just fine with the global types.

We're just starting to get into component tests, and would like to put the side-by-side with the components themselves, so local-cypress seems necessary to get around type conflicts with our Jasmine tests.

If local-cypress provided a .d.ts file with the global types it removed from Cypress, I believe I could reference that in my Cypress directory to allow the e2e tests to have global types, while using local types for the component tests.

Currently I'm working around doing exactly this by creating a .d.ts file locally with all of the removed types, but it would be nice if that were done internally in local-cypress, so that it can't get out of sync.

Thoughts? Maybe there's an easy way to do all of this and I'm making way too much work out of it?

VSCode Error: Cannot find module 'local-cypress'

import { cy } from "local-cypress"

I got an error in VSCode:

Cannot find module 'local-cypress'. Did you mean to set the 'moduleResolution' option to 'node', 
or to add aliases to the 'paths' option? ts(2792)

So I added "moduleResolution": "node" to tsconfig.json.

{
  "compilerOptions": {
    "moduleResolution": "node",
    ...
  },
  ...
}

I hope this configuration requirement to be mentioned in local-cypress documentation.