withHooks and withoutHooks do not support async tests / promises

Thanks for this package. I’m currently trying to get this to work with an async test, but that doesn’t seem to be supported yet. Could this be added?

Example usage:

it('does something async', async () => {
    await withHooks(async () => {
        const wrapper = shallow(<App />);

        await something();
    });
});

I’m currently using this as a workaround:

export default function withHooksAsync(test: () => Promise<void>): Promise<void> {
    return new Promise<void>((resolve, reject) => {
        withHooks(() => {
            test().then(resolve).catch(reject);
        });
    });
}

[mikeborozdin]

Hi @d-luk ,

Thanks for reporting this. I’ll have a look!

[dunklesToast]

So let’s say you’ve got this component:

import React, { useEffect, useState } from 'react';

function someAsyncCode() {
    return new Promise((resolve) =>
        setTimeout(() => {
            console.log('Resolving');
            resolve(true);
        }, 3000)
    );
}

export default function Test(): JSX.Element {
    const [text, setText] = useState('Not Effected');

    useEffect(() => {
        someAsyncCode().then(() => {
            console.log('Hooked');
            setText('Effected');
        });
    }, []);

    return <p>{text}</p>;
}

This will show the Text “Effected” after three seconds (i sped up the video):

If I use this test-suite: Test Setup

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import enableHooks from 'jest-react-hooks-shallow';

configure({ adapter: new Adapter() });
enableHooks(jest);

Component.test.tsx

import * as React from 'react';
import { mount } from 'enzyme';
import Test from './Test';

describe('Test Test', () => {
    const wrapper = mount(<Test />);
    it('Should render private route', async () => {
        console.log(wrapper.html());
        expect(wrapper..text).toBe("Effected");
    });
});

The expected result is that the test succeeds and it’ll wait for the useEffect to run through. Unfortunately, it does not.

Could you have a look at this?