Snapshot of async re-render (setState)

[pedroBruno7]

Hi

When my React code has a fetch (inside componentDidMount for example) or other async operation (like setTimeout) that has a setState inside the callback, the snapshot does not detect that new html render, even when the snapshotDelay is very big.

A simple component example:

class Users extends Component {

    state = {
        data: null
    }
    
    componentDidMount() {
 
        setTimeout(() => {
           
            this.setState(
                {
                    data: [
                       2, 3, 4, 2, 3, 4,2, 3, 4,2, 3, 4,2, 3, 4,2, 3, 4,2, 3, 4,2, 3, 4,2, 3, 4,2, 3, 4,2, 3, 4,2, 3, 4,2, 3, 4
                    ]
                })
        }, 1000);
        
    }
  
   render() {

        return (
            <div>
                <p>Users page !!!</p>
                {this.state.data}
            </div>
        )
   }
    
}

The snapshot html file will not have that data on it, even tough I have a delay set up with:

"reactSnapshot": {
"snapshotDelay": 5000
}

Being the setTimeout 1000 ms, why it does not appear on snapshot? Is it not just a temporal snap of the current page html? I confirmed and the each snap waits 5 seconds on the console

I assume this is related to the issues found here:
#32
#68

@geelen Can you help? Big thanks

[arnespremberg]

@pedroBruno7 did you find a solution for this? I'm running into the same problem

[johnlin0207]

me too,how to fix it?

[pedroBruno7]

@arnespremberg @johnlin0207
Hi, I did not find any viable solution with the react snapshot libraries out there
My advice is: use gatsby for this kind of stuff, it's a very robust project with extensive documentation. You can balance static and dynamic react code and even trigger new "snapshots" when data changes on your API