[单元测试]：在具有模拟axios调用的点击事件后，如何获取更新的道具

Question

码

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

问题

该代码似乎无法正常工作。 据我所知，这是因为当我火的onClick事件，它运行onClickEvent异步方式，这将更新的价值newProps它被记录到控制台后。 需要newProps的值来重新呈现组件以进行进一步的声明测试。

目的

• 想模拟onclick函数
• onclick函数应进行模拟 axios调用
• axios调用应返回一个承诺
• 该承诺的解析值应该是传递给模拟 axios函数的数据
• 组件应使用新道具重新渲染

堆

• 笑话
• @ testing-library / react
• 玩笑

任何帮助深表感谢。

Answer 1

查看组件的代码将很有用。 通过测试判断问题是更新CTAWrapper的逻辑存在于其父组件中。 如果在执行异步代码后呈现该组件，则DOM应该相应地更新。