Question 244081 in Html Question posted in
Some basic documentation can be found here.

How can I determine the type of an HTML element in Jest?

I need a way to determine the type of an HTML element in Jest. I have tried below code to see If HTMLLabelElement is available. I am getting ReferenceError: HTMLLabelElement is not defined

Jest it() function code snippet

it('check HTML label Element type', async () => {
      
      const doc = document.createElement('label');

      console.log(doc instanceof HTMLLabelElement);

});

Let me know if anybody have any idea on this.

Tags:

2

Answers


  1. 0

    If you need to test against some class, explicitly import that class. In the case of the DOM, HTML classes are bound to window, so:

    import { JSDOM } from "jsdom";
const { window } = new JSDOM();
const { document, HTMLLabelElement } = window;

describe("some highly questionable testing", () => {
  it("is a meaningless test because we know it's true by definition", async () => {
    const label = document.createElement("label");
    console.log(label instanceof HTMLLabelElement);
  });
});

    That said, this is a baffling weird test: by definition elements implement their element class in any DOM compliant implementation. By using JSDom, you are already guaranteed that this is going to be true, and testing for it gets you nothing that wasn’t already true before you even ran any tests.

    So I’m pretty sure you’re actually testing for completely the wrong thing in whatever your real test cases are, like checking if a tag yields a standard or custom element, which you wouldn’t do this way, and you really should have asked about whatever you actually want to do instead.

    Login or Signup to reply.
  2. 0

    All of the HTMLElement interfaces should be available in the browser.

    Since you are running Jest as a Node CLI via ts-jest, you have to make sure that you have a DOM document object available during testing. Make sure you install jest-environment-jsdom.

    Sample code

    The following minimal configuration works.

    index.test.ts

    /**
 * @jest-environment jsdom
 */

it("should create an HTMLLabelElement", async () => {
  const label: HTMLLabelElement = document.createElement("label");
  label instanceof HTMLLabelElement;
});

it("should create an HTMLInputElement", async () => {
  const input: HTMLInputElement = document.createElement("input");
  input instanceof HTMLInputElement;
});

it("should create an HTMLDivElement", async () => {
  const div: HTMLDivElement = document.createElement("div");
  div instanceof HTMLDivElement;
});

    index.test.js

    /**
 * @jest-environment jsdom
 */

it("should create an HTMLLabelElement", async () => {
  document.createElement("label") instanceof HTMLLabelElement;
});

it("should create an HTMLInputElement", async () => {
  document.createElement("input") instanceof HTMLInputElement;
});

it("should create an HTMLDivElement", async () => {
  document.createElement("div") instanceof HTMLDivElement;
});

    jest.config.js

    /** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

    tsconfig.json

    {
  "compilerOptions": {
    "target": "esnext"
  }
}

    package.json

    {
  "name": "ts-jest-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^29.5.4",
    "jest": "^29.6.4",
    "jest-environment-jsdom": "^29.6.4",
    "ts-jest": "^29.1.1",
    "typescript": "^5.2.2"
  }
}

    References

    Here is a mock for demonstration purposes only.

    // Mock Jest's global `it` function:
let tests = 0, successful = 0, failed = 0;
async function it(message, test) {
  try {
    tests++;
    await test();
    successful++;
  } catch (e) {
    console.error(message);
    failed++;
  }
}

(async function() {
  await it('should create an HTMLLabelElement', async() => {
    document.createElement('label') instanceof HTMLLabelElement;
  });

  await it('should create an HTMLInputElement', async() => {
    document.createElement('input') instanceof HTMLInputElement;
  });

  await it('should create an HTMLDivElement', async() => {
    document.createElement('div') instanceof HTMLDivElement;
  });
  
  console.log({ tests, successful, failed });
})();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search