1

代码


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函数的数据
  • 组件应该使用新的道具重新渲染

堆

任何帮助深表感谢。

4

1 回答 1

0

查看组件的代码会很有用。从您的测试来看，问题在于更新的逻辑CTAWrapper存在于其父组件中。如果您在异步代码执行后渲染该组件，则 DOM 应相应更新。

于 2019-06-30T18:51:51.457 回答