如何使用带有测试库的玩笑来测试打字稿应用程序？

Question

我正在尝试测试打字稿应用程序（没有任何 js 框架）。但是对此没有任何想法。是否可以使用测试库进行测试？

谁能给我一份指南或帮助我测试这个简单的 ts 文件？

这是我的带有测试文件的 ts 文件：

export default class MyClass {
    constructor() {
        this.render();
    }

    render() {

        const el: HTMLInputElement = document.createElement('input') as HTMLInputElement;
        const link: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement;
        const container: HTMLBodyElement = document.querySelector('body') as HTMLBodyElement;

        link.innerHTML = 'Click Me!';
        link.setAttribute('href', '#');
        link.setAttribute('target', '_blank');

        el.setAttribute('type', 'file');
        container.appendChild(el);
        container.appendChild(link);

        el.addEventListener('change', (event) => {
            if ('files' in el) {
                const availFile: File = el.files![0];
                const blob = new Blob([availFile], { type: availFile.type });

                const objectURL = window.URL.createObjectURL(blob);
                link.setAttribute('href', objectURL);
            }
        });
    }
}

我尝试使用测试库：但对没有 js 框架的测试一无所知

进口{ 屏幕，获取标签文本，获取文本， getByTestId, queryByTestId，等待 } 来自“@testing-library/dom”；

import MyClass from "./index";

describe('testing as first', () => {

    it("renders", () => {

    })

});

这是我的 package.json:

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --config=webpack.dev.js",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "devDependencies": {
    "@babel/core": "^7.8.0",
    "@babel/preset-env": "^7.8.2",
    "@babel/preset-typescript": "^7.8.0",
    "@testing-library/dom": "^6.11.0",
    "@types/jest": "^24.0.25",
    "babel-jest": "^24.9.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.9.0",
    "jestpack": "^0.2.0",
    "ts-jest": "^24.3.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.4",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

是否需要任何额外的源来安装？

Answer 1

dom 测试库仅提供测试组件的测试实用程序。您缺少一种呈现组件的方法。

您可以使用 Cypress 或 Puppeteer。这些库还有一个测试库，可以使用 dom 测试库实用函数。

如何使用带有测试库的玩笑来测试打字稿应用程序？

How to test typescript application using jest with testing libraray?

typescript

testing-library