使用 react-test-renderer 測試異步 componentDidMount()

Question

我有一個組件，它在它的componentDidMount() function 中加載了一些 SQLite

async componentDidMount() {
    try {
        const user = await this.userDao.getUserData();
        const setupNeeded = user === null;
        if( setupNeeded ) {
            this.setState({
                status : 'setup'
            });
        }
        else {
            this.setState({
                status : 'ready',
                seed: user.seed
            })
        }
    } catch (e) {
        logger.error("Error during db query", e);
        this.setState({
            status: 'corrupted'
        });
    }
}

我想在解決對getUserData()的調用后測試渲染結果，並且相應地設置了 state。 現在在我的測試中，我已經模擬了對數據庫的實際調用，所以 Promise 應該立即解決，但是這樣的測試不能按預期工作：

最初，我是這樣嘗試的：

test('Should render SetNewPasswordScreen', async () => {
    const tree = await renderer.create(<IndexScreen/>);
    const json = tree.toJSON();
    // expect stuff
});

但是，在這種情況下，json 包含初始render()調用的數據。

這樣做會起作用：

 test('Should render SetNewPasswordScreen', (done) => {
     const tree = renderer.create(<IndexScreen/>);
     setTimeout(() => {
         const json = tree.toJSON();
         // expect stuff
     }, 5000);
 });

但這並不理想，因為我只是猜測 5 秒后一切都會完成，但我不知道。 此外，如果測試需要 5 秒才能完成，則不太合適。 （我任意使用了 5 秒，可能它也可以使用更少的時間，因為異步調用無論如何都會被模擬，但我永遠無法真正知道）

我的問題是，是否有人對如何解決這個問題有更好的想法？

Answer 1

你可以使用等待期望 package: https://www.npmjs.com/package/wait-for-expect

test('Should render SetNewPasswordScreen', async (done) => {
     const tree = renderer.create(<IndexScreen/>);

     await waitForExpect(() => {
       const json = tree.toJSON();
       // expect stuff
     });
 });

注意傳遞給test('...', fn)現在是異步 function。

Answer 2

it('should render setNewPassWordScreen', async () => {
   const tree = await renderer.create(<IndexScreen/>);
   const instance = tree.getInstance();

   await instance.componentDidMount();
   // expect other stuff.
});