For ex, following is my code when I upgrade react from 17 to 18, ReactDom render become async, so I use #act to wrap react ReactDom render but react always require wrap all setState with #act
if not it will raise warn When testing, code that causes React state updates should be wrapped into act(...), it's huge work
so I expect a way make ReactDom render sync like React 17 and without #act warn
class C extends Component<{}, { k: number }> {
constructor(p: any) {
super(p)
this.state = {k: 0}
}
render() {
return <div onClick={() => {
// act(() => {
// assume this.setState is lib code not test code, I cannot always use act wrap setState
this.setState({k: this.state.k + 1})
// })
}}>{this.state.k}</div>
}
}
var r = ReactDOM.createRoot(document.querySelector("#root"))
var c: C
act(() => {
r.render(<C ref={e => c = e}/>)
})
c // act wrap r.render is required in react 18, since react 18 #render is async but many my old project test codes are sync
I find the solution, is not above my question's code bug
the err reason is:
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
act(() => {
root.render(testTemplate)
});
enable IS_REACT_ACT_ENVIRONMENT will always require setState should be wrapped with #act
so following is solution
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
act(() => {
root.render(testTemplate)
});
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = false