• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

160
Vistas
How to solve "TypeError: Cannot set property 'innerHTML' of null" in Jest test case?

I was going to test all my functions, but I faced an error. When I run the test in the MySecondApp.test.js file I get an error like this: (but the program works without testing)

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)

Here is the MySecondApp.test.js file, which I run:

import {cleanInput} from "./MySecondApp";

describe("showMyStudent", () => {
    it("returns clean input", () => {
        expect(1 + 5).toBe(6)
        expect(cleanInput(' 444-44-4444 ')).toBe('444-44-4444')
    })
})

And function, which I was attempting to test:

const trim = (str) => str.replace(/^\s*|\s*$/g, '');
const normalize = (str) => str.replace(/-/g, '-');
export const cleanInput = compose(normalize, trim);

I don't know what's the matter. Please, help me to deal with the error and understand, why it happened in that way. GitHub: https://github.com/AlexKor-5/FP_Practice/tree/b035e1f864abb9056a68fbf1385731e9cf3c05a3 Commit is called like "Updated! TypeError: Cannot set property 'innerHTML' of null". Thanks so much for your help in advance!

9 months ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

According to your code

https://github.com/AlexKor-5/FP_Practice/blob/b035e1f864abb9056a68fbf1385731e9cf3c05a3/src/components/MySecondApp/MySecondApp.jsx

in particular at line 58

showMyStudent('444-44-4444').run()

You are running the function above, and, as a consequence, line 40

document.querySelector(elementId).innerHTML = info.orElse(errorLog);

Now, in Jest context, querySelector is returning null in this case, as per your error. At least you should comment line 58, since seems intended as a quick test for you during the development, then, as a general rule, you should avoid direct DOM manipulation in a React application (I am referring to querySelector and innerHTML). I do not think this answer is the right place to explain the meaning of my last advice, so, let me put a link as a quick reference (you can find lot of articles on this topic).

https://stackoverflow.com/a/59880366/8534482

9 months ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.