The cypress-and-jest-typescript-example from cypress-io

Running cypress with unit tests (Jest) problem

Main problem:
Our team wants to use a cypress dashboard to cover the project with tests. We use both cypress tests and unit tests to test our code (Jest + React Testing Library).

The main problem is that when running unit tests, an error occurs that is related to the construction of the DOM inside jest.

We are getting an error that the webpack is not configured correctly:

Error: Webpack Compilation Error
./src/components/Toast/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .toast_classes {
|   color: #ffffff;
|   --background: #1d201f;
 @ ./src/components/Toast/toast.ts 1:0-21
 @ ./src/redux/payments/action.ts
 @ ./cypress/integration/payments-action.test.ts
    at Watching.handle [as handler] (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:176:23)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:54:20
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/neo-async/async.js:2818:7
    at done (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/alexey/Library/Caches/Cypress/7.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:464:33

Can you please tell us why such a problem may occur and there may be possible solutions

Cypress version
7.5.0

type conflicts when running typescript build

Using yarn run tsc to simulate a webpack build, there are currently a couple pages of type errors:

> git show --stat
commit 194918bcfc2023495fe7de090a69d24e5404e40d (HEAD -> master, origin/master, origin/HEAD)
(...)
> ./node_modules/.bin/tsc --version
Version 3.5.2
> ./node_modules/.bin/tsc
cypress/integration/spec.ts:2:3 - error TS2304: Cannot find name 'cy'.

2   cy.wrap('foo').should('equal', 'foo')
    ~~

node_modules/@types/babel__template/index.d.ts:16:28 - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

16     placeholderWhitelist?: Set<string>;
                              ~~~

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 9 errors.

Most of the errors are cypress-io/cypress#6690 , but the first two look like something else.

Updating to Cypress 4.4.1 doesn't fix it. (though it has some different type errors)

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Open

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

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

Mocha and Chai clashes on cypress run

Hi,

I am setting up vue + jest + cypress and following along this example repo :)
Things are progressing nicely. My (jest) unit tests are working, "cypress open" is working. But when I run "cypress run" I get: "Cannot redeclare block-scoped variable 'chai' " and lots of other error indicating a conflict between Mocha, Chia and Jest.

My two config tsconfig files are:

Root:

  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "vuetify",
      "node",
      "cypress",
      "mocha",
      "chai"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "custom-typings/*.ts"
  ],
  "exclude": [
    "node_modules",
    
  ]
}

/cypress:

  "extends": "../tsconfig.json",
  "include": [
    "../node_modules/cypress",
    "*/*.ts"
  ]
}

I have tried excluding cypress from the root tsconfig but then the cypress open fails.

Why would I get errors on cypress run but not on cypress open?

Can you help me?

Thanks in advance!

add CLA assistant

Typescript build fails on installation

My company is looking at integrating cypress into our tech stack. Unfortunately when trying out this example repo we are finding that the typescript build fails.

To reproduce:

git clone https://github.com/cypress-io/cypress-and-jest-typescript-example.git
cd cypress-and-jest-typescript-example
npm install # 
tsc -b

Typescript build output:

cypress/integration/spec.ts(2,3): error TS2304: Cannot find name 'cy'.
node_modules/@types/babel__template/index.d.ts(16,28): error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
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'.
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'.
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'.
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'.
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'.
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'.
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'.

Cypress installation:

npm ls cypress
[email protected] C:\Users\steve\developer\cypress-and-jest-typescript-example
`-- [email protected]

Environment:

tsc -v # Version 3.9.7
node -v # v12.14.1
npm -v # 6.13.7
OS: Microsoft Windows 10 Home 10.0.18362 Build 18362

Show how to run Cypress and Jest tests in parallel jobs

using GitHub action

Error while working with Jest and Cypress

Our team decided to use Jest and Cypress together to display our application’s test coverage and collect all tests in one place.

However, when we run the tests, we get the error:

The following error originated from your test code, not from Cypress.
  > Do not import @jest/globals outside of the Jest test environment
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.

Can you please tell us how to solve this problem, we are really stuck on this error
I also attach a screenshot of the error:

https://i.stack.imgur.com/MuqLJ.png
Thanks a lot in advance for your help.

How to set path alias for cypress tests?

Hi am using your cypress and jest typescript example and it worked quite well until I started to import modules from my sourcecode into my cypress test files.

For my sourcecode I have a path alias set:

"paths": {
      "@/*": ["src/*"]
    },

however cypress or more specifically Webpack doesn't seem to understand what to do with it.

Any idea how I can update my tsconfig.json to solve the issue. I am not even sure which tsconfig.json I would have to update.

Cypress 7.x and Component testing support

Could we please see a working version of this repository using cypress 7.x and component testing?
I suspect that with the addition of cypress 7.x - this repo will no longer work.

cypress-io / cypress-and-jest-typescript-example Goto Github PK

cypress-and-jest-typescript-example's Introduction

cypress-and-jest-typescript-example

Linting

Additional information

Questions or problems

CircleCI workflow

GitHub Actions workflow

License

cypress-and-jest-typescript-example's People

Contributors

Stargazers

Watchers

Forkers

cypress-and-jest-typescript-example's Issues

Open

Recommend Projects

Recommend Topics

Recommend Org