Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

245
Vistas
How to test a method in Class which extends HTMLElement with Jest?

I have a abstract class.

class Component extends HTMLElement {
  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = this.template();
  }

  template() {
    return '';
  }
  ...
}

And I have a Class which extends the Component class.

class StatisticsModal extends Component {
  render() {
    const winningCounts = this.getWinningCounts(winningNumbers, lottoList);
    const earningsRate = this.getEarningsRate(winningCounts);
    this.innerHTML = this.template(winningCounts, earningsRate);
    document.querySelector('body').classList.add('modal-open');
  }

  getEarningsRate(winningCounts) {
    const total = [5, 4, 3, 2, 1].reduce((money, rank) => {
      return money + winningCounts[rank] * LOTTO.PRIZE_MONEY[rank];
    }, 0);
    return Math.floor((total / 1000) * 100);
  }

  getWinningCounts(winningNumbers, lottoList) {
    return lottoList.reduce((winningCounts, lottoNums) => {
      const count = intersect(lottoNums, winningNumbers.normal).length;
      if (count === 6) winningCounts[1] += 1;
      else if (count === 5 && lottoNums.includes(winningNumbers.bonus)) winningCounts[2] += 1;
      else if (count === 5) winningCounts[3] += 1;
      else if (count === 4) winningCounts[4] += 1;
      else if (count === 3) winningCounts[5] += 1;
      return winningCounts;
    }, Array(6).fill(0));
  }
  ...
  ...
}

Now, I want to test the getWinningCounts of StatisticsModal component with Jest.

So, I write the test code like below.

describe('This is test description', () => {
  const winningNumbers = {
    normal: [1, 2, 3, 4, 5, 6],
    bonus: 7,
  };
  test('Let's do test!', () => {
    const lottoList = [
      [1, 22, 33, 44, 55, 66],
      [1, 2, 33, 44, 55, 66],
      [1, 2, 3, 44, 55, 66],
      [1, 2, 3, 4, 55, 66],
      [1, 2, 3, 4, 5, 66],
      [1, 2, 3, 4, 5, 6],
      [1, 2, 3, 7, 11, 22],
    ];
    const statisticsModal = new StatisticsModal(); // ReferenceError: HTMLElement is not defined
    const winningCounts = statisticsModal.getWinningCounts(winningNumbers, lottoList);
    expect(winningCounts[5]).toBe(2);
  });
});

But I got error.

"ReferenceError: HTMLElement is not defined"

So, I want to know how to test that method in class.

Check please :D

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda