Тестовый выключатель - модульное тестирование

Question

Я новичок в модульном тестировании и столкнулся с этим делом.Я использую JEST и Enzyme - REACT JS

Я знаком с вызовами кликов и событий 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({}); 
})

Спасибо за помощь - надеемся узнать, как тестировать коммутационные случаи и пройти этот тест.

Answer 1

сложно спекулировать без реального кода (я имею в виду render() метод).

Предположим, это выглядит так (я пропустил переключатель / регистр, чтобы сделать его короче)

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(), результат не требует, чтобы вы высмеивали какие-либо функции:

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

Также вы можете разделить тестовый набор на отдельные поля.

Answer 2

Есть пример того, как имитировать нажатие на кнопку с мелкой визуализацией 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})
}