How to perform unit tests on an 'inline composable'

[RonaldJair19]

Good morning/afternoon/evening community,

I am having problems to perform unit tests to an 'inline composable'. Below I will present an example code to what I mean by this concept:

<script setup>

const { methodTest  } = useInlineComposable()

const initialize = () => {
 console.log(methodTest())
}

function useInlineComposable() {
const variableTest = ref(null)

const methodTest = () => 'Hello word'

return {
variableTest,
methodTest 
}
}

</script>

When trying to mock the 'methodTest' function as follows:

vi.spyOn(componentMountedInstance.vm, 'useInlineComposable').mockImplementation(() => ({
methodTest: vi.fn(() => 'Bye bye word')
}))

Or like this:

vi.spyOn(componentMountedInstance.vm, 'methodTest').mockImplementation( () => 'Bye bye word')

And I call the 'initialize ' function within my test, the mock does not work and continues to take the value that is set within composable, i.e. the 'methodTest' function continues to return 'Hello word'.

I have simplified the real case I have, but basically they are 'composables' that are defined within a 'setup script'. For testing I use Vitest and logically 'Vue test utils'.

If there is already a thread or discussion on this topic please share it with me.

Regards and thank you very much,

[cexbrayat]

Hi @RonaldJair19

I don't think this is possible, because spying in JS doesn't work like this.
Consider the following example in pure JS:

it('should mock the function fnInside', () => {
    // this is the setup of your component
    const factory = () => {
      const fnInside = () => 10
      const fnOutside = () => fnInside()
      return { fnInside, fnOutside }
    }
   // this is the mount(Component)
    const obj = factory()
   // override fnInside
    obj.fnInside = vi.fn().mockReturnValue(1)
    expect(obj.fnInside()).toBe(1) // the override works and returns 1
    expect(obj.fnOutside()).toBe(1) // fails, returns 10, because it uses an internal reference to fnInside and not our override
})

So you won't be able to do what you attempt.
The easiest solution is to extract your composable to a separate file.
See #775 (comment) for an example

[RonaldJair19]

Hi @cexbrayat

Thank you very much for your answer, explanation and solution .

Now I'm curious if this 'inline composable' pattern which is shown in the official Vue documentation in Evan You gist has this disadvantage when unit testing. So better to avoid it and use the 'composables' in separate files always.

As a personal preference I like such 'inline composable' pattern but while implementing my unit tests I have run into this problem. Maybe I should change my testing approach as well but I am curious about this still.

Thanks again for your time and answers

Regards,