Структура тестирования реакции с использованием фермента

#reactjs #testing #enzyme

#reactjs #тестирование #фермент

Вопрос:

У меня есть компонент react, который я хочу протестировать структуру.

Поэтому, когда я запускаю wrapper.debug() его, он показывает мне такой результат.

 <Fragment>
  <div className="SignupLoginContainer">
    <div className="SignupLoginContainer__SliderBtnContainer">
      <LoginSignupSliderButton toShow={[Function: toShow]} />
    </div>
    <div className="SignupLoginContainer__Form_Container">
       <Login isLoggingInOrSigningUp={true} />
     </div>
    </div>
</Fragment>

Затем я тестирую это как:

 expect(wrapper.matchesElement(
  <Fragment>
   <div className="SignupLoginContainer">
     <div className="SignupLoginContainer__SliderBtnContainer">
      <LoginSignupSliderButton toShow={() => true} />
     </div>
      <div className="SignupLoginContainer__Form_Container">
        <Login isLoggingInOrSigningUp={true} />
      </div>
       </div>
  </Fragment>
    )).toBeTrue()

Вот мой метод визуализации компонентов:

 render() {
    return (
      <Fragment>
          <div className={styles.SignupLoginContainer}>
            <div className={styles.SignupLoginContainer__SliderBtnContainer}>
              <LoginSignupSliderButton toShow={(val: boolean) => this.toLogInOrSignUp(val)} />
            </div>
            <div className={styles.SignupLoginContainer__Form_Container}>
              <Login isLoggingInOrSigningUp={this.state.toLoginOrSignup} />
            </div>
          </div>
      </Fragment>
    );
  }
}

Мой тест работает, если я удаляю <LoginSignupSliderButton toShow={(val: boolean) => this.toLogInOrSignUp(val)} /> его из компонента и тестирую.

Я подозреваю из-за обратного вызова?

1. Привет, Арту. Со временем я исправил несколько вариантов написания вашего поста, и мне интересно, не могли бы вы теперь начать прогонять свой материал через английскую проверку орфографии. В наши дни их можно бесплатно подключать к браузерам. Помните, что редакторы — это добровольный ресурс, и мы не хотим продолжать исправлять одни и те же ошибки. Спасибо!

Ответ №1:

Что вам нужно snapshot testing , так это:

 // yourcomp.test.js

import YourComp from './wherever-it-lives';


it('renders correctly', () => {
    const wrapper = shallow(<YourComp/>);
    expect(wrapper).toMatchSnapshot();
});

После прохождения этого теста __snapshots__ в каталоге вашего проекта будет создана папка с правильным снимком для разметки ваших компонентов.

ПРИМЕЧАНИЕ: Если вы когда-нибудь снова обновите свою разметку (HTML), этот тест завершится неудачей, пока вы не обновите свой снимок следующим образом:

 jest --updateSnapshot

И ваш тест должен пройти снова.

PS. Я, конечно, предположил, что вы используете jest в качестве тестового бегуна.

1. зачем мне нужен снимок? Однако я хочу изолировать тест. может возникнуть путаница, если я создам тест для всей структуры? да, сэр, я использую jest. спасибо за ваш ответ

2. если вы выполняете мелкий рендеринг (как я показал в примере), то вы будете только повторно создавать разметку вашего компонента. Вам нужно тестирование моментальных снимков, чтобы вам не приходилось постоянно беспокоиться о том, чтобы сопоставлять вещи вручную.