test: test runtime compilation error warning

packages/runtime-core/__tests__/apiApp.spec.ts

@@ -270,7 +270,7 @@ describe('api: createApp', () => {
 
     const handler = (app.config.warnHandler = jest.fn(
       (msg, instance, trace) => {
-        expect(msg).toMatch(`Component is missing render function`)
+        expect(msg).toMatch(`Component is missing template or render function`)
         expect(instance).toBe(ctx.renderProxy)
         expect(trace).toMatch(`Hello`)
       }

packages/runtime-core/src/component.ts

@@ -348,8 +348,8 @@ function finishComponentSetup(
   const Component = instance.type as ComponentOptions
   if (!instance.render) {
     if (__RUNTIME_COMPILE__ && Component.template && !Component.render) {
-      if (compile) {
+      // __RUNTIME_COMPILE__ ensures `compile` is provided
-        Component.render = compile(Component.template, {
+      Component.render = compile!(Component.template, {
         isCustomElement: instance.appContext.config.isCustomElement || NO,
         onError(err: CompilerError) {
           if (__DEV__) {
@@ -365,20 +365,23 @@ function finishComponentSetup(
           }
         }
       })
-      } else if (__DEV__) {
+    }
+    if (__DEV__ && !Component.render) {
+      /* istanbul ignore if */
+      if (!__RUNTIME_COMPILE__ && Component.template) {
         warn(
           `Component provides template but the build of Vue you are running ` +
             `does not support on-the-fly template compilation. Either use the ` +
             `full build or pre-compile the template using Vue CLI.`
         )
-      }
+      } else {
-    }
-    if (__DEV__ && !Component.render) {
         warn(
-        `Component is missing render function. Either provide a template or ` +
+          `Component is missing${
-          `return a render function from setup().`
+            __RUNTIME_COMPILE__ ? ` template or` : ``
+          } render function.`
         )
       }
+    }
     instance.render = (Component.render || NOOP) as RenderFunction
   }
 

packages/vue/__tests__/index.spec.ts

@@ -1,4 +1,8 @@
 import { createApp } from '../src'
+import { mockWarn } from '@vue/runtime-test'
+
+describe('compiler + runtime integration', () => {
+  mockWarn()
 
   it('should support on-the-fly template compilation', () => {
     const container = document.createElement('div')
@@ -14,20 +18,21 @@ it('should support on-the-fly template compilation', () => {
     expect(container.innerHTML).toBe(`0`)
   })
 
-it('should correctly normalize class with on-the-fly template compilation', () => {
+  it('should warn template compilation errors with codeframe', () => {
     const container = document.createElement('div')
     const App = {
-    template: `<div :class="{ test: demoValue, test2: !demoValue }"></div>`,
+      template: `<div v-if>`
-    data() {
-      return {
-        demoValue: true
-      }
-    }
     }
     createApp().mount(App, container)
-  const classes = container.firstElementChild!.classList
+    expect(
-  expect(classes.contains('test')).toBe(true)
+      `Template compilation error: End tag was not found`
-  expect(classes.contains('test2')).toBe(false)
+    ).toHaveBeenWarned()
+    expect(`v-if/v-else-if is missing expression`).toHaveBeenWarned()
+    expect(
+      `
+1  |  <div v-if>
+   |       ^^^^`.trim()
+    ).toHaveBeenWarned()
   })
 
   it('should support custom element', () => {
@@ -40,3 +45,4 @@ it('should support custom element', () => {
     app.mount(App, container)
     expect(container.innerHTML).toBe('<custom></custom>')
   })
+})