Reactjs getElementById在（jest）测试中返回0，但在浏览器中工作正常

我已经用

create react app

构建了我的第一个应用程序，我正在尝试包括一个简单的测试。 不知何故，测试总是返回

TypeError:cannotreadproperty'classList'of null

，即使代码在浏览器中工作并且应用程序完全按照预期工作

这是我的test.js：

import computeFib from '../Fib_Calc';

describe("Fib Function", () => {

    test('Fib result is undefined on negative input', () => {
        const input = -5;
        const output = 'undefined';
        expect(computeFib(input)).toEqual(output);
    })

function clearResult() {
    var results = document.getElementById("results");
    results.innerHTML = '';
    return null;
}

function createErrorMsg(msg) {
    var label = document.getElementById('label');
    var error = document.createElement('div');
    error.id = 'error_message';
    error.innerHTML = msg;
    document.getElementById("fib_nr").classList.add("input_error"); //line that throws error message
    label.appendChild(error);
}

const computeFib = n => {

    if (n < 0) {
        let msg = 'Please choose a positive value.';
        createErrorMsg(msg);
        clearResult();
    }

    else if (n < 2) {
        return n;
    }

    else {
        return computeFib(n - 1) + computeFib(n - 2);
    }
}

export default computeFib;

< form className="form" id="form" onSubmit={this.handleSubmit}>
                <label htmlFor="fib_nr" id="label">Choose a position in the Fib sequence:
                    <input
                        type="number"
                        id="fib_nr" //id is specified and works in browser
                        name="fib_nr"
                        required="required"
                        min="0"
                        step="1"
                        onInvalid={this.handleSubmit}
                        value={this.state.value}
                        onChange={this.handleChange}
                        placeholder="Choose a number." />
                </label>
...

Fib_Calc.js：

import computeFib from '../Fib_Calc';

describe("Fib Function", () => {

    test('Fib result is undefined on negative input', () => {
        const input = -5;
        const output = 'undefined';
        expect(computeFib(input)).toEqual(output);
    })

function clearResult() {
    var results = document.getElementById("results");
    results.innerHTML = '';
    return null;
}

function createErrorMsg(msg) {
    var label = document.getElementById('label');
    var error = document.createElement('div');
    error.id = 'error_message';
    error.innerHTML = msg;
    document.getElementById("fib_nr").classList.add("input_error"); //line that throws error message
    label.appendChild(error);
}

const computeFib = n => {

    if (n < 0) {
        let msg = 'Please choose a positive value.';
        createErrorMsg(msg);
        clearResult();
    }

    else if (n < 2) {
        return n;
    }

    else {
        return computeFib(n - 1) + computeFib(n - 2);
    }
}

export default computeFib;

< form className="form" id="form" onSubmit={this.handleSubmit}>
                <label htmlFor="fib_nr" id="label">Choose a position in the Fib sequence:
                    <input
                        type="number"
                        id="fib_nr" //id is specified and works in browser
                        name="fib_nr"
                        required="required"
                        min="0"
                        step="1"
                        onInvalid={this.handleSubmit}
                        value={this.state.value}
                        onChange={this.handleChange}
                        placeholder="Choose a number." />
                </label>
...

函数clearResult（）{
var results=document.getElementById（“结果”）；
results.innerHTML=''；
返回null；
}
函数createErrorMsg（msg）{
var label=document.getElementById（'label'）；
var error=document.createElement（'div'）；
error.id='error_message'；
error.innerHTML=msg；
document.getElementById（“fib_nr”）.classList.add（“input_error”）；//抛出错误消息的行
label.appendChild（错误）；
}
const computeFib=n=>{
if（n<0）{
让msg='请选择一个正值'；
createErrorMsg（msg）；
clearResult（）；
}
else if（n<2）{
返回n；
}
否则{
返回computeFib（n-1）+computeFib（n-2）；
}
}
导出默认的computeFib；

抛出箭头的相关元素来自我的表单.js：

import computeFib from '../Fib_Calc';

describe("Fib Function", () => {

    test('Fib result is undefined on negative input', () => {
        const input = -5;
        const output = 'undefined';
        expect(computeFib(input)).toEqual(output);
    })

function clearResult() {
    var results = document.getElementById("results");
    results.innerHTML = '';
    return null;
}

function createErrorMsg(msg) {
    var label = document.getElementById('label');
    var error = document.createElement('div');
    error.id = 'error_message';
    error.innerHTML = msg;
    document.getElementById("fib_nr").classList.add("input_error"); //line that throws error message
    label.appendChild(error);
}

const computeFib = n => {

    if (n < 0) {
        let msg = 'Please choose a positive value.';
        createErrorMsg(msg);
        clearResult();
    }

    else if (n < 2) {
        return n;
    }

    else {
        return computeFib(n - 1) + computeFib(n - 2);
    }
}

export default computeFib;

< form className="form" id="form" onSubmit={this.handleSubmit}>
                <label htmlFor="fib_nr" id="label">Choose a position in the Fib sequence:
                    <input
                        type="number"
                        id="fib_nr" //id is specified and works in browser
                        name="fib_nr"
                        required="required"
                        min="0"
                        step="1"
                        onInvalid={this.handleSubmit}
                        value={this.state.value}
                        onChange={this.handleChange}
                        placeholder="Choose a number." />
                </label>
...

在Fib序列中选择一个位置：
...

我试图控制台log

document.getElementById（“fib\u nr”）

这在测试环境中返回0，在浏览器中返回输入元素

为了好玩，我还尝试了控制台log

document.getElementById（“label”）

（错误抛出的上面几行）并且在测试环境中也记录到0

由于我是一个反应新手，我希望得到一些详细的回答。我曾考虑过在测试中添加一个windows加载函数，但不知道该怎么做

---

还应该提到，我以前在应用程序/浏览器中遇到过同一段代码的问题，通过向所有

元素添加

defer

标记解决了这个问题。

您似乎只是在测试

computeFib

函数，它不会呈现任何JSX。如果您试图测试React组件，则需要将该组件呈现到某个测试包装器中（请参阅酶或React测试库）。您似乎还实现了React反模式，如直接DOM操作。实际上，在使用React这样的库时，不应该直接使用DOM。您应该改变状态，并通过调整DOM对状态的改变做出反应。因此，您的

createErrorMsg

将

hasError

属性设置为true，并将

errorMessage

属性设置为

msg

，等等。然后，您的代码将根据这两种状态生成适当的HTML并设置适当的值和属性。好的，那么您的意思是，我根本不应该使用getElementById？有点。。。访问DOMNodes的React方法是使用附加到元素的React ref，但更大的问题在于innerHTML的设置。这被视为DOM操作。您应该在React中处理文本和状态，并呈现所需的内容。但这并不能修复您的测试，您仍然需要呈现呈现此JSX的组件。对

computeFib

函数的测试是可以的，但是应该删除DOM突变，并且应该由React组件来处理它。好的，谢谢-我将再看一看这些概念。