$listeners is readonly

[mukulkhanna]

Version

1.0.0-beta.18

Reproduction link

https://codesandbox.io/s/x74ko3v7j4

Steps to reproduce

Download the sandbox,

npm run dev

npm run json:server

npm run unit

Vue component:

Apply.vue

<template>
<v-app>
  <v-card flat>
    <v-card-text>
      <v-container>
        <h2>LEAVE APPLICATION HEADING</h2>
          <v-form v-model="valid">
            <v-layout row wrap align-center justify-center>
              <v-flex xs12 sm6 md4>
                <v-menu
                  ref="menu"
                  :close-on-content-click="true"
                  v-model="menu"
                  :nudge-right="40"
                  :return-value.sync="application.from"
                  lazy
                  transition="scale-transition"
                  offset-y
                  full-width
                  min-width="290px"
                >
                  <v-text-field
                    solo
                    required
                    :rules="dataRules"
                    slot="activator"
                    v-model="application.from"
                    label="FROM"
                    prepend-icon="event"
                  ></v-text-field>
                  <v-date-picker
                  v-model="application.from"
                  no-title
                  scrollable
                  @input="$refs.menu.save(application.from)"
                  >
                  </v-date-picker>
                </v-menu>
              </v-flex>

              <v-flex xs12 sm6 md4>
                <v-menu
                  ref="menu2"
                  :close-on-content-click="false"
                  v-model="menu2"
                  :nudge-right="40"
                  :return-value.sync="application.to"
                  lazy
                  transition="scale-transition"
                  offset-y
                  full-width
                  min-width="290px"
                >
                  <v-text-field
                    solo
                    required
                    :rules="dataRules"
                    slot="activator"
                    v-model="application.to"
                    label="TO"
                    prepend-icon="event"
                  ></v-text-field>
                  <v-date-picker
                  v-model="application.to"
                  :min="application.from"
                  no-title
                  scrollable
                  @input="$refs.menu2.save(application.to)"
                  >
                    <v-spacer></v-spacer>
                  </v-date-picker>
                </v-menu>
              </v-flex>
            </v-layout>
            <v-layout justify-center align-center mt-5 mb-5>
              <v-flex xs6>
                <v-select
                  solo
                  :items="categories"
                  v-model="application.category"
                  label="LEAVE CATEGORY"
                  class="input-group--focused"
                  item-value="text"
                ></v-select>
              </v-flex>
            </v-layout>
            <v-layout mb-5>
              <v-text-field
              required
              :rules="dataRules"
              textarea
              solo
              v-model="application.reason"
              label="Reason for leave"
              >
              </v-text-field>
            </v-layout>
          <v-btn large color="primary" id="submit" @click="update">SUBMIT</v-btn>
          </v-form>

      </v-container>
    </v-card-text>
    <v-snackbar
    v-model="snackbar"
    top
    color="success"
    >
      YOUR FORM HAS BEEN SUBMITTED
    </v-snackbar>
  </v-card>
</v-app>
</template>

<script>
import axios from 'axios'

export default {
  name: 'apply',
  components: {
  },
  data () {
    return {
      check: 'bye',
      dataRules: [v => !!v || 'Item is required'],
      valid: true,
      menu: false,
      menu2: false,
      categories: ['Sick Leave', 'On Duty', 'Earn Leave'],
      application: {
        from: '2018-07-15',
        to: null,
        category: '',
        reason: 'lorem'
      },
      snackbar: false
    }
  },
  methods: {
    update () {
      var that = this
      axios.post('http://localhost:3000/one', {
        'application': this.application
      }).then(function(){
        that.snackbar = true
        that.application.from = ''
        that.application.to = ''
        that.application.reason = ''
      })
        .catch(function (error) {
          console.log(error)
        })

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Test file]

LeaveTest.spec.js

import 'babel-polyfill'
import { createLocalVue, mount } from '@vue/test-utils'
import apply from '@/components/apply'
import Vuetify from 'vuetify'
import axios from 'axios'

const localVue = createLocalVue()
localVue.use(Vuetify)

jest.mock('axios', () => ({
  post: jest.fn()
}))

const wrapper = mount(apply, {
  localVue,
  mocks: { apply: true }
})


it.only('resets input fields after submit', () => {
  
  const button = wrapper.find('#submit')
  button.trigger('click')
  expect(wrapper.vm.application.from).toBe('')    
  expect(wrapper.vm.application.to).toBe('')    
  expect(wrapper.vm.application.reason).toBe('')    
})

What is expected?

No errors and the test to pass.

What is actually happening?

Test fails and many errors.

Error information can be found on this link-

https://notepad.pw/vue-test-utils-issue

---

These errors are constant even for simpler tests and even if the tests pass.

Please note the it.only(), the above shown error is for that test case only.

[KaelWD]

Duplicate of #532

[eddyerburgh]

Thanks @KaelWD , closed in favor of #532.