我本来打算测试我所有的函数,但我遇到了一个错误。当我在mysecondap中运行测试时。测验js文件我得到这样一个错误:(但是程序没有测试就可以工作)
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)
这是MySecondap。测验我运行的js文件:
import {cleanInput} from "./MySecondApp";
describe("showMyStudent", () => {
it("returns clean input", () => {
expect(1 + 5).toBe(6)
expect(cleanInput(' 444-44-4444 ')).toBe('444-44-4444')
})
})
和功能,我试图测试:
const trim = (str) => str.replace(/^\s*|\s*$/g, '');
const normalize = (str) => str.replace(/-/g, '-');
export const cleanInput = compose(normalize, trim);
我不知道怎么了。请帮助我处理这个错误,并理解为什么它会以这种方式发生。github:https://github.com/AlexKor-5/FP_Practice/tree/b035e1f864abb9056a68fbf1385731e9cf3c05a3Commit的调用类似于“Updated!TypeError:无法将属性'innerHTML'设置为null”。非常感谢您的帮助!
根据你的密码
https://github.com/AlexKor-5/FP_Practice/blob/b035e1f864abb9056a68fbf1385731e9cf3c05a3/src/components/MySecondApp/MySecondApp.jsx
特别是第58行
showMyStudent('444-44-4444').run()
您正在运行上面的函数,因此,第40行
document.querySelector(elementId).innerHTML = info.orElse(errorLog);
现在,在Jest上下文中,在这种情况下,根据您的错误,querySelector
将返回null
。至少您应该注释第58行,因为似乎是为了在开发过程中对您进行快速测试,那么,作为一般规则,您应该避免在React应用程序中直接操作DOM(我指的是querySelector
和innerHTML
)。我不认为这个答案是解释我最后一个建议的意思的正确地方,所以,让我把一个链接作为快速参考(你可以找到很多关于这个话题的文章)。
https://stackoverflow.com/a/59880366/8534482