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

问题

此代码似乎无法正常工作。 AFAIK，这是因为当我触发onClick事件时，它异步运行onClickEvent，它在登录到控制台后会更新newProps的值。需要newProps的值来重新呈现组件以进行进一步的声明测试。

客观

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

堆栈

非常感谢您的帮助。

Answer 1

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

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

1 个答案: