Newly created project with jest and cypress types conflict

Question

Newly created project with jest and cypress types conflict

RafaelLiendo opened this issue 6 years ago · 14 comments

after generating a new project and a new app with jest and cypress, the IDE gives the following errors becaus the @types are conflicting

related issues:
cypress-io/cypress#1087
microsoft/TypeScript#22331

steps to reproduce:

npm i -g @angular/cli@7.0.4 @nrwl/schematics@7.0.2
create-nx-workspace MyWorkspace --npmScope MyNpmScope --packageManager npm
cd MyWorkspace
ng g application MyApp --directory "" --style scss --routing --unitTestRunner jest --e2eTestRunner cypress --tags app
tsc

console error output:

~/MyWorkspace (master)
$ tsc
apps/my-app/src/app/app.component.spec.ts:16:17 - error TS2339: Property 'toBeTruthy' does not exist on type 'Assertion'.

16     expect(app).toBeTruthy();
                   ~~~~~~~~~~

apps/my-app/src/app/app.component.spec.ts:22:23 - error TS2551: Property 'toEqual' does not exist on type 'Assertion'. Did you mean 'equal'?

22     expect(app.title).toEqual('my-app');
                         ~~~~~~~

  node_modules/@types/chai/index.d.ts:84:9
    84         equal: Equal;
               ~~~~~
    'equal' is declared here.

apps/my-app/src/app/app.component.spec.ts:29:54 - error TS2551: Property 'toContain' does not exist on type 'Assertion'. Did you mean 'contain'?

29     expect(compiled.querySelector('h1').textContent).toContain(
                                                        ~~~~~~~~~

  node_modules/@types/chai/index.d.ts:72:9
    72         contain: Include;
               ~~~~~~~
    'contain' is declared here.

node_modules/@types/jasmine/index.d.ts:19:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: beforeAll, afterAll, fdescribe, fit, clock, DEFAULT_TIMEOUT_INTERVAL, CustomMatcherFactory, CustomEqualityTester

19 declare function describe(description: string, specDefinitions: () => void): void;
   ~~~~~~~

  node_modules/@types/jest/index.d.ts:23:1
    23 declare var beforeAll: jest.Lifecycle;
       ~~~~~~~
    Conflicts are in this file.

node_modules/@types/jasmine/index.d.ts:19:18 - error TS2300: Duplicate identifier 'describe'.

19 declare function describe(description: string, specDefinitions: () => void): void;
                    ~~~~~~~~

  node_modules/@types/mocha/index.d.ts:36:13
    36 declare var describe: Mocha.IContextDefinition;
                   ~~~~~~~~
    'describe' was also declared here.

node_modules/@types/jasmine/index.d.ts:21:18 - error TS2300: Duplicate identifier 'xdescribe'.

21 declare function xdescribe(description: string, specDefinitions: () => void): void;
                    ~~~~~~~~~

  node_modules/@types/mocha/index.d.ts:37:13
    37 declare var xdescribe: Mocha.IContextDefinition;
                   ~~~~~~~~~
    'xdescribe' was also declared here.

node_modules/@types/jasmine/index.d.ts:30:18 - error TS2300: Duplicate identifier 'it'.

30 declare function it(expectation: string, assertion?: (done: DoneFn) => void, timeout?: number): void;
                    ~~

  node_modules/@types/mocha/index.d.ts:42:13
    42 declare var it: Mocha.ITestDefinition;
                   ~~
    'it' was also declared here.

node_modules/@types/jasmine/index.d.ts:40:18 - error TS2300: Duplicate identifier 'xit'.

40 declare function xit(expectation: string, assertion?: (done: DoneFn) => void, timeout?: number): void;
                    ~~~

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

node_modules/@types/jasmine/index.d.ts:55:18 - error TS2300: Duplicate identifier 'beforeEach'.

55 declare function beforeEach(action: (done: DoneFn) => void, timeout?: number): void;
                    ~~~~~~~~~~

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

node_modules/@types/jasmine/index.d.ts:62:18 - error TS2300: Duplicate identifier 'afterEach'.

62 declare function afterEach(action: (done: DoneFn) => void, timeout?: number): void;
                    ~~~~~~~~~

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

node_modules/@types/jasmine/index.d.ts:84:18 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

84 declare function expect(spy: Function): jasmine.Matchers<any>;
                    ~~~~~~

  node_modules/cypress/types/index.d.ts:23:15
    23 declare const expect: Chai.ExpectStatic
                     ~~~~~~
    'expect' was also declared here.

node_modules/@types/jasmine/index.d.ts:90:18 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

90 declare function expect<T>(actual: ArrayLike<T>): jasmine.ArrayLikeMatchers<T>;
                    ~~~~~~

  node_modules/cypress/types/index.d.ts:23:15
    23 declare const expect: Chai.ExpectStatic
                     ~~~~~~
    'expect' was also declared here.

node_modules/@types/jasmine/index.d.ts:96:18 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

96 declare function expect<T>(actual: T): jasmine.Matchers<T>;
                    ~~~~~~

  node_modules/cypress/types/index.d.ts:23:15
    23 declare const expect: Chai.ExpectStatic
                     ~~~~~~
    'expect' was also declared here.

node_modules/@types/jasmine/index.d.ts:101:18 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

101 declare function expect(): jasmine.NothingMatcher;
                     ~~~~~~

  node_modules/cypress/types/index.d.ts:23:15
    23 declare const expect: Chai.ExpectStatic
                     ~~~~~~
    'expect' was also declared here.

node_modules/@types/jasmine/index.d.ts:186:15 - error TS2428: All declarations of 'ArrayContaining' must have identical type parameters.

186     interface ArrayContaining<T> {
                  ~~~~~~~~~~~~~~~

node_modules/@types/jasmine/index.d.ts:193:15 - error TS2428: All declarations of 'ObjectContaining' must have identical type parameters.

193     interface ObjectContaining<T> {
                  ~~~~~~~~~~~~~~~~

node_modules/@types/jasmine/index.d.ts:241:9 - error TS2687: All declarations of 'message' must have identical modifiers.

241         message?: string;
            ~~~~~~~

node_modules/@types/jasminewd2/index.d.ts:10:18 - error TS2300: Duplicate identifier 'it'.

10 declare function it(expectation: string, assertion?: (done: DoneFn) => Promise<void>, timeout?: number): void;                    ~~

  node_modules/@types/mocha/index.d.ts:42:13
    42 declare var it: Mocha.ITestDefinition;
                   ~~
    'it' was also declared here.

node_modules/@types/jasminewd2/index.d.ts:12:18 - error TS2300: Duplicate identifier 'xit'.

12 declare function xit(expectation: string, assertion?: (done: DoneFn) => Promise<void>, timeout?: number): void;
                    ~~~

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

node_modules/@types/jasminewd2/index.d.ts:13:18 - error TS2300: Duplicate identifier 'beforeEach'.

13 declare function beforeEach(action: (done: DoneFn) => Promise<void>, timeout?: number): void;
                    ~~~~~~~~~~

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

node_modules/@types/jasminewd2/index.d.ts:14:18 - error TS2300: Duplicate identifier 'afterEach'.

14 declare function afterEach(action: (done: DoneFn) => Promise<void>, timeout?: number): void;
                    ~~~~~~~~~

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

node_modules/@types/jest/index.d.ts:23:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: beforeAll, afterAll, fdescribe, fit, clock, DEFAULT_TIMEOUT_INTERVAL, CustomMatcherFactory, CustomEqualityTester

23 declare var beforeAll: jest.Lifecycle;
   ~~~~~~~

  node_modules/@types/jasmine/index.d.ts:19:1
    19 declare function describe(description: string, specDefinitions: () => void): void;
       ~~~~~~~
    Conflicts are in this file.

node_modules/@types/jest/index.d.ts:24:13 - error TS2300: Duplicate identifier 'beforeEach'.

24 declare var beforeEach: jest.Lifecycle;
               ~~~~~~~~~~

  node_modules/@types/mocha/index.d.ts:63:18
    63 declare function beforeEach(callback: (this: Mocha.IBeforeAndAfterContext, done: MochaDone) => any): void;                        ~~~~~~~~~~
    'beforeEach' was also declared here.

node_modules/@types/jest/index.d.ts:26:13 - error TS2300: Duplicate identifier 'afterEach'.

26 declare var afterEach: jest.Lifecycle;
               ~~~~~~~~~

  node_modules/@types/mocha/index.d.ts:65:18
    65 declare function afterEach(callback: (this: Mocha.IBeforeAndAfterContext, done: MochaDone) => any): void;
                        ~~~~~~~~~
    'afterEach' was also declared here.

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

27 declare var describe: jest.Describe;
               ~~~~~~~~

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

29 declare var xdescribe: jest.Describe;
               ~~~~~~~~~

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

30 declare var it: jest.It;
               ~~

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

32 declare var xit: jest.It;
               ~~~

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

33 declare var test: jest.It;
               ~~~~

node_modules/@types/jest/index.d.ts:36:15 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

36 declare const expect: jest.Expect;
                 ~~~~~~

  node_modules/cypress/types/index.d.ts:23:15
    23 declare const expect: Chai.ExpectStatic
                     ~~~~~~
    'expect' was also declared here.

node_modules/@types/jest/index.d.ts:990:46 - error TS2314: Generic type 'ArrayContaining<T>' requires 1 type argument(s).

990     function arrayContaining(sample: any[]): ArrayContaining;
                                                 ~~~~~~~~~~~~~~~

node_modules/@types/jest/index.d.ts:991:45 - error TS2314: Generic type 'ObjectContaining<T>' requires 1 type argument(s).

991     function objectContaining(sample: any): ObjectContaining;
                                                ~~~~~~~~~~~~~~~~

node_modules/@types/jest/index.d.ts:1017:15 - error TS2428: All declarations of 'ArrayContaining' must have identical type parameters.

1017     interface ArrayContaining {
                   ~~~~~~~~~~~~~~~

node_modules/@types/jest/index.d.ts:1023:15 - error TS2428: All declarations of 'ObjectContaining' must have identical type parameters.

1023     interface ObjectContaining {
                   ~~~~~~~~~~~~~~~~

node_modules/@types/jest/index.d.ts:1131:9 - error TS2374: Duplicate string index signature.

1131         [index: string]: CustomMatcherFactory;
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@types/jest/index.d.ts:1151:9 - error TS2687: All declarations of 'message' must have identical modifiers.

1151         message: string | (() => string);
             ~~~~~~~

node_modules/@types/jest/index.d.ts:1151:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'message' must be of type 'string', but here has type 'string | (() => string)'.

1151         message: string | (() => string);
             ~~~~~~~

node_modules/@types/jest/index.d.ts:1156:9 - error TS2375: Duplicate number index signature.

1156         [n: number]: T;
             ~~~~~~~~~~~~~~~

node_modules/@types/mocha/index.d.ts:36:13 - error TS2300: Duplicate identifier 'describe'.

36 declare var describe: Mocha.IContextDefinition;
               ~~~~~~~~

  node_modules/@types/jasmine/index.d.ts:19:18
    19 declare function describe(description: string, specDefinitions: () => void): void;
                        ~~~~~~~~
    'describe' was also declared here.

node_modules/@types/mocha/index.d.ts:37:13 - error TS2300: Duplicate identifier 'xdescribe'.

37 declare var xdescribe: Mocha.IContextDefinition;
               ~~~~~~~~~

  node_modules/@types/jasmine/index.d.ts:21:18
    21 declare function xdescribe(description: string, specDefinitions: () => void): void;
                        ~~~~~~~~~
    'xdescribe' was also declared here.

node_modules/@types/mocha/index.d.ts:42:13 - error TS2300: Duplicate identifier 'it'.

42 declare var it: Mocha.ITestDefinition;
               ~~

  node_modules/@types/jasmine/index.d.ts:30:18
    30 declare function it(expectation: string, assertion?: (done: DoneFn) => void, timeout?: number): void;
                        ~~
    'it' was also declared here.
  node_modules/@types/jasminewd2/index.d.ts:10:18
    10 declare function it(expectation: string, assertion?: (done: DoneFn) => Promise<void>, timeout?: number): void;
                        ~~
    and here.

node_modules/@types/mocha/index.d.ts:43:13 - error TS2300: Duplicate identifier 'xit'.

43 declare var xit: Mocha.ITestDefinition;
               ~~~

  node_modules/@types/jasmine/index.d.ts:40:18
    40 declare function xit(expectation: string, assertion?: (done: DoneFn) => void, timeout?: number): void;
                        ~~~
    'xit' was also declared here.
  node_modules/@types/jasminewd2/index.d.ts:12:18
    12 declare function xit(expectation: string, assertion?: (done: DoneFn) => Promise<void>, timeout?: number):
void;
                        ~~~
    and here.

node_modules/@types/mocha/index.d.ts:63:18 - error TS2300: Duplicate identifier 'beforeEach'.

63 declare function beforeEach(callback: (this: Mocha.IBeforeAndAfterContext, done: MochaDone) => any): void;
                    ~~~~~~~~~~

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

node_modules/@types/mocha/index.d.ts:64:18 - error TS2300: Duplicate identifier 'beforeEach'.

64 declare function beforeEach(description: string, callback: (this: Mocha.IBeforeAndAfterContext, done: MochaDone) => any): void;
                    ~~~~~~~~~~

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

node_modules/@types/mocha/index.d.ts:65:18 - error TS2300: Duplicate identifier 'afterEach'.

65 declare function afterEach(callback: (this: Mocha.IBeforeAndAfterContext, done: MochaDone) => any): void;
                    ~~~~~~~~~

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

node_modules/@types/mocha/index.d.ts:66:18 - error TS2300: Duplicate identifier 'afterEach'.

66 declare function afterEach(description: string, callback: (this: Mocha.IBeforeAndAfterContext, done: MochaDone) => any): void;
                    ~~~~~~~~~

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

node_modules/cypress/types/index.d.ts:23:15 - error TS2451: Cannot redeclare block-scoped variable 'expect'.

23 declare const expect: Chai.ExpectStatic
                 ~~~~~~

  node_modules/@types/jasmine/index.d.ts:84:18
    84 declare function expect(spy: Function): jasmine.Matchers<any>;
                        ~~~~~~
    'expect' was also declared here.
  node_modules/@types/jest/index.d.ts:36:15
    36 declare const expect: jest.Expect;
                     ~~~~~~
    and here.

Answer 1 · 2018-11-22T17:05:39.000Z

I am experiencing the same issue. Our main app is a legacy app and its test-runner is karma. Today I generated a new lib with jest as test runner and now my CI is breaking :/
Any updates on this @FrozenPandaz ?

Answer 2 · 2018-11-23T06:25:21.000Z

now my CI is breaking

This sounds like a separate issue as this issue pertains to the IDE. Please file an issue with more information about what exactly is failing in your CI and I will jump in when I am available :).

Answer 3 · 2018-11-23T06:26:41.000Z

I'm going to close this issue in favor of #816 which also deals with typing issues in the editor. See #816 (comment) for an update (Good news).

Answer 4 · 2019-01-31T22:52:58.000Z

The issue is worsened with yarn workspaces, where shared modules are hoisted to the project root

Answer 5 · 2019-03-20T22:57:56.000Z

@FrozenPandaz Can we reopen this one or #816? We're seeing the same issue with cypress and jest conflicting.

Answer 6 · 2019-03-21T16:13:44.000Z

Nevermind. VSCode was just being slow, removing the /// reference and creating the tsconfig.json in the e2e projects fixes it.

Answer 7 · 2019-03-28T18:03:31.000Z

@llwt What was the content of the tsconfig.json that got this to work? I'm getting Cannot find name 'cy' even though I have a config in the e2e project...

Answer 8 · 2019-04-03T18:07:31.000Z

@lonix1
tsconfig.json

{
  "extends": "./tsconfig.e2e.json",
}

with tsconfig.e2e.json containing:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "sourceMap": false,
    "outDir": "../../dist/out-tsc/apps/<app-name>-e2e/src",
    "lib": ["es2015", "dom"],
    "types": ["cypress", "node"]
  },
  "include": [
    "src/**/*.ts",
    "../../node_modules/cypress"
  ]
}

Answer 9 · 2020-02-12T06:54:59.000Z

Small aside, but from the above comment it looks like you may get a cyclical extend. I did when following this. I just removed the extend in tsconfig.e2e.json (and the outDir, actually), and it cleared up my case.

I definitely don’t understand all of what’s going on here, but I thought I’d share in case anyone else hits the same issue the way I did.

Thanks!

Answer 10 · 2020-03-25T23:55:14.000Z

Here's the official answer to this question, and the config is fewer lines too (only need the two tsconfig files from this example, and the jest transform) https://github.com/cypress-io/cypress-and-jest-typescript-example

Answer 11 · 2020-07-28T11:51:22.000Z

Here's the official answer to this question, and the config is fewer lines too (only need the two tsconfig files from this example, and the jest transform) https://github.com/cypress-io/cypress-and-jest-typescript-example

Thanks, it works. But for React projects to cypress/tsconfig.json need to add ".//.tsx" rule:
{ "extends": "../tsconfig.json", "compilerOptions": { "noEmit": false }, "include": [ "../node_modules/cypress", "./*/*.ts", "./*/*.tsx" ] }

Answer 12 · 2020-12-05T04:50:50.000Z

one workaround for this is to import the global function explicitly e.g. import { expect } from '@jest/globals';

Answer 13 · 2021-07-03T17:23:23.000Z

one workaround for this is to import the global function explicitly e.g. import { expect } from '@jest/globals';

This helped me solve the issue I was having. Thanks! :)

Answer 14 · 2023-03-23T20:05:04.000Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.