使用 Jest 进行 React js 测试失败

Posted 2023-02-22

【中文标题】使用 Jest 进行 React js 测试失败

【英文标题】：React js testing with Jest fails

【发布时间】：2019-04-05 13:05:37

【问题描述】：

我正在尝试测试我的 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); 

发生了什么事？

【问题讨论】：

这个问题可能与this question重复

我想知道您是否正确导入了组件。不应该是import Home from './components/Home';

@PaulFitzgerald 我试过了。这对情况没有帮助。

【参考方案1】：

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

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

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

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

请参阅@Dan Abramov here 的答案。

【讨论】：

您好，非常感谢您的帮助：***.com/questions/53536427/jest-component-testing 谢谢！

【参考方案2】：

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

rootElement || document.createElement('div')

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