Шутка/Фермент | Протестируйте вызов функции в componentDidMount

Что делать, если вы хотите проверить, была ли вызвана функция, в componentDidMount() Методе жизненного цикла React. В основном код компонента выглядит так:

  state = {
    randomStateToPopulate: []
  };

  // Test componentDidMount
  componentDidMount() {
    this.randomFunction();
  }

  randomFunction= () => {
    listRandomData().then(({ data }) => {
      this.setState({ randomStateToPopulate: data });
    });
  };

Итак, как на самом деле проверить этот случай?

Как написано, единственный способ протестировать этот компонент — «белый ящик», что означает, что вы должны написать утверждение, основанное на состоянии randomFunction (например, был ли он вызван) или randomStateToPopulate (независимо от того, был ли он назначен data). Но у тестирования белого ящика есть недостаток: если вы измените внутреннюю реализацию, тест может сломаться. Если вы покажете, насколько вы с использованиемrandomStateToPopulate (например, поместите это в список HTML), вы можете написать тест, который не привязан к деталям реализации.

— 29.12.2019 05:52

reactjs unit-testing jestjs es6-promise enzyme

01.03.2019 11:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

16 508

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это сценарий, который вы хотите протестировать. Если компонент componentDidMount вызывается, убедитесь, что он был вызван только один раз или столько раз, сколько вы хотите.

Ваш тест. I have the explanation in comments below

    // Inside your general `Describe`
  let wrapper;
  const props = {
    // Your props goes here..
  };
  beforeEach(() => {
    wrapper = shallow(<YourComponent {...props} />);
  });

    it('should check `componentDidMount()`', () => {
      const instance = wrapper.instance(); // you assign your instance of the wrapper
      jest.spyOn(instance, 'randomFunction'); // You spy on the randomFunction
      instance.componentDidMount();
      expect(instance.randomFunction).toHaveBeenCalledTimes(1); // You check if the condition you want to match is correct.
    });

Вы можете абстрагироваться, в данном случае, чтобы делать более сложные вещи, но основная суть этого выше. Если у вас есть более подробное или лучшее решение, пожалуйста, опубликуйте его. Спасибо!!

это верно. вы должны сами вызвать componentDidMount() в тестовом примере.

— 01.03.2019 21:59

в моем случае instance это null, независимо от того, использую ли я mount или shallow :(

— 16.05.2020 10:22

@GregWoz Я получил тот же результат, что и ты. Для меня это выглядело так, как будто у меня был ReactFragment в качестве родительского тега html, который возвращал мой компонент. что-то вроде: «return (<><MyComponent/></>)», и это все испортило. Я исправил это, используя Find для экземпляра (instance.Find('MyComponent'))

— 19.07.2020 00:39

01.03.2019 11:40