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

【问题标题】：Test Switch Case - Unit testing测试开关案例 - 单元测试
【发布时间】：2019-07-22 11:54:59
【问题描述】：

我是单元测试的新手，我遇到了这个案例。我正在使用 JEST 和 Enzyme - 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 案例并通过此测试。

【问题讨论】：

@skyboyer 有什么建议吗？根据我的回答解决问题
总的来说，我的建议是：通过props 调用updateUser 并验证render() 相应地更改了组件。突变状态会使您的组件不稳定，而直接在测试中访问状态会使测试更难维护。我不会那样做。要显示一些代码，我至少需要了解 updateUser 如何绑定到元素以及如何呈现您的组件。
我应该在代码框内添加代码和测试代码

标签： javascript reactjs unit-testing jestjs enzyme

【解决方案1】：

有一个例子如何模拟点击浅渲染按钮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})
}

【讨论】：

谢谢，我会看看 - 但我对点击事件很熟悉 - 我如何根据我的测试来测试开关和案例
哦，好的，实际上从以前的问题stackoverflow.com/questions/43426885/… 中可以解决这个问题。我希望其余的可以理解。
我会看看它，但我以前从未使用过摩卡咖啡 - 我的所有测试都使用 jest 和酵素
你不需要摩卡。寻找答案。它与笑话断言和酶包装相同。

【解决方案2】：

在没有实际代码的情况下进行推测是很棘手的（我的意思是render() 方法）。

假设它看起来像（我已经跳过 switch/case 以使其更短）

updateState = ({target: { value, id }}) => {
    this.setState({
        [id]: value,
    });
}

render() {
    return (<>
      <input value={this.state.email} id="email" onChange={this.updateState} />
      <input value={this.state.firstName} id="firstName" onChange={this.updateState} />
      <input value={this.state.lastName} id="lastName" onChange={this.updateState} />
      <input value={this.state.age} id="age" onChange={this.updateState} />
      <div id="raw_output">{JSON.stringify(this.state)}</div>
    </>);
}

然后重点测试render()的结果不需要你mock任何函数：

function updateFieldById(wrapper, id, value) {
    wrapper.find(id).simulate('change', { target: { id, value } });
}

it('updates state after each field changed', () => {
    const wrapper = shallow(<Comp />);
    // checking start output with default input
    expect(wrapper.find('#raw_input').props().children).toMatchSnapshot();
    updateFieldById(wrapper, 'email', '_email_mock_');
    expect(wrapper.find('#raw_input').props().children).toMatchSnapshot();
    updateFieldById(wrapper, 'firstName', '_fn_mock_');
    expect(wrapper.find('#raw_input').props().children).toMatchSnapshot();
    updateFieldById(wrapper, 'lastName', '_ln_mock_');
    expect(wrapper.find('#raw_input').props().children).toMatchSnapshot();
    updateFieldById(wrapper, 'age', '999');
    expect(wrapper.find('#raw_input').props().children).toMatchSnapshot();
});

当然不用toMatchSnapshot()，您可以检查任何元素的存在或验证特定的文本值，例如

    expect(wrapper.find('#fullName').props().children).toEqual('firstName lastName');

您也可以按字段拆分测试用例。

【讨论】：