test(vue-app): add template compiler helper (#6299)

packages/builder/src/builder.js

@@ -213,6 +213,10 @@ export default class Builder {
     return `${path}/**/*.{${this.supportedExtensions.join(',')}}`
   }
 
+  createTemplateContext () {
+    return new TemplateContext(this, this.options)
+  }
+
   async generateRoutesAndFiles () {
     consola.debug('Generating nuxt files')
 
@@ -223,7 +227,7 @@ export default class Builder {
     // Plugins
     this.plugins = Array.from(this.normalizePlugins())
 
-    const templateContext = new TemplateContext(this, this.options)
+    const templateContext = this.createTemplateContext()
 
     await Promise.all([
       this.resolveLayouts(templateContext),
@@ -527,6 +531,7 @@ export default class Builder {
 
         // Render template to dst
         const fileContent = await fsExtra.readFile(src, 'utf8')
+
         let content
         try {
           const templateFunction = template(fileContent, templateOptions)

packages/vue-app/test/__utils__/index.js

@@ -1,3 +1,71 @@
+import path from 'path'
+import { remove } from 'fs-extra'
+import consola from 'consola'
+import { getNuxtConfig, Nuxt, Builder } from '../../../../test/utils'
+
+const rootDir = path.resolve(__dirname, '..')
+
+export async function compileTemplate (template, destination, options = {}) {
+  if (arguments.length < 3) {
+    options = destination || {}
+    destination = undefined
+  }
+
+  const config = getNuxtConfig(options)
+
+  config.rootDir = rootDir
+  config.dev = false
+  config.test = false
+  config.server = false
+
+  const nuxt = new Nuxt(config)
+  const builder = new Builder(nuxt)
+
+  const templateContext = builder.createTemplateContext()
+
+  const multipleTemplates = Array.isArray(template)
+  if (!multipleTemplates) {
+    template = [template]
+  }
+
+  templateContext.templateFiles = template.map((template) => {
+    if (typeof template === 'string') {
+      return {
+        src: path.resolve(rootDir, '../template', template),
+        dst: path.join(rootDir, '.nuxt', path.basename(template)),
+        custom: false
+      }
+    }
+
+    return {
+      src: path.resolve(rootDir, '../template', template.src),
+      dst: path.join(rootDir, '.nuxt', template.dst),
+      custom: template.custom
+    }
+  })
+
+  try {
+    // clear all destinations
+    await Promise.all(templateContext.templateFiles.map(({ dst }) => remove(dst)))
+
+    await builder.compileTemplates(templateContext)
+
+    if (multipleTemplates) {
+      return templateContext.templateFiles.map(template => template.dst)
+    }
+
+    const [template] = templateContext.templateFiles
+    return template.dst
+  } catch (err) {
+    consola.error(`Could not compile template`, err.message, template)
+    return false
+  }
+}
+
+export function importComponent (componentPath) {
+  return import(componentPath).then(m => m.default || m)
+}
+
 export const vmTick = (vm) => {
   return new Promise((resolve) => {
     vm.$nextTick(resolve)

packages/vue-app/test/nuxt-loading.test.js

@@ -1,11 +1,9 @@
 /**
  * @jest-environment jsdom
  */
-import { resolve } from 'path'
 import { mount, createLocalVue } from '@vue/test-utils'
 import { renderToString } from '@vue/server-test-utils'
-import { loadFixture } from '../../../test/utils'
-import { vmTick } from './__utils__'
+import { compileTemplate, importComponent, vmTick } from './__utils__'
 
 jest.useFakeTimers()
 
@@ -14,11 +12,10 @@ describe('nuxt-loading', () => {
   let Component
 
   beforeAll(async () => {
-    const config = await loadFixture('basic')
-    const componentDir = resolve(config.rootDir, '.nuxt/components')
+    const compiledTemplate = await compileTemplate('components/nuxt-loading.vue')
+    Component = await importComponent(compiledTemplate)
 
     localVue = createLocalVue()
-    Component = (await import(resolve(componentDir, 'nuxt-loading.vue'))).default
   })
 
   afterEach(() => jest.clearAllTimers())