Is there a way to tell WebdriverIO to wait for background tasks in react app

Question

I'm testing react grid with WebdriverIO framework in Node.js

In my case, I'm clicking on the pagination buttons in react grid which pulls the data asynchronously and renders the data on the UI. I need to wait for this operation to be done before proceeding with my e2e test.

In simple, there is a waitForAngular() for Angular + Protractor combo. [ Or getAllAngularTestabilities() ]

Is there anything similar for React + WebdriverIO so that I can ensure that I'm testing the most recent data?

Answer 1

it('should wait until text has changed', () => {
    browser.waitUntil(
        () => $('#someText').getText() === 'I am now different',
        {
            timeout: 5000,
            timeoutMsg: 'expected text to be different after 5s'
        }
    );
});

Only option is to wait for some condition ,

() => $('#someText').getText() === 'I am now different' is a lambda function that returns the single line statement. you can also use normal function:

it('should wait until text has changed', () => {
    browser.waitUntil(
        () => { return $('#someText').getText() === 'I am now different'},
        {
            timeout: 5000,
            timeoutMsg: 'expected text to be different after 5s'
        }
    );
});

HEre the test waits till text is equal to the expected test , maximum time it will wait is 5sec (5000 ms )