1

Code


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

Problem

This code doesn't seem to work properly. AFAIK, it is because when I fire the onClick event, it runs onClickEvent asynchronously, which updates the value of newProps after it's being logged to the console. The value of newProps is needed to re-render the component for further assertion testing.

Objective

  • Want to mock the onclick function
  • The onclick function should make a mock axios call
  • The axios call should return a promise
  • The resolved value of that promise should be the data that is passed to the mock axios function
  • The component should re-render with new props

Stack

Any help is much appreciated.

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Amaan Kulshreshtha
  • 525
  • 6
  • 19
  • when you run `fireEvent` wrapper updates on its own. You don't need to re-render that manually. check [their examples](https://github.com/testing-library/react-testing-library/blob/master/examples/__tests__/input-event.js). So if it does not work to you probably something is wrong with component or axios mock. – skyboyer Jun 30 '19 at 10:20

1 Answers1

0

It would be useful to see the code for your components. Judging by your test the problem is that the logic to update CTAWrapper lives in its parent component. If you render that component after the asynchronous code is executed the DOM should update accordingly.

Gio Polvara
  • 23,416
  • 10
  • 66
  • 62
  • On the contrary, the logic is in this component itself. Sending the request to update the value from this component and then receiving the props from the parent component(redux setup) – Amaan Kulshreshtha Jul 02 '19 at 12:02
  • But are you rendering the `Provider` with your store? – Gio Polvara Jul 02 '19 at 12:15
  • I'm not sure I get your question. Do you mean `Provider` as in the Parent Component, `Provider` as `CTAWrapper` component or `Provider` as the Context Provider? I am maintaining a redux state, the functions are all helpers, no direct methods are passed from the Parent to the `CTAWrapper` component – Amaan Kulshreshtha Jul 02 '19 at 14:11