3

I've recently refactored my code to use dayJS rather than Moment.js, and now Webstorm is reporting a ton of TS2339 errors. These errors aren't preventing my code from compiling or running, but it is making it extremely hard to find actual errors. Here's an example of some code where the error shows up:

export function verifyCreatedDate(date: string) {
  cy.log('Verify item creation date');
  cy.get('[data-cy="timeline-date"]').should(
    'have.text',
    Cypress.dayjs(date).format('MM/DD/YY'),
  );
}

And here's my tsconfig.json file:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": false,
    "module": "es2015",
    "target": "es2015",
    "jsx": "react",
    "allowJs": true,
    "types": ["cypress", "@percy/cypress"],
    "moduleResolution": "node",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  },
  "include": ["**/*.ts", "node_modules/cypress/types/mocha/index.d.ts"]
}

I've tried adding dayJS to both the "types" and "include" sections, then restarting WebStorm, but that didn't fix the error either. I've been searching for answers for this for about a week, and although this is a common issue, none of the proposed solutions I've found have worked.

Finally, here's the relevant portion of my support/index.js file:

// if multiple specs need to use dayjs import it in the support file
// and add to the global Cypress object
const dayjs = require('dayjs');

Cypress.dayjs = dayjs;
Zachary Costa
  • 106
  • 1
  • 4
  • Did you try adding `d.ts` shims that add `dayjs` to `Cypress` namespace, similar to what is normally done with custom commands (https://docs.cypress.io/guides/tooling/typescript-support#Types-for-custom-commands)? – lena Mar 26 '21 at 13:18
  • I've been looking at this, but I'm struggling to figure out how I add in dayJS. The instructions are entirely focused on adding a custom command where you define the function, how would I add a module like DayJS to the namespace using this method? – Zachary Costa Mar 30 '21 at 22:10
  • Why are you attaching dayjs to the Cypress object? Can you just import/require it in the files you need it? – olore Apr 13 '21 at 01:05
  • 1
    We use dayJS in almost every one of our specs - The documentation recommends attaching it to the Cypress object in such a case – Zachary Costa Apr 14 '21 at 17:39

2 Answers2

0

cypress/support/index.d.ts:

/// <reference types="cypress" />

declare namespace Cypress {
    interface Chainable {
        ... your custom commands

    }

    import dayjs from 'dayjs';
    interface Cypress {
        dayjs: dayjs.Dayjs;
    }
}
MCFreddie777
  • 1,069
  • 1
  • 12
  • 21
-1

what you are messing is extended types, similarly added like you do for commands: https://docs.cypress.io/guides/tooling/typescript-support#Types-for-custom-commands

declare namespace Cypress {
  interface Cypress {
    dayjs: any;
  }
}
Maciej Urbański
  • 475
  • 3
  • 12
  • Why using `any`? You lose all the IntelliSense stuff. I tried `dayjs: Dayjs;` but `import` in `suport/index.d.ts` file breaks autompletion of even previously working custom commands. – MCFreddie777 May 25 '21 at 11:31