0

我有一个简单的 http Express 服务器，它服务于几个路由，比如 home、about、news 等。

对于每条路线，我使用res.render('some_ejs_file'), 来呈现带有.ejs扩展名的 html 页面。每个页面都有一个.js文件脚本，我只是想知道如何渲染.ejs文件以运行正确的 js 文件并渲染页面来测试它？

我安装了@testing-libraryand jest，这是我的home.test.js文件：

import '@testing-library/jest-dom/extend-expect'
import { JSDOM } from 'jsdom'
import fs from 'fs'
import path from 'path'

const html = fs.readFileSync(
  path.resolve(__dirname, '../views/pages/index.ejs'),
  'utf8'
)

let dom
let container

describe('Home page', () => {
  beforeEach(() => {
    dom = new JSDOM(html, { runScripts: 'dangerously' })
    container = dom.window.document.body
  })

  test('should show 1', () => {
    console.log('>>> ', container.querySelector('header'))
    expect(container.querySelector('h1')).not.toBeNull()
    expect(1).toBe(1)
  })
})

但问题是，当我来自 的querySelect东西时container，它总是返回null，我无法继续进行测试步骤。我做错了什么，如何获得.ejs组合标记文件的适当测试体验？

这是我的笑话配置文件：

module.exports = {
  clearMocks: true,
  setupFilesAfterEnv: ['regenerator-runtime/runtime'],
  testPathIgnorePatterns: ['/node_modules/'],
  moduleFileExtensions: ['js', 'jsx', 'ejs', 'ejx'],
}
4

1 回答 1

1

我找到了解决方案。因为我们需要运行和服务.ejs来测试，首先我们需要渲染ejs文件，在查看了ejs包文档中的一些解决方案后，我发现我可能可以通过这个函数先渲染ejs文件：

ejs.renderFile(filename, data, options, function(err, str){
    // str => Rendered HTML string
});

如您所见，它将为您提供一个stringejs 渲染文件，然后您可以将结果传递给JSDOM您的 DOM，以便在您的测试环境中与之交互！

这是我想出的最终解决方案：

import moment from 'moment'
import '@testing-library/jest-dom/extend-expect'
import { JSDOM } from 'jsdom'
import fs from 'fs'
import path from 'path'
import ejs from 'ejs'

const targetFile = path.resolve(__dirname, '../views/pages/index.ejs')

ejs.renderFile(targetFile, function (err, str) {
  if (str) {
    let dom
    let container

    describe('Home page', () => {
      beforeEach(() => {
        dom = new JSDOM(str, { moment }, { runScripts: 'dangerously' })
        container = dom.window.document.body
      })

      test('should show 1', () => {
        console.log('>>> ', container.querySelector('h1').textContent)
        expect(container.querySelector('h1')).not.toBeNull()
        expect(1).toBe(1)
      })
    })
  }
})

我很高兴听到我做错了什么！

于 2020-08-15T14:43:55.800 回答