JEST 组件测试

IT技术 reactjs unit-testing jestjs enzyme
2021-05-07 22:40:18

我是 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('click');
     homeWrapper.update();
     expect(homeWrapper.html).toEqual('https://www.MICROSOFT.com');
  });
}

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

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

对您的测试的修复是对您已有的一些补充。

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 中是不可修改的。那就是缺失的环节。

其它你可能感兴趣的问题
上一篇使用 reactjs 切换组件 下一篇空数据后我无法重新渲染 FlatList？