How to test typescript application using jest with testing libraray?

Question

I am trying to test the typescript app ( without any js frameworks ). But do not have any idea about it. is it possible to test with testing library at all?

any one share me a guide or help me to test this simple ts file?

here is my ts file with test file :

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);
            }
        });
    }
}

my try with testing-library: but do not have any idea about testing without js frameworks

import { screen, getByLabelText, getByText, getByTestId, queryByTestId, wait } from "@testing-library/dom";

import MyClass from "./index";

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

    it("renders", () => {

    })

});

here is my 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"
  }
}

Is it required any extra sources to install?

Answer 1

The dom testing library only provides the testing utilities to test components. You're missing a way to render the component.

You can use Cypress for it or Puppeteer. These libraries also have a testing library to be able to use the dom testing library utility functions.