Closed
Description
Version
1.0.0-beta.16
Reproduction link
Steps to reproduce
Computed props are not reactive when using operation on primitive types, when they are used in template and the data, they are using, are setData() after mount/shallowMount
Read the test to understand it
<template>
<div>
<child-component
:workers="computedWorkers"
/>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'Component',
components: {
ChildComponent,
},
data: () => ({
workers: [],
}),
computed: {
computedWorkers() {
return this.workers.length === 0
},
},
}
</script>
What is expected?
import { mount } from '@vue/test-utils'
import Component from './Component.vue'
describe('components | Component', () => {
describe('template', () => {
it('should have a computedWorkers set to false because not empty', () => {
// Given
const wrapper = mount(Component)
// When
wrapper.setData({ workers: [{}] })
// Then
expect(wrapper.vm.$data.workers).toEqual([{}])
expect(wrapper.vm.computedWorkers).toEqual(false)
})
})
})
What is actually happening?
import { mount } from '@vue/test-utils'
import Component from './Component.vue'
describe('components | Component', () => {
describe('template', () => {
it('should have a computedWorkers set to false because not empty', () => {
// Given
const wrapper = mount(Component)
// When
wrapper.setData({ workers: [{}] })
// Then
expect(wrapper.vm.$data.workers).toEqual([{}])
expect(wrapper.vm.computedWorkers).toEqual(true)
})
})
})
could you provide a template of CodePen, CodeSandbox if you want a link, please?
Metadata
Metadata
Assignees
Labels
No labels