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!
According to your code
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).