JEST组件测试 [英] JEST component testing

问题描述

我是刚开始使用Jest编写单元测试的人.我正在通过React应用程序测试组件.有两个组件:Home和LogOutButton

I am new to write unit testing with Jest. I am testing a component over a React app. There are two components: Home and 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网站.

Home component can get 2 numbers and render their sum. Where it also imports LogOutButton Component and when it is clicked, it should direct you to Microsoft website.

我要测试用户单击注销的情况.

I want to test a scenario where the user click 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');
    });
}

这不起作用. 我正在寻找帮助以编写正确的测试方法. 预先感谢

This does not work.. I am looking for an assistance to write the right test method. Thanks in advance

推荐答案

如果不查看LogOutButton组件的代码，很难说出代码的行为方式.但是这里有一些提示:

It's hard to tell how your code will behave without seeing the code for your LogOutButton component. But here are a couple of pointers:

首先，请注意，您的测试模拟的是'ckick'事件，而不是可能的click事件.

First of all, note that your test simulates a 'ckick' event and not a click event as your probably meant.

第二点是.html是一个函数，因此您应该在测试中在其上添加括号:.html().

Second point is that .html is a function so you should add parentheses to it in your test: .html().

第三点是对homeWrapper.update()的调用似乎是多余的.

Third point is that the call to homeWrapper.update() seems redundant.

最后也是最重要的一点，即使您的组件按预期工作，单击LogOutButton的结果也会是将页面重定向到https://www.MICROSOFT.com.

Lastly and most importantly, even if your component works as intended, the result of clicking the LogOutButton would be a page redirect to https://www.MICROSOFT.com.

即使重定向有效(由于您的测试未在真正的浏览器中运行，但我认为也不可行)，所以没有理由期望对homeWrapper.html()的调用将返回URL.它将返回组成渲染组件的HTML.

Even if the redirect worked - which I don't think it will, since your test does not run in a real browser - there's no reason to expect that a call to homeWrapper.html() would return the URL. It would return the HTML that makes up the rendered component.

在您的情况下，您可以期望对homeWrapper.html()的调用返回类似以下内容的内容:

In your case, you can expect the call to homeWrapper.html() to return something like:

<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替换为笑话，然后希望该模拟被调用一次.

This of course, does not prove that onLogoutClick worked correctly. Instead, you might consider replacing onLogoutClick with a Jest Mock in your test and then expect the mock to have been called once.

这篇关于JEST组件测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！