I’ve just started using Cypress with my React Typescript project. I’ve gotten some simple tests to run:
describe('settings page', () => {
beforeEach(() => {
cy.visit('http://localhost:3000')
});
it('starts in a waiting state, with no settings.', () => {
cy.contains('Waiting for settings...')
});
it('shows settings once settings are received', () => {
const state = cy.window().its('store').invoke('getState')
console.log(state) // different question: how do I get this to be the state and not a $Chainer?
});
})
It runs in Cypress just fine. But I get Typescript errors in Webstorm, saying that cy
is not defined (a TS and ESlint error) and an error on describe
saying all files must be modules when the --isolatedModules flag is provided
.
I can make it a JS file instead of a TS file, then I still get cy
is not defined.
I’ve tried import cy from 'cypress'
but then I get ParseError: 'import' and 'export' may appear only with 'sourceType: module'
which is a whole other can of worms (I’m taking baby steps in writing my tests and haven’t had to import anything yet…)
/// <reference types="cypress" />
does not work.
I got that error after upgrading to cypress version 4+. I installed the
eslint-plugin-cypress
https://github.com/cypress-io/eslint-plugin-cypress and activated it in the extends configuration either in package.json or in separate config file: