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

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

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

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

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

请参阅@Dan Abramov here的答案。

Answer 2

发生错误，因为测试环境未为元素提供id =“ root”。您可以选择条件检查，例如

rootElement || document.createElement('div')

或者通过配置JSDOM并在您将指定的html中以id =“ root”输入您的元素。

用Jest进行React JS测试失败

2 个答案: