如何使用 TypeScript、JSDOM、Mocha、Chai 的 class 方法（創建 HTML）測試視圖？

Question

當我調用它時，我無法在 class 視圖中獲取 JSDOM“文檔”。 我需要做什么？

我安裝了所有@types/依賴項，並且 JSDOM 在這種情況下運行良好，然后我直接從測試中調用它，當我調用View.ts時不起作用

//view.ts

interface View {
  _element_id?: string,
  _elem?: any,
};

class View {
  constructor(param: View) {
    this._element_id = param._element_id;
    this._elem = document.getElementById(param._element_id);
}
a = document.getElementById(this._element_id).textContent
}

export { View };

然后我創建了一個測試文件，它看起來像

//test.ts

import { View } from 'view';
import { assert } from 'chai';
import { JSDOM, FromFileOptions, DOMWindow } from 'jsdom';

const dom = new JSDOM(`<!DOCTYPE html><html><body><div id="slider">Hello!</div></body></html>`);
let document = dom.window.document;

let view = new View({
    _element_id: "slider"} as View)

describe('Test View',
    () => {
it('Simple JSDOM', () => {
    let a = document.getElementById("slider").textContent;
    assert.equal(a, "Hello!")};

第一次測試沒問題，但我需要運行下一次測試，現在不起作用

it('Call JSDOM from class View', () => {
    let a = view.a;
    assert.equal(a, "Hello!")}
};

錯誤是

this._elem = document.getElementById(param._element_id);
               ^
ReferenceError: document is not defined

Answer 1

所以，這就是我在查看 class 中獲得“文檔”的方式

//test.ts

import { View } from 'view';
import { expect, assert } from 'chai';
import * as mocha from 'mocha';

import { JSDOM, FromFileOptions, DOMWindow } from 'jsdom';

describe('Test View',
    () => {

        describe('Trial testing',
            () => {

                let view: any;

                beforeEach(function () {

                    return JSDOM.fromFile('./index.html').then((dom) => {

                            const { window } = dom;

                            view = new View({
                                _element_id: "slider",
                            } as View);
                        });

                });

                it('Get element with id', () => {

                    assert.equal(view.a, "Hello!")};

                });

            });

    });

如何使用 TypeScript、JSDOM、Mocha、Chai 的 class 方法（創建 HTML）測試視圖？

問題描述

1 個解決方案

解決方案1
0 2019-11-08 20:45:31

如何使用 TypeScript、JSDOM、Mocha、Chai 的 class 方法（創建 HTML）測試視圖？

問題描述

1 個解決方案

解決方案1 0 2019-11-08 20:45:31

解決方案1
0 2019-11-08 20:45:31