时间戳

首页 > 解决方案 > 测试 React 功能组件承诺使用 Jest 的行为，

reactjs - 测试 React 功能组件承诺使用 Jest 的行为，

问题描述

我有一个 React 函数组件。我将一个函数作为道具传递给组件，它返回一个承诺。我在一个事件上使用该函数onClick，一旦 promise 得到解决，我就会更改组件的状态。就像是：

import React, { useState } from 'react';

function myComponent({ aPromiseReturningFunction }) {
    const [myState, setState] = useState('12');
    const clickHandler = () => {
      aPromiseReturningFunction().then(() => { setState('123') })
    };

    return <div onClick={ clickHandler }>{myState}</div>
}

在我的测试中：

const myFunc = jest.fn(() => Promise.resolve(true));
const componentWrapper = shallow(<myComponent aPromiseReturningFunction={ myFunc }/>);
componentWrapper.simulate('click');
expect(componentWrapper.text()).toEqual('123');

显然以上失败了，但我还没有找到任何可以解释如何正确测试上述内容的东西。当然，如果我改变了承诺之外的状态，测试就通过了。

有什么建议么？

标签： reactjsjestjsasynctest

解决方案

由于click在承诺之后更新状态，也就是异步，我会使用act

import { act } from 'react-dom/test-utils'; // other testing libraries have similar methods that test async events

const myFunc = jest.fn(() => Promise.resolve(true));

it('updates text after onclick', () => {
  const componentWrapper = shallow(<myComponent aPromiseReturningFunction={ myFunc }/>);
  act(() => {
    componentWrapper.simulate('click');
  });

  expect(componentWrapper.text()).toEqual('123');
});

推荐阅读