JEST-тестирование компонентов

Question

Я новичок в написании юнит-тестирования с Jest.Я тестирую компонент поверх приложения React.Есть два компонента: Home и LogOutButton

Это компонент Home:

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

Компонент Home может получить 2 числа и отобразить их сумму.Там, где он также импортирует компонент LogOutButton, и при щелчке он должен направить вас на веб-сайт Microsoft.

Я хочу протестировать сценарий, в котором пользователь нажимает LogOut.

Это мое предложение:

describe('Home />', () => {
  it('Directing to Microsoft site when LogOut is clicked', () => {
     const homeWrapper = shallow(<Home />);
     homeWrapper.find('LogOutButton').simulate('ckick');
     homeWrapper.update();
     expect(homeWrapper.html).toEqual('https://www.MICROSOFT.com');
    });
}

Это не работает .. Я ищу помощь, чтобы написать правильный метод теста.Заранее спасибо

Answer 1

Трудно сказать, как ваш код будет себя вести, не видя код для вашего LogOutButton компонента.Но вот пара указателей:

Прежде всего, обратите внимание, что ваш тест имитирует событие 'ckick', а не событие click, как вы, вероятно, подразумевали.

Второй момент заключается в том, что.html - это функция, поэтому вы должны добавить в нее скобки в своем тесте: .html().

Третий момент заключается в том, что вызов homeWrapper.update () кажется избыточным.

И, наконец,самое главное, даже если ваш компонент работает как задумано, результатом нажатия LogOutButton будет перенаправление страницы на https://www.MICROSOFT.com.

Даже если перенаправление сработало - что, я думаю, не сработает, поскольку ваш тест не запускается в реальном браузере - нет никаких оснований ожидать, что вызов homeWrapper.html() вернет URL.Он вернет HTML, который составляет визуализируемый компонент.

В вашем случае вы можете ожидать, что вызов homeWrapper.html () вернет что-то вроде:

<div><h1>Hello world! The result is: 0</h1><input type=\"text\"/>+<input type=\"text\"/>= <br/><button>Add</button><br/><br/><button id=\"x\">LogOut</button></div>

Это, конечно,, не доказывает, что onLogoutClick работал правильно.Вместо этого вы можете рассмотреть замену onLogoutClick на Jest Mock в своем тесте, а затем ожидать, что mock был вызван один раз.