Recently, I decided to focus on Test-Driven Development (TDD) using Typescript, so I started a new Vue project with vue-cli. I specifically chose Vue3, Typescript, and Jest for this project. However, when I ran the unit test initially, it failed to execute successfully. After looking into it further, I discovered that the mount command from @vue/test-utils was not rendering any of the prop values as expected:
In my HelloWorld.vue file:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
{{ test }}
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
props: {
msg: String,
}
})
export default class HelloWorld extends Vue {
msg!: string;
test: string = "It's a test";
}
</script>
Here is an excerpt from example.specs.ts file:
import { mount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
it("renders props.msg when passed", async () => {
const msg = "new message";
const wrapper = mount(HelloWorld, {
props: { msg }
});
expect(wrapper.text()).toContain(msg);
});
});
Upon printing wrapper.html(), the output showed:
<div class="hello" msg="new message"><h1></h1></div>
Surprisingly, the msg or test values were not being rendered in the HTML content. While these attributes were specified as props, they did not appear in the final rendering on the page.
I suspect that one possible cause could be the usage of a Typescript component instead of a more traditional one, which might be causing some confusion within the rendering process. At this point, I'm unsure about the exact solution. Any suggestions or advice would be greatly appreciated!