JEST组件测试

19 浏览
0 Comments

JEST组件测试

我刚开始使用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 (
        
Hello world! The result is: {this.state.result}

        
        +
        
        = 
        
         
         
    );
  }
}
export default Home;
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Home组件可以获取两个数字并渲染它们的和。它还导入了LogOutButton组件，当点击它时，应将您重定向到Microsoft网站。

我想测试用户点击LogOut的情况。

这是我的建议：

describe('Home />', () => {
  it('点击LogOut后将重定向到Microsoft网站', () => {
     const homeWrapper = shallow();
     homeWrapper.find('LogOutButton').simulate('click');
     homeWrapper.update();
     expect(homeWrapper.html).toEqual('https://www.MICROSOFT.com');
  });
}

但是这并不起作用...

我希望能得到写正确的测试方法的帮助。

提前感谢。

0

2 答案

0 Comments

在进行组件测试时，出现了一些问题。首先，测试中模拟了一个'ckick'事件，而不是一个'click'事件，这可能是笔误导致的。其次，.html是一个函数，所以在测试中应该在它后面加上括号。另外，在调用homeWrapper.update()时似乎多余了。最后，最重要的是，即使组件按预期工作，点击LogOutButton的结果将是页面重定向到https://www.MICROSOFT.com。即使重定向成功 - 我认为不会成功，因为测试不是在真实的浏览器中运行 - 也没有理由期望调用homeWrapper.html()会返回URL，它将返回组件的渲染HTML。在你的情况下，你可以期望调用homeWrapper.html()返回类似于下面的内容：

Hello world! The result is: 0

+=

当然，这并不能证明onLogoutClick是否正常工作。相反，你可能考虑在测试中用Jest Mock替换onLogoutClick，并期望该mock函数被调用一次。

0
0 Comments

Jest组件测试问题的出现原因是在测试中试图修改无法修改的window.location。解决方法是将其删除，并创建一个可修改的window.location对象。以下是解决问题的代码示例：

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

通过删除window.location对象，并使用一个含有reload方法的对象来代替，我们成功解决了Jest组件测试中无法修改window.location的问题。这样，在测试中模拟点击登出按钮后，我们可以断言期望的window.location.href是否等于'https://www.MICROSOFT.com'。

0