如何使用笑话测试打字稿应用程序与测试库?

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 框架的测试一无所知

导入 { 屏幕 getByLabelText， getByText， getByTestId， queryByTestId， 等 } 来自 "@testing-library/dom";

import MyClass from "./index";
describe('testing as first', () => {
it("renders", () => {
})
});

这是我的包.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 测试库仅提供测试组件的测试实用程序。 您缺少呈现组件的方法。

你可以使用赛普拉斯或木偶师。 这些库还有一个测试库，能够使用 dom 测试库实用程序函数。