使用 Jest 进行 React js 测试失败

Question

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

请注意，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);

该测试检查任何 2 个给定数字，用户收到正确的总和。

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);
  });
});

测试运行良好，但现在出了点问题，这是我在运行测试后得到的错误：

 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)

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

<Home />, rootElement); 

发生了什么事？

Answer 1

根据您所说的测试运行良好，我想建议您将 Home 组件的这一部分分离到自己的文件中：

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

这样你应该能够在不受该线路干扰的情况下运行测试。

还要确保index.html 文件中带有id="root" 的元素未在body 元素上设置。原因是当脚本完成执行时，document 元素尚不可用。

请参阅@Dan Abramov here 的答案。

Answer 2

发生错误，因为测试环境未提供 id="root" 的元素。您可以进行条件检查，例如

rootElement || document.createElement('div')

或者通过配置 JSDOM 并在您指定的 html 中输入带有 id="root" 的元素。