Question

我有一个新的Nuxt项目，并且在带有<template lang="md">的某些页面上使用markdownit。该项目可以构建并呈现良好的效果，但是当我尝试为其进行开玩笑的测试时，降价页面不会被适当的加载器解析。

这是降价页面：

<template lang="md">
# About Us
...
</template>

我在tests/pages.spec.js中的测试设置：

let nuxt = null

beforeAll(async () => {
  const config = {
    dev: false,
    rootDir: resolve(__dirname, '..')
  }
  nuxt = new Nuxt(config)
  await new Builder(nuxt).build()
  await nuxt.server.listen(4000, 'localhost')
}, 30000)

// Close server and ask nuxt to stop listening to file changes
afterAll(() => {
  nuxt.close()
})

describe('Main page', () => {
  // Init Nuxt.js and create a server listening on localhost:4000
  // Example of testing only generated html
  test('Route / exits and render HTML', async () => {
    const context = {}
    const { html } = await nuxt.server.renderRoute('/', context)
    expect(html).toContain('About Us')
  })

我的nuxt.config.js具有此功能：

  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify',
    '@nuxtjs/markdownit',
    'nuxt-responsive-loader',   // process image srcsets
  ],

运行jest时，出现这种错误：

    Nuxt build error

      ERROR in ./pages/about.vue?vue&type=template&id=fd87bea8&lang=md& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./pages/about.vue?vue&type=template&id=fd87bea8&lang=md&)
      Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):        (Emitted value instead of an instance of Error)
        Errors compiling template:
        Component template requires a root element, rather than just text.
        1  |
           |
        2  |  # About Us
           |  ^^^^^^^^^^

似乎vue-loader正在处理它，但在开玩笑的上下文中，它并没有像构建或运行开发服务器时那样添加markdownit-loader来处理降价。

测试nuxt + vue + markdown

0 个答案: