How to unit test inner function(not return) of setup in Vue 2.7/3?

[targetlucked69]

Subject of the issue

Unable to mock inner function called by a returned function

Steps to reproduce

export default {
  setup() {
    function outer() {
      inner();
    }
    function inner() {
      // do something for only outer function
    }
    return { outer, inner };
  }
};

test('should whatever', async () => {
  const actionSpy = jest.spyOn(wrapper.vm, 'inner')
  wrapper.vm.outer()
  expect(actionSpy).toHaveBeenCalled()
})

Expected behaviour

It should have been called

Actual behaviour

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

[devtopher]

I'm not sure if this helps or not, but I just found that declaring the spy anywhere but the top of the test before the mounting happens is the only way to get it to work accurately. Ex.

const actionSpy = jest.spyOn(component, 'inner)
const wrapper = factory() // or mount(...etc
works, but
const wrapper = factory() // or mount(...etc
const actionSpy = jest.spyOn(component, 'inner)
fails.

Again, I'm not sure if that's what's happening here in your component but thought I'd share in hopes that it helps

[targetlucked69]

Hey thank you for answering @devtopher! That's an interesting find though problem is I need to pass wrapper.vm and not the component instance.

[mlbiche]

I noticed a similar issue when migrating a component to <script setup> Composition API and Vue ^2.7. The existing test case calling wrapper.vm.componentMethod no longer works (... is not a function) as if functions defined in setup are not injected in the vm as methods.

[mlbiche]

I noticed a similar issue when migrating a component to <script setup> Composition API and Vue ^2.7. The existing test case calling wrapper.vm.componentMethod no longer works (... is not a function) as if functions defined in setup are not injected in the vm as methods.

Hummm, indeed, even computed vales are no longer accessible from wrapper.vm.componentComputedValue

[wobsoriano]

Because that's not how you should be testing components. Do not test component internals.

Say you have this:

<template>
  <div>
    <div data-testid="count">Count: {{ count }}</div>
    <button data-testid="increment-button" @click="incrementCount">
      Increment
    </button>
  </div>
</template>

<script>
export default {
  data: () => ({ count: 0 }),
  methods: {
    incrementCount() {
      this.count++
    }
  }
}
</script>

Most people test it like this:

it('calls correct method on button click', () => {
  createComponent()
  jest.spyOn(wrapper.vm, 'incrementCount').mockImplementation(() => {})

  findIncrementButton().trigger('click')

  expect(wrapper.vm.incrementCount).toHaveBeenCalled()
  expect(wrapper.vm.count).toBe(1)
})

In the code above, it's spying on component methods and making sure that when the button is clicked, the incrementCount method is called. It also checks if the count data is updated.

Both of these are wrong. You are testing the framework (Vue itself).

You should instead test the component output:

const findCount = () => wrapper.find("[data-testid='count']")
const findIncrementButton = () => wrapper.find("[data-testid='increment-button']")

it('increases the count on Increment button click', async () => {
  createComponent()
  expect(findCount().text()).toBe('Count: 0')

  findIncrementButton().trigger('click')
  await nextTick()

  expect(findCount().text()).toBe('Count: 1')
})

As you can see, we are not touching the component internals. We are only testing the output.

Here's a great video about unit testing best practices with Vue.

[mlbiche]

@wobsoriano Waouh ! Thanks for the clarification !

Both of these are wrong. You are testing the framework (Vue itself).

Thanks for confirming this feeling I had when looking for Vue test examples.

Your example makes more sense to me, and I'll move to this logic then !