TypeError: Class constructor HTMLElement cannot be invoked without ‘new’

This error message has been a headache for me this week. I noticed that there were no good posts to cover it in the internet, so I decided to write this post. Hopefully, it will help someone in the future.

Technology stack

• React
• Typescript
• testing-library/react
• Jest

Definition of the problem

This error occurs while running a unit test. The component that you are running has probably some 3rd party code which contains class components and your EcmaScript configuration in tsconfig.json is not able to compile this file. Therefore, your test fails at some random point in the 3rd party code.

Solution

Unfortunately, there is no single solution for this error because every environment has its own problem because of similar situation. I will show how I handled it while I was using NRK’s core library.

1) Install custom elements es5 adapter for your project.

npm i custom-elements-es5-adapter

2) Import custom elements adapter to your setupTests file

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';

3) Run your test again. It should work 🙂

Sercan Leylek