Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

153
Views
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!

7 months ago · Santiago Trujillo
1 answers
Answer question

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

7 months ago · Santiago Trujillo Report
Answer question
Find remote jobs