提问者:小点点

如何解决Jest测试用例中的“TypeError:无法将属性'innerHTML'设置为null”?


我本来打算测试我所有的函数,但我遇到了一个错误。当我在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”。非常感谢您的帮助!


共1个答案

匿名用户

根据你的密码

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(我指的是querySelectorinnerHTML)。我不认为这个答案是解释我最后一个建议的意思的正确地方,所以,让我把一个链接作为快速参考(你可以找到很多关于这个话题的文章)。

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