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: https://github.com/geelen/react-snapshot/issues/32 https://github.com/geelen/react-snapshot/issues/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