CODEWITHSUNDEEP
vue.jstestingcypress
Christine H.
Christine H.

Reputation: 163

Error in cypress: Object(...) is not a function

This is my test component:

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String,
    },
    data () {
    },
  }
</script>

<style>
.container {
    max-width: 500px;
    margin: 30px auto;
    overflow: auto;
    min-height: 300px;
    border: 1px solid steelblue;
    padding: 30px;
    border-radius: 5px;
}
</style>

And this is my test:

import { mount } from '@cypress/vue'
import HelloWorld from '../../src/HelloWorld.vue'

describe('HelloWorld', () => {
    it('renders a message', () => {
        const msg = 'Hello Cypress Component Testing!'
        mount(HelloWorld, {
            propsData: {
                msg,
            },
        })

        cy.get('h1').should('have.text', msg)
    })
})

Below is the output in Cypress when I run yarn cypress open-ct:

enter image description here

Upvotes: 1

Views: 1325

Answers (1)

Leonardo Figueroa
Leonardo Figueroa

Reputation: 61

Maybe it's too late but the solution for me was to change import { mount } from 'cypress' to import { mount } from 'cypress/vue2 in the test file. That solved my problem.

Upvotes: 1

Related Questions