React JS тестирования с Jest не удается

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 здесь .

Answer 2

Ошибка происходит, поскольку тестовая среда не предоставляет элементу id = "root". Вы можете пойти с условной проверкой, как

rootElement || document.createElement('div')

Или настройте JSDOM и введите свой элемент с id = "root" в html, который вы укажете.