如何对快速服务器生成的.ejs文件进行单元测试？

问题描述

我有一个简单的http express服务器，该服务器提供一些路由，例如home，about，news ...

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

我安装了@testing-library和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'],}

解决方法

我提供了该解决方案，因为我们需要运行并服务.ejs进行测试，因此，首先需要在查看ejs软件包文档中的一些解决方案之后，渲染ejs文件，我发现也许可以首先通过此功能呈现ejs文件：

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

如您所见，它将为您提供string的ejs渲染文件，然后您可以将结果传递到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)
      })
    })
  }
})

感谢任何让我知道我做错了什么的人！