reactjs - getElementById 在（开玩笑）测试中返回 0，但在浏览器中工作正常

Question

我已经用 构建了我的第一个应用程序create-react-app，并且我正在尝试包含一个简单的测试。TypeError: Cannot read property '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);
    })

Fib_Calc.js：

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.js：

< 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>
...

我尝试控制台记录document.getElementById("fib_nr")这在测试环境中返回 0 并在浏览器中返回输入元素。

为了好玩，我还尝试了控制台日志document.getElementById("label")（在错误引发的上方几行），这也在测试环境中记录为 0。

由于我是一个反应新手，我将不胜感激一些详细的答复。我曾考虑在测试中添加一个 Windows 加载功能，但不确定如何去做。

还应该提到我之前在应用程序/浏览器中使用同一段代码时遇到了问题，通过将defer标签添加到所有<script>元素来解决这个问题。

标签： reactjsjestjs