0

我正在尝试测试打字稿应用程序（没有任何 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);
            }
        });
    }
}

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

从“@testing-library/dom”导入{屏幕，getByLabelText，getByText，getByTestId，queryByTestId，等待}；

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"
  }
}

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

4

1 回答 1

1

dom 测试库只提供测试工具来测试组件。您缺少一种渲染组件的方法。

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

于 2020-02-02T15:30:19.217 回答