时间戳

首页 > 解决方案 > 测试开关案例 - 单元测试

javascript - 测试开关案例 - 单元测试

问题描述

我是单元测试的新手，我遇到了这种情况。我正在使用 JEST 和酶 - REACT JS

我熟悉调用 clicks 和 onChange 事件，但不确定如何设置以下测试：

updateUser = (e) => {
  var tempUser = this.state.user;

  switch(e.target.id){
     case "firstName":
           tempUser.FirstName = e.target.value;
           break;
     case "lastName":
           tempUser.LastName = e.target.value;
           break;
     case "email":
           tempUser.Email = e.target.value;
           break;
      case "userName":
           tempUser.Username = e.target.value;
           break;
      default:
           break;
    }

this.setState({
    user: tempUser,
   })
}

所以我尝试应用我一直用来测试 updateUser 的相同设置 - 不确定它是否是正确的方法。

describe(' Test', () => {
let wrapper;

 beforeEach(() => wrapper = shallow(<Component {...baseProps} />));

it('UpdateUser method', () => {
 wrapper.instance().updateUser = jest.fn();
 wrapper.setState({
   user:{
         tempUser :{
            FirstName: "",
            LastName:"",
            Email:"",
            Username:"",
          },
      },
  }),
wrapper.update();
expect(wrapper.instance().updateUser).toBeDefined();
expect(wrapper.state().user).toEqual({}); 
})

感谢您的帮助 - 希望学习如何测试 switch 案例并通过此测试。

标签： javascriptreactjsunit-testingjestjsenzyme

解决方案

有示例如何使用浅渲染模拟单击按钮https://airbnb.io/enzyme/docs/api/shallow.html#shallow-rendering-api。

此外，如果您使用旧状态，请使用回调函数。不要改变状态。或者你可以做得更简单。

updateUser = (e) => {
  let key;
  switch(e.target.id){
       case "firstName":
             key = "FirstName";
             break;
       case "lastName":
            key = "LastName";
             break;
       case "email":
            key = "Email";
             break;
        case "userName":
              key = "Username";
             break;
        default:
             return null;
      }
  this.setState({[key]: e.target.value})
}

推荐阅读