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

Question

我本来打算测试我所有的函数，但我遇到了一个错误。当我在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.html" target="_blank">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”。非常感谢您的帮助！

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

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