I've created a starter project with vue ui
(typescript, babel, linter). Everything works fine, but I can't quite understand how to make Composition API's setup
method to work. It's simply not being called (log output is empty) Here's where I'm stuck.
vue: 3.0.0-rc.10
vue-cli: 4.5.4
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import HelloWorld from './components/HelloWorld.vue'
@Options({
components: {
HelloWorld
},
setup () {
console.log('SETUP HERE')
}
})
export default class App extends Vue {
setup () {
console.log('SETUP THERE')
}
}
</script>
The setUp method is a hook provided by JUnit that executes prior to each and every test method you define. There is also a corresponding tearDown method that you might use for common test cleanup.
First, JUnit 4 has a setup method that is invoked before each test method. This method is typically used for creating and configuring the system under test. This means that: We should create the dependencies of the tested object in this method.
In Mockito, you can specify what to return when a method is called. That makes unit testing easier because you don't have to change existing classes. Mockito supports two ways to do it: when-thenReturn and doReturn-when . In most cases, when-thenReturn is used and has better readability.
The main purpose of using the Mockito framework is to simplify the development of a test by mocking external dependencies and use them in the test code. As a result, it provides a simpler test code that is easier to read, understand, and modify.
You should import setup
from vue-class-component
then use it like :
<template>
<div>Count: {{ counter.count }}</div>
<button @click="counter.increment()">+</button>
</template>
<script lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Vue, setup } from 'vue-class-component'
function useCounter () {
const count = ref(0)
function increment () {
count.value++
}
onMounted(() => {
console.log('onMounted')
})
return {
count,
increment
}
}
export default class Counter extends Vue {
counter = setup(() => useCounter())
}
</script>
for more details please check this issue
I had the same problem and it was caused by extending the child component. The composition API (setup method) is never called if you extend the component. While the options API lifecycle hooks are called in both components.
// child.js
<script>
import { onMounted } from "vue";
export default {
name: "ChildComponent",
setup() {
console.log('Child - setup()');
onMounted(() => {
console.log('Child - mounted (composition API)');
})
},
mounted() {
console.log('Child - mounted (option API)');
}
}
</script>
// parent.js
<script>
import ChildComponent from "./child.js";
import { onMounted } from "vue";
export default {
name: "ParentComponent",
extends: ChildComponent,
setup() {
console.log('Parent - setup()');
onMounted(() => {
console.log('Parent - mounted (composition API)');
})
},
mounted() {
console.log('Parent - mounted (option API)');
}
}
</script>
OUTPUT
Parent - setup()
Parent - mounted (composition API)
Child - mounted (option API)
Parent - mounted (option API)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With