javascript - 用Jest进行React JS测试失败(React js testing with Jest fails)

Question

I am trying to test my Home.js component which gets an input of two numbers and by clicking Add button, the result appears on the screen.

(我正在尝试测试Home.js组件，该组件获得两个数字的输入，然后单击“添加”按钮，结果将显示在屏幕上。)

Note that index.js looks EXACTLY the same as the Home.js component and this how they look like:

(请注意，index.js看起来与Home.js组件完全相同，它们的外观如下：)

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { LogOutButton } from './LogOutButton.js';

class Home extends React.Component {
displayName = Home.name;

state = {
  result: 0,
  val1: 0,
  val2: 0,
};

handleChangeOne = event => {
  this.setState({ val1: event.target.value });
};

handleChangeTwo = event => {
  this.setState({ val2: event.target.value });
};

add = () => {
  this.setState({ 
    result: parseInt(this.state.val1) + parseInt(this.state.val2)
  });
};

onLogoutClick = () => {
  window.location.href = 'https://www.MICROSOFT.com';
}

render() {
  return (
    <div>
      <h1>Hello world! The result is: {this.state.result}</h1>
      <input type="text" onChange={this.handleChangeOne} />
      +
      <input type="text" onChange={this.handleChangeTwo} />
      = <br />
      <button onClick={this.add}>Add</button>
      <br/><br/> 
      <LogOutButton onLogout={this.onLogoutClick} /> 
    </div>
  );
}
}

  export default Home;
  const rootElement = document.getElementById("root");
  ReactDOM.render(<Home />, rootElement);

The test checks that for any 2 given numbers, the user receives the right sum.

(该测试检查是否有两个给定的数字，用户会收到正确的总和。)

import React from 'react';
import { shallow } from 'enzyme'
import ReactDOM from 'react-dom';
import App from './App';
import { Home } from './components/Home';

describe('Home />', () => {
  it('Renders a sum', () => {
      const home = shallow(<Home />);
      var first_value = home.state().val1;
      var second_value = home.state().val2;
      var result = first_value + second_value;
      expect(result).toBe(0);

      const inputs = home.find('input');
      inputs.at(0).simulate('change', {target: {value: 5} } );
      inputs.at(1).simulate('change', { target: { value: 8 } });
      home.find('button').simulate('click');
      home.update();
      expect(home.state().result).toBe(13);
  });
});

The test worked perfectly but now something is going wrong and this is the error that I get after running the test:

(测试工作正常，但现在出了点问题，这是运行测试后出现的错误：)

 FAIL  src/Home.test.js
  ● Test suite failed to run

Invariant Violation: Target container is not a DOM element.

  50 |   export default Home;
  51 |   const rootElement = document.getElementById("root");
> 52 |   ReactDOM.render(<Home />, rootElement);
     |                    ^
  53 |
  54 |

  at invariant (node_modules/fbjs/lib/invariant.js:42:15)
  at renderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:15180:34)
  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:15290:12)
  at Object.<anonymous> (src/components/Home.js:52:20)
  at Object.<anonymous> (src/App.js:4:13)
  at Object.<anonymous> (src/Home.test.js:4:12)

I don't know what is the meaning of the pointer under

(我不知道下面的指针是什么意思)

<Home />, rootElement); 

what's going on ?

(这是怎么回事 ？)

  ask by I.zv translate from so

Answer 1

From what you said that your tests run fine, I want to suggest that you separate this part of the Home component to its own file:

(从您所说的测试运行良好的观点出发，我建议您将Home组件的这一部分分离到自己的文件中：)

const rootElement = document.getElementById("root");
ReactDOM.render(<Home />, rootElement);

That way you should be able to run your tests without that line interfering.

(这样一来，您应该能够在没有干扰的情况下运行测试。)

Also ensure that your element with the id="root" in your index.html file is not set on the body element.

(另外，请确保未在body元素上设置您的index.html文件中的id="root"元素。)

Reason being that by the time the script finishes execution, document element is not available yet.

(原因是在脚本完成执行时， document元素尚不可用。)

Refer to this answer by @Dan Abramov here .

(请参考此答案由@丹阿布拉莫夫这里 。)