[модульное тестирование]: как я могу получить обновленный реквизит после события click, в котором есть пробный вызов axios - PullRequest
Новая
       29

[модульное тестирование]: как я могу получить обновленный реквизит после события click, в котором есть пробный вызов axios

1 голос
/ 30 июня 2019

Код 


let basicProps = {
  inCart: false,
  quantity: 0,
  min: 1,
  max: 10,
  productData: mockProductData
};

const mockData = {
  inCart: true,
  quantity: 1,
  min: 1
};

const mockOnAddToCart = jest.fn(async (data, props) => {
  const newProps = await mockAxios(data).post()
  const updatedProps = { ...props, newProps };
  return updatedProps; 
});

test('if clicking the "ADD" button, renders the "increment" button',() => {
  let newProps;
  async function onClickEvent () {
    newProps = await mockOnAddToCart();
  };

  const { getByText, rerender } = render(
    <CTAWrapper 
      {...basicProps}
      onAddToCart={onClickEvent}
    />
  );  

  // CLICK ADD BUTTON
  fireEvent.click(getByText('Add'));
  console.log({...newProps});     // log - {}


  // RE-RENDER PRODUCT CARD COUNTER
  // rerender(<CTAWrapper {...newProps}/>);

  // TEST IF THE INCREMENT BUTTON IS THERE
  // expect(getByText('+')).toBeInTheDocument();
});

__ mocks __ / axios.js 

export default function(data) {
  return {
    get: jest.fn(() => Promise.resolve(data)),
    post: jest.fn(() => Promise.resolve(data))
  };
}

Задача

Этот код не 'Кажется, не работает должным образом.AFAIK, это потому, что когда я запускаю событие onClick, оно запускается onClickEvent асинхронно, что обновляет значение newProps после его регистрации на консоли.Значение newProps необходимо для повторной визуализации компонента для дальнейшего тестирования утверждений.

Цель

  • Хотите смутить функцию onclick
  • Функция onclick должна сделать макет axios вызов
  • Вызов axios должен вернуть обещание
  • Разрешенное значение этогоОбещание должно быть данными, которые передаются в макет axios функция
  • Компонент должен повторно визуализировать с новыми реквизитами

Stack

Любая помощь очень ценится.

1 Ответ

0 голосов
/ 30 июня 2019

Было бы полезно увидеть код для ваших компонентов.Судя по вашему тесту, проблема в том, что логика обновления CTAWrapper находится в его родительском компоненте.Если вы визуализируете этот компонент после выполнения асинхронного кода, DOM должен обновиться соответствующим образом.

...