JEST 组件测试 [英] JEST component testing

问题描述

我是使用 Jest 进行单元测试的新手.我正在 React 应用程序中测试一个组件.有两个组件:Home 和 LogOutButton

这是主页组件:

import 'bootstrap/dist/css/bootstrap.css';导入 'bootstrap/dist/css/bootstrap-theme.css';从反应"导入反应；从 'react-dom' 导入 ReactDOM；从 './LogOutButton.js' 导入 { LogOutButton };class Home 扩展 React.Component {displayName = Home.name;状态 = {结果:0，价值1:0，值2:0，};handleChangeOne = 事件 =>{this.setState({ val1: event.target.value });};handleChangeTwo = 事件 =>{this.setState({ val2: event.target.value });};添加 = () =>{this.setState({结果: parseInt(this.state.val1) + parseInt(this.state.val2)});};onLogoutClick = () =>{window.location.href = 'https://www.MICROSOFT.com';}使成为() {返回 (<div><h1>世界，您好！结果是:{this.state.result}</h1><input type="text" onChange={this.handleChangeOne}/>+<input type="text" onChange={this.handleChangeTwo}/>= <br/><button onClick={this.add}>添加</button><br/><br/><LogOutButton onLogout={this.onLogoutClick}/>

);}}导出默认首页；const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);

Home 组件可以获取 2 个数字并呈现它们的总和.它还导入 LogOutButton 组件，当它被点击时，它应该将您重定向到 Microsoft 网站.

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

这是我的建议:

describe('Home/>', () => {it('单击注销时定向到 Microsoft 站点', () => {const homeWrapper = 浅(<Home/>);homeWrapper.find('LogOutButton').simulate('click');homeWrapper.update();期望(homeWrapper.html).toEqual('https://www.MICROSOFT.com');});}

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

解决方案

对您的测试进行修复是对您现有内容的一点补充.

删除window.location；window.location = { reload: jest.fn() };描述('家'，()=> {it('应该点击注销按钮', () => {const component = Enzyme.mount();const logOutButton = component.find(LogOutButton);logOutButton.simulate('click');期望(window.location.href).toEqual('https://www.MICROSOFT.com');});});

你很快注意到我删除了 window.location 因为 window.location 在 Jest 中是不可修改的.这就是缺失的环节.

I am new to unit testing with Jest. I am testing a component in a React app. There are two components: Home and LogOutButton

This is The Home component:

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 component can get 2 numbers and render their sum. Where it also imports LogOutButton Component and when it is clicked, it should redirect you to Microsoft website.

I want to test a scenario where the user click LogOut.

This is my suggestion:

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');
  });
}

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

解决方案

A fix for your test is a little addition to what you already have.

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');
  });
});

You quickly notice I deleted window.location as window.location is not modifiable in Jest. That is the missing link.

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