es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Párrafo de bienvenida de pruebas para igualar a “bienvenido” en lugar de cadena vacía.

Párrafo de bienvenida de pruebas para igualar a “bienvenido” en lugar de cadena vacía.

20 Jul, 2023 Programación

Estoy utilizando jest, jsdom y testing-library/dom para probar esta página (index.html). Espero que el párrafo sea “bienvenido”, pero estoy obteniendo una cadena vacía (“”) porque la página (index.html) se carga antes de JavaScript.

Me gustaría preguntar si hay otras formas de hacerlo. Gracias.

Así es como se ve mi código.
index.html

<html>
<body>
<p data-testid="paragraph"></p>

<script type="text/javascript">
const p = document.querySelector("p");
p.textContent = "bienvenido";
</script>
</body>
</html>
<code>
**index.test.js**
</code>
const { getByTestId } = require("@testing-library/dom");
const { JSDOM } = require("jsdom");
require("@testing-library/jest-dom/extend-expect");
const path = require("path");
const fs = require("fs");
let dom;
let container;

const html = fs.readFileSync(path.join(__dirname, "./index.html"));

describe("index", () => {
  beforeEach(() => {
    dom = new JSDOM(html, { runScripts: "dangerously" });
    container = dom.window.document.body;
  });

  it("should display welcome text", () => {
    const pEl = getByTestId(container, "paragraph");

expect(pEl.textContent).toEqual("bienvenido");

  });
});

captura de pantalla
ver descripción de la imagen aquí
gracias

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay otras formas de abordar el problema de que la página se cargue antes de que se ejecute JavaScript. Puedes usar la función domReady para asegurarte de que el código JavaScript no se ejecute hasta que el DOM esté completamente cargado.

    Aquí tienes una versión actualizada de tu archivo index.html que utiliza la función domReady:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mi página</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p data-testid="paragraph"></p>

<script>
  $( document ).ready(function() {
    const p = document.querySelector("p[data-testid='paragraph']");
    p.textContent = "bienvenido";
  });
</script>

</body>
</html>

    Ten en cuenta que hemos agregado una referencia a la biblioteca jQuery en la parte superior del archivo, y hemos envuelto el código JavaScript que interactúa con el DOM en una función $( document ).ready(). Esto asegura que el código no se ejecute hasta que el DOM esté completamente cargado.

    Aquí tienes una versión actualizada del archivo index.test.js que utiliza el nuevo archivo index.html:

    const { getByTestId } = require("@testing-library/dom");
const { JSDOM } = require("jsdom");
require("@testing-library/jest-dom/extend-expect");
const path = require("path");
const fs = require("fs");
let dom;
let container;

const html = fs.readFileSync(path.join(__dirname, "./index.html"));

describe("index", () => {
  beforeEach(() => {
    dom = new JSDOM(html, { runScripts: "dangerously" });
    container = dom.window.document.body;
  });

  it("debería mostrar el texto de bienvenida", () => {
    const pEl = getByTestId(container, "paragraph");

    expect(pEl.textContent).toEqual("bienvenido");
  });
});

    Ahora, cuando ejecutes el test, debería superar las pruebas y deberías ver el texto “bienvenido” mostrado en la consola.

    ¡Espero que esto te ayude!

Comments are closed.