Cypress config .js .ts

[mikekubn]

Hi everyone,

I have problem with new cypress config from version 10 in my next.js app.

I started use cypress.config.ts for e2e but if I used this I get error on unit tests every time. Property 'toBeVisible' does not exist on type 'Assertion'.

cypress.config.ts

import { defineConfig } from 'cypress';

export default defineConfig({
  retries: {
    runMode: 1,
    openMode: 0,
  },
  viewportHeight: 1000,
  viewportWidth: 1800,
  e2e: {
    baseUrl: 'http://localhost:3000',
  },
});

error unit test

describe('Card', () => {
  it('render card', async () => {
    const handleClick = jest.fn();
    render(<Card handleClick={handleClick}>Foo</Card>);

    expect(screen.getByText('Foo')).toBeVisible(); // `Property 'toBeVisible' does not exist on type 'Assertion'.`
    fireEvent.click(screen.getByTestId('card'));
    expect(handleClick).toHaveBeenCalledTimes(1); // `Property 'toHaveBeenCalledTimes' does not exist on type 'Assertion'.`
  });
});

I have one basic tsconfig.json where exclude cypress and then I have second for cypress in cypress folder.

{
  "compilerOptions": {
    "target": "es5",
    "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",
    "incremental": true,
    "baseUrl": "./",
    "types": ["jest", "node", "@types/testing-library__jest-dom"],
    "paths": {
      "@/components/*": ["src/components/*"],
      "@/layouts/*": ["src/layouts/*"],
      "@/provider/*": ["src/providers/*"],
      "@/hooks/*": ["src/hooks/*"],
      "@/lib/*": ["src/lib/*"],
      "@/styles/*": ["styles/*"],
      "@/utils/*": ["utils/*"],
    }
  },
  "include": [
    "tailwind.config.js",
    "cypress.config.ts",
    "style/**/*.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.js"
  ],
  "exclude": ["node_modules", "cypress"]
}

cypress/tsconfig.json

{
    "compilerOptions": {
        "noEmit": true,
        "isolatedModules": false,
        "types": ["cypress"]
    },
     "include": [
        "../node_modules/cypress",
        "../package.json",
        "./**/*.ts"
    ]
}

And it's weird at the end, because if I change import to require in cypress.config.ts, all configurations will start worked.

cypress.config.ts

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { defineConfig } = require('cypress');

export default defineConfig({
  retries: {
    runMode: 1,
    openMode: 0,
  },
  viewportHeight: 1000,
  viewportWidth: 1800,
  e2e: {
    baseUrl: 'http://localhost:3000',
  },
});

Anyone any advice please 🙏🏻