QUESTION: Is there any way to override composition API `setup` data?

[luucasrb]

The documentation says:

notice that setData does not modify composition API setup() data.

Also I've tried global.provide, but it only works for provide/inject methods.

So, the goal here is to wrap some variables declared in the setup() component function (probably inside Mount or shallowMount methods) so I can test it isolated.

Appreciate any help!

[cexbrayat]

Hi @luucasrb

There is currently no such thing in the API. Do you have a specific use case in mind? Maybe we can give you some tips based on how we test such things in our projects.

[luucasrb]

Hi @cexbrayat,

Example:

Component.vue

<template>
  <ChildComponent :class="exampleValue" />
</template>

<script lang="ts">
import externalValue from '../anywhere';

export default {
  setup() {
    const exampleValue = externalValues; // some proccessing may come here

    return { 
      exampleValue;
    }
  }
}
</script>

So, I would like to mount the parent Component for testing, but using some random exampleValue instead of using the imported one. Something like:

Component.spec.ts

  const ComponentWrapper = mount(Component); // May set exampleValue = 'random-value' within the `mount`

  ...
  expect(ComponentWrapper.vm.exampleValue).toContain('random-value');

In this scenario, if I change externalValue my test wouldn't break because of 'random-value' setted.

Thanks.

[cexbrayat]

👍 The way I test this kind of thing in my apps is to rely on jest.mock https://jestjs.io/docs/mock-functions#mocking-modules, and override externalValue with random-value.

Something like:

jest.mock('../anywhere', () => 'random-value');
const ComponentWrapper = mount(Component);
expect(ComponentWrapper.vm.exampleValue).toContain('random-value');

This is super flexible and should cover most cases you'll encounter.
I'm going to close the issue for now. Feel free to reopen if you encounter another use case.