使用 react-test-renderer 测试异步 componentDidMount()答案

【问题标题】：Testing async componentDidMount() with react-test-renderer使用 react-test-renderer 测试异步 componentDidMount()
【发布时间】：2020-02-12 09:47:13
【问题描述】：

我有一个组件在它的componentDidMount() 函数中执行一些 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() 的调用被解析后测试渲染结果，并且相应地设置了状态。现在在我的测试中，我已经模拟了对数据库的实际调用，因此应立即解决 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 秒，可能它也可以使用更少的时间，因为异步调用无论如何都会被模拟，但我永远无法真正知道）

我的问题是，是否有人对如何解决这个问题有更好的想法？

【问题讨论】：

因为const user = await this.userDao.getUserData();，您正在等待 5 分钟。你可以模拟 userDao 并尝试
正如我提到的，它已经被嘲笑了。
在renderer.create之后尝试await（不是字面意思-只是下一行）而不是在它之前。

标签： javascript reactjs react-native jestjs

【解决方案1】：

你可以使用 wait for expect 包： 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) 的函数现在是一个异步函数。

【讨论】：

【解决方案2】：

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

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

【讨论】：