Estoy usando broma con jsdom para probar mi aplicación.
/** * @jest-environment jsdom */ const html = fs.readFileSync( path.resolve(__dirname, "../public/index.html"), "utf8" ); let dom; let doc; let container; describe("index.html", () => { beforeEach(() => { dom = new JSDOM(html); doc = dom.window.document; container = doc.body; dom.window.fetch = fetch; window.fetch = fetch; }); it("renders elements", () => { new Form(container.querySelector("#app")); }); }); dentro del archivo Form.js , uso el document para crear y agregar el elemento
class Form { parentElement: HTMLDivElement; localRootElement: HTMLFormElement; constructor(parent: HTMLElement) { this.parentElement = parent as HTMLDivElement; const formEl = document.createElement("form")! as HTMLFormElement; this.localRootElement = formEl; this.render() } private render = (): void => { this.parentElement.appendChild(this.localRootElement); }; y obtuve el error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
Parece que el documento proviene de jsdom funciona bien porque this.parentElement tiene con precisión el método appendChild adjunto. Sin embargo, el elemento de formulario creado por el objeto del document no se puede agregar porque dice que no es del tipo 'Nodo'. Hice console.log (documento) que me dio Document { location: [Getter/Setter] } (No es de extrañar por qué eso no funcionó)
Mi pregunta es
¿Podría de alguna manera asignar jsdom.window.document al objeto del document para hacer cosas como createElement correctamente?
¿O hay una buena alternativa?
versión instalada
"jest": "^27.5.1", "@testing-library/dom": "^8.11.3", "@testing-library/jest-dom": "^5.16.2",