ComponentDidMount y Jest

Este finde estuve intentando solucionar un pequeño issue con un test. El mismo tenia que chequear una función asíncrona llamada en el componentDidMount de un componente (React). El problema estaba en que no fallaba el test sino que fallaba el codigo, para poder verlo desde más cerca les pego una porción del mismo.

componentDidMount() {
    const result = await SomeService.SomeAsyncFunction();
    if(result.success) this.setState({someData: result.someData})
}
it('fetchSomeData', async () => {
    const promise = new Promise(resolve => {
         process.nextTick(() => resolve({success: true, someData: 'Example'}))
    })

    SomeService.SomeAsyncFunction.mockImplementation(() => {
        return promise
    })
    const container = shallow(<TheContainer />);

    await sleep(10);
    expect(container.state().someData).to.equal('Example');
    expect(SomeService.SomeAsyncFunction).toHaveBeenCalled();
});

Aún asi, viendo el test, no fallaba en el assert (expect) sino que fallaba en el condicional if(result.success) ..., donde fallaba el test por que result era undefined. Añadí un console.log(result) para ver que es lo que estaba pasando y efectivamente me encontre que Jest estaba saltando el await SomeService... y iba directamente al condicional no estaba esperando a que se resuelva la Promise, sino que directamente saltaba a la siguiente instrucción (el condicional).

undefined
{success: true, someData: 'Example'}
{success: true, someData: 'Example'}
{success: true, someData: 'Example'}

Cuestión es que me puse a buscar porque se comportaba así y aún no habiendo encontrado el porque les comparto la simple e innecesaria solución.

const result = await SomeService.SomeAsyncFunction(); 
if(result && result.success) this.setState({someData: result.someData})

En la ejecución no cambia el result && añadido, sin embargo fue la aguja en el pajar para poder entregar el test.


< Atrás