JEST 组件测试答案

【问题标题】：JEST component testingJEST 组件测试
【发布时间】：2019-05-01 08:43:06
【问题描述】：

我是使用 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 组件，当它被点击时，它应该将你重定向到微软网站。

我想测试一个用户点击LogOut的场景。

这是我的建议：

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

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

【问题讨论】：

请解释“它不起作用”是什么意思。预期的结果是什么？实际结果是什么？您会收到什么错误消息（如果有）？
您所做的并不是测试组件的最佳方式。

标签： reactjs unit-testing jestjs enzyme

【解决方案1】：

对您的测试的修复是对您已有的内容的一点补充。

delete window.location;
window.location = { reload: jest.fn() };

describe('Home', () => {
  it('should click logout button', () => {
    const component = Enzyme.mount(<Home />);
    const logOutButton = component.find(LogOutButton);
    logOutButton.simulate('click');
    expect(window.location.href).toEqual('https://www.MICROSOFT.com');
  });
});

你很快就会注意到我删除了window.location，因为window.location 在 Jest 中是不可修改的。那是缺少的链接。

【讨论】：

【解决方案2】：

如果不查看 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，然后期望模拟已被调用一次。

【讨论】：