Basic test function not defined logging error in the console

[krysalead]

Hi,

I followed the introduction to component testing in Cypress on a VueJs3 application.
https://docs.cypress.io/guides/component-testing/introduction#Writing-Component-Tests
Everything went well except that the webpack build is showing a bunch of error regarding
it, describe and all the usual test methods as undefined.

error: 'it' is not defined (no-undef) at src/components/calculator/modals/addBenefitOfKind.spec.js:29:5:
  27 |     })
  28 |     beforeEach(mountCallback(addBenefitOfKind, { data, propsData: { id: "test", currency: "EUR" }, i18n, store, vuetify, extensions }))
> 29 |     it('display 0 when nothing is selected', () => {
     |     ^
  30 |         cy.get('[data-testid=todos]').should('have.length', 1)
  31 |     })
  32 | })


error: 'cy' is not defined (no-undef) at src/components/calculator/modals/addBenefitOfKind.spec.js:30:9:
  28 |     beforeEach(mountCallback(addBenefitOfKind, { data, propsData: { id: "test", currency: "EUR" }, i18n, store, vuetify, extensions }))
  29 |     it('display 0 when nothing is selected', () => {
> 30 |         cy.get('[data-testid=todos]').should('have.length', 1)
     |         ^
  31 |     })
  32 | })

My test

/// <reference types="cypress" />
import { mountCallback } from '@cypress/vue'
import Vue from 'vue'
import Localization from '../../../localization';
import vuetify from '../../../plugins/vuetify';
import Store from '../../../store';
import filters from '../../../filters';
import addBenefitOfKind from './addBenefitOfKind'

const extensions = {
    filters,
}

describe('addBenefitOfKind', () => {
    const i18n = Localization(Vue);
    const store = Store(Vue);
    const data = () => ({
        dialog: true,
        index: null,
        form: {
            benefitType: null,
            name: null,
            hours: null,
            rate: null,
            readonly: false,
        }
    })
    beforeEach(mountCallback(addBenefitOfKind, { data, propsData: { id: "test", currency: "EUR" }, i18n, store, vuetify, extensions }))
    it('display 0 when nothing is selected', () => {
        cy.get('[data-testid=todos]').should('have.length', 1)
    })
})

[lmiller1990]

I think the problem is relating to linting - it is not imported anywhere (since Cypress injects it globally).

Can you please share your plugins/index.js (and webpack.config.js)?

I wrote a post about Vue here. The source code is here.

[lmiller1990]

I set up a project with linting but I did not get this problem (using Vue CLI). I do see the errors when I run yarn lint:

error: 'describe' is not defined (no-undef) at src/components/HelloWorld.spec.js:4:1:
  2 | import HelloWorld from './HelloWorld.vue'
  3 |
> 4 | describe('HelloWorld', () => {
    | ^
  5 |   it('renders a message', () => {
  6 |     const msg = 'Hello Cypress Component Testing!'
  7 |     mount(HelloWorld, {


error: 'it' is not defined (no-undef) at src/components/HelloWorld.spec.js:5:3:
  3 |
  4 | describe('HelloWorld', () => {
> 5 |   it('renders a message', () => {
    |   ^
  6 |     const msg = 'Hello Cypress Component Testing!'
  7 |     mount(HelloWorld, {
  8 |       propsData: {


error: 'cy' is not defined (no-undef) at src/components/HelloWorld.spec.js:13:5:
  11 |     })
  12 |
> 13 |     cy.get('h1').should('have.text', msg)
     |     ^
  14 |   })
  15 | })
  16 |

But not in my overlay. Can you please share a minimal reproduction?

It's possible to configure .eslintrc.json to ignore globals:

{
  "globals": {
    "it": "readonly",
    "describe": "readonly",
    "cy": "readonly"
  }
}

But I am not sure how to merge this with the Vue CLI's built in eslint config. You can see the linting config with yarn eslint --print-config .eslintrc.js. You could then copy paste that into .eslintrc.json and add the additional global rule.

[krysalead]

Thanks a lot, the configuration of the linter was the answer.

[lmiller1990]

Glad you got it working.

Can you share your settings for others that might have the same problem? Thanks!

[krysalead]

I was following this example
https://docs.cypress.io/guides/component-testing/introduction#Writing-Component-Tests
When the issue happen, then I created a .eslintrc.json file with the content you gave and it worked.
But I was having much more trouble with testing a modal so I gave up with Cypress and returned to basic component testing with vue. What I found is that I was using Mocha previously and the tutorial were based on Jest and I think this was the root cause. I will test again with Cypress and see if I got the same issue again.

[lmiller1990]

If you can share your code (maybe the code you'd like to test, or a repo) I can give you some examples to get you started, if you'd like. Let me know!

I also work on Test Utils, so if you need any pointers around that, feel free to ask. I'm finding Cypress a better fit for things like modals, but it can be a bit of a different mindset to Test Utils, but I think it's well worth it 😇