solve conflict between jest and cypress in a react.js app with typescript

1.2k views Asked by At

There is a conflict occur in the react app after installing cypress with typescript I tried to follow the solution on the gitHub but i am still having the same issue. I will share al the config files so if anyone find what's going on please let me know. cypress/tsconfig.json

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "types": ["cypress"]
    },
    "include": [
        "../node_modules/cypress",
        "./**/*.ts",
        "../cypress.config.ts"],
    
    "exclude": []
  }

cypress.config.ts

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    // implement node event listeners here
  }
});

Here i did not put the link by default because my link is already set on the e2e.ts file tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "downlevelIteration": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "*": [
        "types/*"
      ]
    },
    "incremental": true,
    "types": ["jest", "@types/testing-library__jest-dom"],
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

I follow the solution on this gitHub link: https://github.com/neiltownsley/react-typescript-cypress/pull/1

But i could not solve it. here is the error i am getting after checking with this command yarn check-type

test/unit/vmr.test.ts:53:18 - error TS2551: Property 'toEqual' does not exist on type 'Assertion'. Did you mean 'equal'?

53     expect(rows).toEqual(
                    ~~~~~~~

  node_modules/cypress/types/chai/index.d.ts:206:9
    206         equal: Equal;
                ~~~~~
    'equal' is declared here.
2

There are 2 answers

0
Livio Nocchi On

You could try and add "./cypress.config.ts" to the exclude within your tsconfig.json as per this solution

0
Eddie Chen On

In your jest *.spec.ts file, add this line.

import { expect } from '@jest/globals';