test: add test coverage for error/edge cases

Author: danielroe

src/utils/script-setup.ts

@@ -24,7 +24,7 @@ const DEFINE_MODEL = 'defineModel'
  */
 export async function preTranspileScriptSetup(sfc: SFCDescriptor, id: string): Promise<SFCScriptBlock> {
   if (!sfc.scriptSetup) {
-    throw new Error('No script setup block found')
+    throw new Error('[vue-sfc-transformer] No script setup block found')
   }
   const context = await prepareContext(sfc as SFCDescriptor & { scriptSetup: SFCScriptBlock }, id)
   const resultBuilder = new context.utils.MagicString(sfc.scriptSetup.content)
@@ -104,10 +104,10 @@ function processDefineEmits(node: Expression, context: Context): string | undefi
     return
   }
 
-  const emitsRuntimeDecl = node.arguments[0]
   if (!node.typeParameters) {
     return
   }
+  const emitsRuntimeDecl = node.arguments[0]
   if (emitsRuntimeDecl) {
     context.ctx.error(
       `${DEFINE_EMITS}() cannot accept both type and non-type arguments `
@@ -228,10 +228,7 @@ function getDefineModelRuntimeDecl(node: CallExpression, context: Context): [Str
   const [arg0, arg1] = node.arguments
   if (arg0 && arg0.type === 'StringLiteral') {
     if (arg1 && arg1.type !== 'ObjectExpression') {
-      context.ctx.error(
-        `${DEFINE_MODEL}()'s second argument must be an object.`,
-        arg1,
-      )
+      context.ctx.error(`${DEFINE_MODEL}()'s second argument must be an object.`, arg1)
     }
 
     return [arg0, arg1 as ObjectExpression]

test/setup.test.ts

@@ -3,6 +3,16 @@ import { parse } from 'vue/compiler-sfc'
 import { preTranspileScriptSetup } from '../src/utils/script-setup'
 
 describe('transform typescript script setup', () => {
+  it('throws error if no script setup block is present', async () => {
+    const sfc = parse(`<template><div></div></template><script></script>`, {
+      filename: 'test.vue',
+      ignoreEmpty: true,
+    })
+    await expect(preTranspileScriptSetup(sfc.descriptor, 'test.vue')).rejects.toThrow(
+      '[vue-sfc-transformer] No script setup block found',
+    )
+  })
+
   it('defineProps', async () => {
     expect(
       await fixture(
@@ -111,6 +121,10 @@ describe('transform typescript script setup', () => {
         })
       </script>"
     `)
+
+    await expect(fixture(`<script setup lang="ts">withDefaults(defineProps<{ msg?: string }>())</script>`)).rejects.toThrow(`[vue-sfc-transformer] The 2nd argument of withDefaults is required.`)
+
+    await expect(fixture(`<script setup lang="ts">withDefaults()</script>`)).rejects.toThrow(`[vue-sfc-transformer] withDefaults' first argument must be a defineProps call.`)
   })
 
   it('defineEmits', async () => {
@@ -159,6 +173,8 @@ describe('transform typescript script setup', () => {
       defineEmits(["click"])
       </script>"
     `)
+
+    await expect(fixture(`<script setup lang="ts">defineEmits<{ click: [] }>('click')</script>`)).rejects.toThrow(`[vue-sfc-transformer] defineEmits() cannot accept both type and non-type arguments at the same time. Use one or the other.`)
   })
 
   it('defineModel', async () => {
@@ -187,6 +203,15 @@ describe('transform typescript script setup', () => {
       defineModel("msg", { type: String })
       </script>"
     `)
+    expect(
+      await fixture(
+        `<script setup lang="ts">defineModel<string | number | string[]>('msg')</script>`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "<script setup>
+      defineModel("msg", { type: [String,Number,Array] })
+      </script>"
+    `)
     expect(
       await fixture(
         `<script setup lang="ts">defineModel<string>({ required: true })</script>`,
@@ -205,6 +230,8 @@ describe('transform typescript script setup', () => {
       defineModel("msg", { type: String, ...{ required: true } })
       </script>"
     `)
+
+    await expect(fixture('<script setup lang="ts">defineModel("foo", "bar")</script>')).rejects.toThrow(`[vue-sfc-transformer] defineModel()'s second argument must be an object.`)
   })
 
   async function fixture(src: string): Promise<string> {

test/template.test.ts

@@ -74,6 +74,12 @@ describe('transform typescript template', () => {
     ).toMatchInlineSnapshot(`"<MyComponent v-slot="{ remaining, duration }">{{ remaining }}</MyComponent>"`)
   })
 
+  it('compound expressions', async () => {
+    expect(await fixture(`<slot :name="(foo as string) + bar" />`)).toEqual(
+      `<slot :name="foo + bar" />`,
+    )
+  })
+
   it('custom directives', async () => {
     expect(
       await fixture(`<div v-highlight="(highlight as boolean)" />`),

vitest.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
   },
   test: {
     coverage: {
+      enabled: true,
       include: ['src'],
       reporter: ['text', 'json', 'html'],
     },