fix: data should be a function, i18n plugin was throwing error

Author: JessicaSachs

README.md

@@ -114,8 +114,8 @@ The code is pretty simple
 ```js
 var app = new Vue({
   el: '#app',
-  data: {
-    message: 'Hello Vue!',
+  data() {
+    return { message: 'Hello Vue!' }
   },
 })
 ```
@@ -210,12 +210,14 @@ describe('Declarative rendering', () => {
     </ol>
   `
 
-  const data = {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Vue' },
-      { text: 'Build something awesome' },
-    ],
+  function data() {
+    return {
+      todos: [
+        { text: 'Learn JavaScript' },
+        { text: 'Learn Vue' },
+        { text: 'Build something awesome' },
+       ],
+    }
   }
 
   beforeEach(mountCallback({ template, data }))
@@ -274,8 +276,8 @@ describe('Handling User Input', () => {
     </div>
   `
 
-  const data = {
-    message: 'Hello Vue.js!',
+  function data() {
+    return { message: 'Hello Vue.js!' }
   }
 
   const methods = {

cypress/component/advanced/i18n/TranslatedMessage.vue

@@ -20,7 +20,7 @@
 <template>
   <div id="app">
     <label for="locale">locale</label>
-    <select v-model="locale">
+    <select v-model="locale" id="locale">
       <option>en</option>
       <option>fa</option>
       <option>ja</option>
@@ -32,8 +32,10 @@
 
 <script>
 export default {
-  name: 'app',
-  data () { return { locale: 'en' } },
+  name: 'TranslatedMessage',
+  data () {
+    return { locale: 'en' }
+  },
   watch: {
     locale (val) {
       this.$i18n.locale = val

cypress/component/advanced/i18n/spec.js

@@ -1,21 +1,15 @@
 /// <reference types="cypress" />
-
+import Vue from 'vue'
 import TranslatedMessage from './TranslatedMessage.vue'
 import VueI18n from 'vue-i18n'
 import { mountCallback } from 'cypress-vue-unit-test'
 
-describe('VueI18n', () => {
-  // need to use VueI18n as a plugin
-  const extensions = {
-    plugins: [VueI18n],
-    components: {
-      TranslatedMessage,
-    },
-  }
-
-  const template = '<translated-message />'
+Vue.use(VueI18n)
+const i18n = new VueI18n({ locale: 'en' })
 
-  beforeEach(mountCallback({ template }, { extensions }))
+describe('VueI18n', () => {
+  // const i18n = new VueI18n({ locale: 'en' })
+  beforeEach(mountCallback(TranslatedMessage, { i18n }))
 
   it('shows English, Japanese and Russian greeting', () => {
     cy.viewport(400, 200)

cypress/component/basic/list-spec.js

@@ -11,12 +11,14 @@ describe('Declarative rendering', () => {
     </ol>
   `
 
-  const data = {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Vue' },
-      { text: 'Build something awesome' },
-    ],
+  function data() {
+    return {
+      todos: [
+        { text: 'Learn JavaScript' },
+        { text: 'Learn Vue' },
+        { text: 'Build something awesome' },
+      ],
+    }
   }
 
   beforeEach(mountCallback({ template, data }))

cypress/component/basic/options-spec.js

@@ -13,7 +13,7 @@ describe('Mount component', () => {
     template,
     data() {
       return {
-        message: 'Hello Vue!'
+        message: 'Hello Vue!',
       }
     },
   }

cypress/component/basic/reverse-spec.js

@@ -10,8 +10,8 @@ describe('Handling User Input', () => {
     </div>
   `
 
-  const data = {
-    message: 'Hello Vue.js!',
+  function data() {
+    return { message: 'Hello Vue.js!' }
   }
 
   const methods = {

cypress/component/basic/spec.js

@@ -9,11 +9,14 @@ describe('Declarative rendering', () => {
     </div>
   `
 
-  const data = {
-    message: 'Hello Vue!',
-  }
-
-  beforeEach(mountCallback({ template, data }))
+  beforeEach(
+    mountCallback({
+      template,
+      data() {
+        return { message: 'Hello Vue!' }
+      },
+    }),
+  )
 
   it('shows hello', () => {
     cy.contains('Hello Vue!')

src/index.ts

@@ -5,6 +5,7 @@ import {
   VueTestUtilsConfigOptions,
   Wrapper
 } from '@vue/test-utils'
+import VueI18n from "vue-i18n";
 const { stripIndent } = require('common-tags')
 
 // mountVue options
@@ -45,21 +46,14 @@ const installFilters = (Vue, options) => {
   }
 }
 
-const installPlugins = (Vue, options) => {
+const installPlugins = (Vue, options, props) => {
   const plugins: VuePlugins =
-    Cypress._.get(options, 'extensions.use') ||
-    Cypress._.get(options, 'extensions.plugins')
-
-  if (Cypress._.isArray(plugins)) {
-    plugins.forEach((plugin) => {
-      if (Array.isArray(plugin)) {
-        const [aPlugin, options] = plugin
-        Vue.use(aPlugin, options)
-      } else {
-        Vue.use(plugin)
-      }
-    })
-  }
+      Cypress._.get(props, 'plugins') ||
+      Cypress._.get(options, 'extensions.use') ||
+      Cypress._.get(options, 'extensions.plugins') ||
+      []
+
+  plugins.forEach(Vue.use)
 }
 
 const installMixins = (Vue, options) => {
@@ -132,15 +126,12 @@ type VueFilters = {
 type VueMixin = unknown
 type VueMixins = VueMixin | VueMixin[]
 
-/**
- * A Vue plugin to register,
- * or a plugin + its options pair inside an array
- */
-type VuePlugin = unknown | [unknown, unknown]
+type VuePluginOptions = unknown
+type VuePlugin = unknown | [unknown, VuePluginOptions]
 /**
  * A single Vue plugin or a list of plugins to register
  */
-type VuePlugins = VuePlugin | VuePlugin[]
+type VuePlugins = VuePlugin[]
 
 /**
  * Additional Vue services to register while mounting the component, like
@@ -352,29 +343,6 @@ export const mount = (
       Please remove it from your 'mountVue' options.`)
   }
 
-  // set global Vue instance:
-  // 1. convenience for debugging in DevTools
-  // 2. some libraries might check for this global
-  // appIframe.contentWindow.Vue = Vue
-
-  // refresh inner Vue instance of Vuex store
-  // @ts-ignore
-  if (hasStore(component)) {
-    // @ts-ignore
-    component.store = resetStoreVM(Vue, component)
-  }
-
-  // render function components should be market to be properly initialized
-  // https://github.com/bahmutov/cypress-vue-unit-test/issues/313
-  if (
-    Cypress._.isPlainObject(component) &&
-    // @ts-ignore
-    Cypress._.isFunction(component.render)
-  ) {
-    // @ts-ignore
-    component._compiled = true
-  }
-
   return cy
     .window({
       log: false,
@@ -385,6 +353,19 @@ export const mount = (
       win.Vue = localVue
       localVue.config.errorHandler = failTestOnVueError
 
+
+      // set global Vue instance:
+      // 1. convenience for debugging in DevTools
+      // 2. some libraries might check for this global
+      // appIframe.contentWindow.Vue = localVue
+
+      // refresh inner Vue instance of Vuex store
+      // @ts-ignore
+      if (hasStore(component)) {
+        // @ts-ignore
+        component.store = resetStoreVM(localVue, component)
+      }
+
       // @ts-ignore
       const document: Document = cy.state('document')
       document.body.innerHTML = ''
@@ -423,11 +404,12 @@ export const mount = (
       // setup Vue instance
       installFilters(localVue, options)
       installMixins(localVue, options)
-      installPlugins(localVue, options)
+      // @ts-ignore
+      installPlugins(localVue, options, props)
       registerGlobalComponents(localVue, options)
 
       // @ts-ignore
-      props.attachTo = el
+      props.attachTo = componentNode
 
       const wrapper = localVue.extend(component as any)