Update default state based on the property - unit-testing

Question

I am working on a button component that also receives a default state value.
export default {
props: {
defaultState: {
type: Boolean,
default: false
}
},
data() {
return {
currentState: this.defaultState
}
},
computed: {
isActive() {
return this.currentState;
},
}
...
}
And i can am using it like <button :defaultState="true"/>.
Now the problem is when I am trying to write a test for my component I always gets the false (which is default value) value of currentState after using the wrapper.setProps({ defaultState: true }) that should be true
it.only ('should work with dynamic state change', async () => {
wrapper.setProps({
defaultState: true
});
await wrapper.vm.$nextTick();
// shows the true
console.log( wrapper.vm.defaultState );
// should be true but i get false
console.log( wrapper.vm.currentState );
});
Can anybody please point me to the right direction and what I have missed?

Answer 1

a better solution for this is to create a computed property. This would eliminate the need for both the data property and the watcher:
export default {
props: {
defaultState: {
type: Boolean,
default: false
}
},
computed: {
currentState() {
return this.defaultState
}
}
}
However, if your component is this simple, the computed currentValue property is not needed at all! Because all it does it repeat the value of the defaultState prop which by itself is already reactive.
So it means you are adding complexity to a component just to make it work for the tests... and the component would work perfectly even if you didn't have this.