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网站。

我想测试用户单击注销的情况。

这是我的建议

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，然后期望该模拟被调用一次。

Answer 2

针对您的测试的修复程序是对现有功能的补充。

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中不可修改。那是缺少的链接。

JEST组件测试

2 个答案: