@click event cannot be tested with a find-trigger function in Jest

[TheoSl93]

Version

1.0.0-beta.19

Reproduction link

https://codesandbox.io/s/2vlyrzkm1p

Steps to reproduce

The next test in jest does not work with the code in the example:

it('calls the toggleVisibility method when clicking', () => {
    wrapper = shallowMount(App)
    wrapper.vm.toggleVisibility = jest.fn()

    wrapper
      .find('.unread-messages')
      .trigger('click')

    expect(wrapper.vm.toggleVisibility).toHaveBeenCalledTimes(1)
  })

Only if click is changed click.self does the test work, but in that case no component inside can be clicked (and that's what I want to achieve)

What is expected?

The test pass whether click or click.self is wrote.

What is actually happening?

The test fails.

---

A console.log of the wrapper shows that it has the class in the wrapper, so it should be found and triggered.

[eddyerburgh]

First, have you tried this with beta.24?

If the problem persists, can you provide a runnable reproduction?

[TheoSl93]

Hi,
I've tried with beta.24 but the problem persists. I'll make a repository that you can fork.
Thanks!

[miriamgreis]

Hey, we just updated to beta.24 and have the same problem. We had to refactor some of our tests using trigger('click') to make them work again.

[TheoSl93]

Here is a repo with a minimal runnable reproduction: https://github.com/TheoSl93/vueUtils-repro-929

Thanks!!

[lmiller1990]

@TheoSl93 I pulled your repo and got it working. You can use setMethods, then your test passes.

  it('calls the toggleVisibility method when the icon is clicked', () => {
    wrapper.setMethods({ toggleVisibility:jest.fn() })

    wrapper
      .find('.unread-messages')
      .trigger('click')

    expect(wrapper.vm.toggleVisibility).toHaveBeenCalledTimes(1)
  })

[TheoSl93]

It works! Thanks a lot for the tip. What's the difference between the two methods, by the way?

[eddyerburgh]

setMethods updates the instance, which re render vnodes (and ultimately Elements) to use the new method in their on handlers.

I'm going to close this issue, since we aren't able to change this behavior in Vue Test Utils.

The recommended way to set a method is to use setMethods

[AlexZhong22c]

Problem has been resolved. I'm using beta.28. I just want to know why we should using setMethods update the instance?

In the code example above, why don't wrapper.find('.unread-messages').trigger('click') share the same instance?

This is not a issue, its just a question @eddyerburgh

[AlexZhong22c]

#983 (comment)

Why we need to re render the component after stubing a components methods?

Stub replace the Object reference and Vue is not reactive to the change of Object, which is similar to the princeple for normal Object defined as Vue data.

Is my assumption right?

[BorisAng]

Hi everyone,

I'm using beta.29 and this problem still seems to persist.

I have the following template

<template>
    <b-input-group class="sm-2 mb-2 mt-2">
      <b-form-input
        :value="this.searchConfig.Keyword"
        @input="this.updateJobsSearchConfig"
        class="mr-2 rounded-0"
        placeholder="Enter Search term..."
        id="input-keyword"
      />
      <b-button
        @click="searchJobs"
        class="rounded-0"
        variant="primary"
        id="search-button"
      >
        Search
      </b-button>
      <b-button
        @click="resetFilter"
        class="rounded-0 ml-2"
        variant="primary"
        id="reset-button"
      >
        Reset
      </b-button>
    </b-input-group>
</template>

My tests are:

it('should call searchJobs method on search button click event', async () => {
    wrapper.find('#search-button').trigger('click')
    expect(await searchJobs).toHaveBeenCalled()
  })

 //it('should call resetFilter method on reset button click event', () => {
    //wrapper.find('#reset-button').trigger('click')
    //expect(resetFilter).toHaveBeenCalled()
 // })

  it('should call resetFilter method on reset button click event', () => {
    wrapper.setMethods({ resetFilter: jest.fn() })
    wrapper.find('#reset-button').trigger('click')
    expect(wrapper.vm.resetFilter).toHaveBeenCalled()
  })

The first test passes successfully and it has searchJobs mocked inside shallow mounted wrapper like so

wrapper = shallowMount(JobsSearch, {
      methods: {
        updateJobsSearchConfig,
        searchJobs,
        resetFilter,
        emitEvents
      },
      localVue,
      store })

As you can see I, I tried mocking resetFilter and running the same test as with searchJobs but calling the correct function which didn't work. Then I tried using setMethods as @lmiller1990
lmiller1990 suggested but Im still getting 'Expected mock function to have been called, but it was not called.' on the second test.

Any help will be greatly appreciated.

[lmiller1990]

Hey @BorisAng , can you post the entire test (with how you do jest.fn) etc? Or - ideally a repo that I can pull and repro the error would be ideal. The code looks okay, but it's possible something else is incorrect (or there is a bug).

[BorisAng]

@lmiller1990 here is the test file:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
// BootstrapVue is necessary to recognize the custom HTML elements
import BootstrapVue from 'bootstrap-vue'
import JobsSearch from '@/components/jobs/JobsSearch.vue'

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(BootstrapVue)

describe('JobsSearch.vue', () => {
  let actions
  let state
  let store
  let wrapper
  let updateJobsSearchConfig
  let searchJobs
  let resetFilter
  let emitEvents

  beforeEach(() => {
    state = {
      jobs: {
        paged: {
          size: 100,
          page: 1
        },
        search: {
          Keyword: '',
          status: [],
          ucode: []
        }
      }
    }

    actions = {
      updateJobsPagedConfig: jest.fn()
    }

    store = new Vuex.Store({
      actions,
      state
    })

    updateJobsSearchConfig = jest.fn()
    searchJobs = jest.fn()
    resetFilter = jest.fn()
    emitEvents = jest.fn()

    wrapper = shallowMount(JobsSearch, {
      methods: {
        updateJobsSearchConfig,
        searchJobs,
        resetFilter,
        emitEvents
      },
      localVue,
      store })
  })

  afterEach(() => {
    wrapper.destroy()
  })

// Tests go here, I have provided them above
})

The JobsSearch component also uses Vuex and has some actions, so I have mocked these. As you can see, I am mocking searchJobs and resetFilter in exactly the same way and then running pretty much the same tests just using the two functions respectively.

[nickelaos]

I have a similar problem. I don't understand why my cancelAlert() method is not called in tests... The strangest thing is that the code inside the function is executed...




Please, advice. @eddyerburgh