Как выполнить модульное тестирование файлов .ejs, созданных экспресс-сервером?

Question

У меня есть простой экспресс-сервер http, который обслуживает несколько маршрутов, таких как дом, о нас, новости...

для каждого из маршрутов я использую res.render('some_ejs_file'), чтобы отобразить html-страницу с .ejsрасширение. на каждой странице есть.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 составленные файлы разметки?

также вот мой файл конфигурации jest:

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

Answer 1

Я нашел решение, потому что нам нужно запускать и обслуживать .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)
      })
    })
  }
})

цените любого, кто сообщает мне, что я делаю что-то не так!

Answer 2

Amdev проделал большую работу (спасибо), разработав это, но я немного поправился, так как Jest не мог обнаружить тест, когда описания () и тест () были вложены друг в друга. Следующий рефакторинг кода может помочь другим.