Using .then(fn1,fn2) acts differently than .then(fn1).catch(fn2) when handling rejected promise in Jest test

Question

While attempting to handle a situation where an update failed and I wanted to reset a button back to its original state, I discovered then(fn1,fn2) and then(fn1).catch(fn2) were giving different results after a rejected promise, despite the fact that they are supposed to be equivalent.

test('Reproduce error', () => {
    //setup jsdom
    document.body = document.createElement('body');
    let button = document.createElement('button');
    button.id = 'id';
    document.body.appendChild(button);

    //setup functions used
    let promiseReject;

    const updaterMock = function () {
        return new Promise((resolve,reject)=>{promiseReject = reject});
    };

    const markButtonOn = () => {};

    const markButtonOff = function () {
        console.log("I'm marking off");
        button.textContent = 'off';

        button.onclick = () => {
            button.textContent = 'updating';
            console.log("I'm updating");
            updaterMock()
                //using only then(): test passes
                .then(markButtonOn,markButtonOff);
                //using both then() and catch(): test fails on last expect()
                //.then(markButtonOn).catch(markButtonOff);
        };
    }

    //initial state
    markButtonOff();

    //always passes
    expect(button.textContent).toBe('off');

    //try to turn on
    button.click();

    //always passes
    expect(button.textContent).toBe('updating');

    //trigger the update to fail
    promiseReject();

    //force test to wait for the mock's returned promise to resolve
    return Promise.resolve().then(() => {
        //passes with .then(markButtonOn,markButtonOff)
        //fails with .then(markButtonOn).catch(markButtonOff), received 'updating'
        expect(button.textContent).toBe('off');
    });
});

I reduced the situation as much as I could, stripping out any unnecessary items. (At least, as best as I can tell. I'm still quite new to Javascript/Typescript. Sidenote: I got the promiseReject technique from here.)

If you change which line is commented out following the updaterMock() call in the button.onclick section in the middle, then the test result changes.

If I use just then(fn1,fn2), the test passes.

If I use then(fn1).catch(fn2) the test fails, saying the textContent is still in the 'updating' state.

In both cases, Jest reports that all 3 calls to console.log() go off:

I'm marking off

I'm updating

I'm marking off

Which tells me the 2nd call to markButtonOff is executing, but Jest isn't seeing the element's change.

1. Why are then(fn1,fn2) and then(fn1).catch(fn2) behaving differently?

2. How can I change things in my test to fix this (ideally, just doing something to the test code, not to the markButtonOff production code, which I wrote straight into the test to make it easy for others to reproduce.)

Answer 1

VLAZ correctly identified my core issue in that two promise chains will not predictably resolve in the same order.

The fact that I got different results between then(fn1,fn2) and then(fn1).catch(fn2) after a rejected promise was pure luck/randomness/non-deterministic garbage.

After discussion I understood the issue better and redesigned the test to have a continuous promise chain from start to finish.

test('Reproduce error', () => {
    //setup jsdom
    document.body = document.createElement('body');
    let button = document.createElement('button');
    button.id = 'id';
    document.body.appendChild(button);

    //setup functions used
    let startPromiseChain;

    let p = new Promise((resolve, reject) => {
        console.log('A');
        startPromiseChain = resolve;
    }).then(() => {
        //verify the initial state after the click() is to be 'updating'
        //and then reject() to trigger the catch() handler in markButtonOff
        console.log('L');
        expect(button.textContent).toBe('updating');
        return Promise.reject();
    });

    //"injected" mock
    console.log('B');
    const updaterMock = function () {
        return p;
    };

    //** begin production code
    console.log('C');
    const markButtonOn = () => {};

    //added a finally() call to the promise chain to be able to inform the
    //test that the promise has finished resolving inside the production code
    const markButtonOff = function (finallyCallback) {
        console.log('F/M');
        button.textContent = 'off';

        button.onclick = () => {
            console.log('I');
            button.textContent = 'updating';
            updaterMock()
                //using only then(): test passes
                //.then(markButtonOn,markButtonOff).finally(finallyCallback);
                //using both then() and catch(): test passes as well
                .then(markButtonOn).catch(markButtonOff).finally(finallyCallback);
        };
    }

    //** end production code

    //function to start the 2nd promise chain in the test (below), once the
    //promise chain inside markButtonOff finishes
    let callOnFinally;

    //create a promise that resolves after markButtonOff finishes updating
    let q = new Promise((resolve,reject) => {
        console.log('D');
        callOnFinally = resolve;
    }).then(() => {
        //make sure the button says it is 'off' again after it finishes updating
        console.log('N');
        expect(button.textContent).toBe('off');
    });

    //setup the initial button state
    console.log('E');
    markButtonOff(callOnFinally);

    //assert button is initially off
    console.log('G');
    expect(button.textContent).toBe('off');

    //try to turn on
    console.log('H');
    button.click();

    //trigger the update to fail, simulating an API request failure
    //this starts the first promise in the test to resolve
    console.log('J');
    startPromiseChain();

    console.log('K');
    //return the promise created above so Jest waits for it to resolve
    return q;
});

All the console.log calls are in correct alphabetical order for what is output when I run the test.

Here is a summary of the process:

1. Create a promise we can manually activate to kick the whole thing off, and include a .then() that both checks the initial state after the promise chain starts, and that actually triggers the reject path that we want to test.

2. Setup the production code. Here I added a callback function to be called in a finally() after the then(fn1,fn2) or then(fn1).catch(fn2). This is necessary (as far as I can tell), and is an acceptable compromise, as that callback could also be used for other things that want to wait for the button to finish updating.

3. Setup another promise that can be triggered via that finally() callback, and have that do the final assertions of the test, to make sure everything is how it should be when the production code has finished.

4. Start the promise chain in step 1 and return the promise from step 3 from the test, so that Jest waits for the whole chain to complete before it reports pass or fail.

It looks a little convoluted due to the need to define and assign variables in the right order, but it works perfectly and makes logical sense. (Unless I made a mistake and it is just working by luck, but I think I understand it now.)