Iba a probar todas mis funciones, pero me encontré con un error. Cuando ejecuto la prueba en el archivo MySecondApp.test.js, aparece un error como este: (pero el programa funciona sin pruebas)
PS E:\Programming\FP\FP_Practice\practice-1> jest FAIL src/components/MySecondApp/MySecondApp.test.js ● Test suite failed to run TypeError: Cannot set property 'innerHTML' of null 38 | 39 | const append = curry((elementId, info) => { > 40 | document.querySelector(elementId).innerHTML = info.orElse(errorLog ); | ^ 41 | return info; 42 | }); 43 | at src/components/MySecondApp/MySecondApp.jsx:40:5 at node_modules/ramda/src/internal/_curryN.js:46:27 at fn (node_modules/ramda/src/internal/_arity.js:11:19) at IO.effect (src/monads/IO/IO.js:22:20) at IO.run (src/monads/IO/IO.js:31:21) at Object.<anonymous> (src/components/MySecondApp/MySecondApp.jsx:58:30) at Object.<anonymous> (src/components/MySecondApp/MySecondApp.test.js:1:1)
Aquí está el archivo MySecondApp.test.js, que ejecuto:
import {cleanInput} from "./MySecondApp"; describe("showMyStudent", () => { it("returns clean input", () => { expect(1 + 5).toBe(6) expect(cleanInput(' 444-44-4444 ')).toBe('444-44-4444') }) })
Y la función, que estaba tratando de probar:
const trim = (str) => str.replace(/^\s*|\s*$/g, ''); const normalize = (str) => str.replace(/-/g, '-'); export const cleanInput = compose(normalize, trim);
no se que pasa Por favor, ayúdame a lidiar con el error y entender por qué sucedió de esa manera. GitHub: https://github.com/AlexKor-5/FP_Practice/tree/b035e1f864abb9056a68fbf1385731e9cf3c05a3 La confirmación se llama como "¡Actualizado! TypeError: No se puede establecer la propiedad 'innerHTML' de nulo". ¡Muchas gracias por su ayuda de antemano!
Según tu código
en particular en la línea 58
showMyStudent('444-44-4444').run()
Está ejecutando la función anterior y, como consecuencia, la línea 40
document.querySelector(elementId).innerHTML = info.orElse(errorLog);
Ahora, en el contexto de Jest, querySelector
devuelve null
en este caso, según su error. Al menos debería comentar la línea 58, ya que parece ser una prueba rápida para usted durante el desarrollo, luego, como regla general, debe evitar la manipulación directa de DOM en una aplicación React (me refiero a querySelector
e innerHTML
). No creo que esta respuesta sea el lugar adecuado para explicar el significado de mi último consejo, así que déjame poner un enlace como referencia rápida (puedes encontrar muchos artículos sobre este tema).