vuejs / vue-test-utils

Component Test Utils for Vue 2
https://vue-test-utils.vuejs.org
MIT License
3.57k stars 669 forks source link

Computed value does not update when data updates #2071

Open AniaKru95 opened 1 year ago

AniaKru95 commented 1 year ago

Subject of the issue

I change data values to display some chunk of template. This chunks depend on computed property, but it never change.

Steps to reproduce

Template:

  <apexchart v-if="isSingleChartActive"
             type="bar"
             height="700px"
             :options="columnChartOpts"
             :series="columnChartSeries"/>

Computed variable

const isSingleChartActive = computed(() => columnChartSeries.length !== 0 && props.isSingleChart)

Prop variable

const props = withDefaults(defineProps<Props>(), {
    isSingleChart: true
})

Data variable

const columnChartSeries = reactive([])

Expected behaviour

Computed value should also change

Actual behaviour

it('should display single chart2', async () => {
    const wrapper = await mount(MyChart,
        {
            propsData: {
                isSingleChart: true,
            },
            global: {
                stubs: {
                    apexchart: true
                }
            }
        })
    expect(wrapper.find("apexchart-stub").exists()).toBeFalsy() //true
    wrapper.vm.columnChartSeries = [{
        name: "dummy",
        data: [{"10:00": 25}],
        system: "pod"
    }]
    await nextTick()
    console.log(wrapper.vm.columnChartSeries.length !== 0)    //true
    console.log(wrapper.vm.isSingleChart)    //true
    console.log(wrapper.vm.isSingleChartActive)    //false

    expect(wrapper.find("apexchart-stub").exists()).toBeTruthy()
})

isSingleChartActive should be also true!

I've tried to setTimeout, but does not work.