How to use useLayoutEffect method in Playwright Internal

Best JavaScript code snippet using playwright-internal

StrictEffectsModeDefaults-test.internal.js

Source:StrictEffectsModeDefaults-test.internal.js Github

copy

Full Screen

...27 React.useEffect(() => {28 Scheduler.unstable_yieldValue('useEffect mount');29 return () => Scheduler.unstable_yieldValue('useEffect unmount');30 });31 React.useLayoutEffect(() => {32 Scheduler.unstable_yieldValue('useLayoutEffect mount');33 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');34 });35 return text;36 }37 act(() => {38 ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);39 });40 expect(Scheduler).toHaveYielded([41 'useLayoutEffect mount',42 'useEffect mount',43 ]);44 });45 it('should not double invoke class lifecycles in legacy mode', () => {46 class App extends React.PureComponent {47 componentDidMount() {48 Scheduler.unstable_yieldValue('componentDidMount');49 }50 componentDidUpdate() {51 Scheduler.unstable_yieldValue('componentDidUpdate');52 }53 componentWillUnmount() {54 Scheduler.unstable_yieldValue('componentWillUnmount');55 }56 render() {57 return this.props.text;58 }59 }60 act(() => {61 ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);62 });63 expect(Scheduler).toHaveYielded(['componentDidMount']);64 });65 if (__DEV__) {66 it('should flush double-invoked effects within the same frame as layout effects if there are no passive effects', () => {67 function ComponentWithEffects({label}) {68 React.useLayoutEffect(() => {69 Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);70 return () =>71 Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);72 });73 return label;74 }75 act(() => {76 ReactNoop.render(77 <>78 <ComponentWithEffects label={'one'} />79 </>,80 );81 expect(Scheduler).toFlushUntilNextPaint([82 'useLayoutEffect mount "one"',83 'useLayoutEffect unmount "one"',84 'useLayoutEffect mount "one"',85 ]);86 });87 act(() => {88 ReactNoop.render(89 <>90 <ComponentWithEffects label={'one'} />91 <ComponentWithEffects label={'two'} />92 </>,93 );94 expect(Scheduler).toHaveYielded([]);95 expect(Scheduler).toFlushUntilNextPaint([96 // Cleanup and re-run "one" (and "two") since there is no dependencies array.97 'useLayoutEffect unmount "one"',98 'useLayoutEffect mount "one"',99 'useLayoutEffect mount "two"',100 // Since "two" is new, it should be double-invoked.101 'useLayoutEffect unmount "two"',102 'useLayoutEffect mount "two"',103 ]);104 });105 });106 // This test also verifies that double-invoked effects flush synchronously107 // within the same frame as passive effects.108 it('should double invoke effects only for newly mounted components', () => {109 function ComponentWithEffects({label}) {110 React.useEffect(() => {111 Scheduler.unstable_yieldValue(`useEffect mount "${label}"`);112 return () =>113 Scheduler.unstable_yieldValue(`useEffect unmount "${label}"`);114 });115 React.useLayoutEffect(() => {116 Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);117 return () =>118 Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);119 });120 return label;121 }122 act(() => {123 ReactNoop.render(124 <>125 <ComponentWithEffects label={'one'} />126 </>,127 );128 expect(Scheduler).toFlushAndYieldThrough([129 'useLayoutEffect mount "one"',130 ]);131 expect(Scheduler).toFlushAndYield([132 'useEffect mount "one"',133 'useLayoutEffect unmount "one"',134 'useEffect unmount "one"',135 'useLayoutEffect mount "one"',136 'useEffect mount "one"',137 ]);138 });139 act(() => {140 ReactNoop.render(141 <>142 <ComponentWithEffects label={'one'} />143 <ComponentWithEffects label={'two'} />144 </>,145 );146 expect(Scheduler).toFlushAndYieldThrough([147 // Cleanup and re-run "one" (and "two") since there is no dependencies array.148 'useLayoutEffect unmount "one"',149 'useLayoutEffect mount "one"',150 'useLayoutEffect mount "two"',151 ]);152 expect(Scheduler).toFlushAndYield([153 'useEffect unmount "one"',154 'useEffect mount "one"',155 'useEffect mount "two"',156 // Since "two" is new, it should be double-invoked.157 'useLayoutEffect unmount "two"',158 'useEffect unmount "two"',159 'useLayoutEffect mount "two"',160 'useEffect mount "two"',161 ]);162 });163 });164 it('double invoking for effects for modern roots', () => {165 function App({text}) {166 React.useEffect(() => {167 Scheduler.unstable_yieldValue('useEffect mount');168 return () => Scheduler.unstable_yieldValue('useEffect unmount');169 });170 React.useLayoutEffect(() => {171 Scheduler.unstable_yieldValue('useLayoutEffect mount');172 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');173 });174 return text;175 }176 act(() => {177 ReactNoop.render(<App text={'mount'} />);178 });179 expect(Scheduler).toHaveYielded([180 'useLayoutEffect mount',181 'useEffect mount',182 'useLayoutEffect unmount',183 'useEffect unmount',184 'useLayoutEffect mount',185 'useEffect mount',186 ]);187 act(() => {188 ReactNoop.render(<App text={'update'} />);189 });190 expect(Scheduler).toHaveYielded([191 'useLayoutEffect unmount',192 'useLayoutEffect mount',193 'useEffect unmount',194 'useEffect mount',195 ]);196 act(() => {197 ReactNoop.render(null);198 });199 expect(Scheduler).toHaveYielded([200 'useLayoutEffect unmount',201 'useEffect unmount',202 ]);203 });204 it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {205 function App({text}) {206 React.useEffect(() => {207 Scheduler.unstable_yieldValue('useEffect One mount');208 return () => Scheduler.unstable_yieldValue('useEffect One unmount');209 });210 React.useEffect(() => {211 Scheduler.unstable_yieldValue('useEffect Two mount');212 return () => Scheduler.unstable_yieldValue('useEffect Two unmount');213 });214 return text;215 }216 act(() => {217 ReactNoop.render(<App text={'mount'} />);218 });219 expect(Scheduler).toHaveYielded([220 'useEffect One mount',221 'useEffect Two mount',222 'useEffect One unmount',223 'useEffect Two unmount',224 'useEffect One mount',225 'useEffect Two mount',226 ]);227 act(() => {228 ReactNoop.render(<App text={'update'} />);229 });230 expect(Scheduler).toHaveYielded([231 'useEffect One unmount',232 'useEffect Two unmount',233 'useEffect One mount',234 'useEffect Two mount',235 ]);236 act(() => {237 ReactNoop.render(null);238 });239 expect(Scheduler).toHaveYielded([240 'useEffect One unmount',241 'useEffect Two unmount',242 ]);243 });244 it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {245 function App({text}) {246 React.useLayoutEffect(() => {247 Scheduler.unstable_yieldValue('useLayoutEffect One mount');248 return () =>249 Scheduler.unstable_yieldValue('useLayoutEffect One unmount');250 });251 React.useLayoutEffect(() => {252 Scheduler.unstable_yieldValue('useLayoutEffect Two mount');253 return () =>254 Scheduler.unstable_yieldValue('useLayoutEffect Two unmount');255 });256 return text;257 }258 act(() => {259 ReactNoop.render(<App text={'mount'} />);260 });261 expect(Scheduler).toHaveYielded([262 'useLayoutEffect One mount',263 'useLayoutEffect Two mount',264 'useLayoutEffect One unmount',265 'useLayoutEffect Two unmount',266 'useLayoutEffect One mount',267 'useLayoutEffect Two mount',268 ]);269 act(() => {270 ReactNoop.render(<App text={'update'} />);271 });272 expect(Scheduler).toHaveYielded([273 'useLayoutEffect One unmount',274 'useLayoutEffect Two unmount',275 'useLayoutEffect One mount',276 'useLayoutEffect Two mount',277 ]);278 act(() => {279 ReactNoop.render(null);280 });281 expect(Scheduler).toHaveYielded([282 'useLayoutEffect One unmount',283 'useLayoutEffect Two unmount',284 ]);285 });286 it('useEffect and useLayoutEffect is called twice when there is no unmount', () => {287 function App({text}) {288 React.useEffect(() => {289 Scheduler.unstable_yieldValue('useEffect mount');290 });291 React.useLayoutEffect(() => {292 Scheduler.unstable_yieldValue('useLayoutEffect mount');293 });294 return text;295 }296 act(() => {297 ReactNoop.render(<App text={'mount'} />);298 });299 expect(Scheduler).toHaveYielded([300 'useLayoutEffect mount',301 'useEffect mount',302 'useLayoutEffect mount',303 'useEffect mount',304 ]);305 act(() => {306 ReactNoop.render(<App text={'update'} />);307 });308 expect(Scheduler).toHaveYielded([309 'useLayoutEffect mount',310 'useEffect mount',311 ]);312 act(() => {313 ReactNoop.render(null);314 });315 expect(Scheduler).toHaveYielded([]);316 });317 it('passes the right context to class component lifecycles', () => {318 class App extends React.PureComponent {319 test() {}320 componentDidMount() {321 this.test();322 Scheduler.unstable_yieldValue('componentDidMount');323 }324 componentDidUpdate() {325 this.test();326 Scheduler.unstable_yieldValue('componentDidUpdate');327 }328 componentWillUnmount() {329 this.test();330 Scheduler.unstable_yieldValue('componentWillUnmount');331 }332 render() {333 return null;334 }335 }336 act(() => {337 ReactNoop.render(<App />);338 });339 expect(Scheduler).toHaveYielded([340 'componentDidMount',341 'componentWillUnmount',342 'componentDidMount',343 ]);344 });345 it('double invoking works for class components', () => {346 class App extends React.PureComponent {347 componentDidMount() {348 Scheduler.unstable_yieldValue('componentDidMount');349 }350 componentDidUpdate() {351 Scheduler.unstable_yieldValue('componentDidUpdate');352 }353 componentWillUnmount() {354 Scheduler.unstable_yieldValue('componentWillUnmount');355 }356 render() {357 return this.props.text;358 }359 }360 act(() => {361 ReactNoop.render(<App text={'mount'} />);362 });363 expect(Scheduler).toHaveYielded([364 'componentDidMount',365 'componentWillUnmount',366 'componentDidMount',367 ]);368 act(() => {369 ReactNoop.render(<App text={'update'} />);370 });371 expect(Scheduler).toHaveYielded(['componentDidUpdate']);372 act(() => {373 ReactNoop.render(null);374 });375 expect(Scheduler).toHaveYielded(['componentWillUnmount']);376 });377 it('double flushing passive effects only results in one double invoke', () => {378 function App({text}) {379 const [state, setState] = React.useState(0);380 React.useEffect(() => {381 if (state !== 1) {382 setState(1);383 }384 Scheduler.unstable_yieldValue('useEffect mount');385 return () => Scheduler.unstable_yieldValue('useEffect unmount');386 });387 React.useLayoutEffect(() => {388 Scheduler.unstable_yieldValue('useLayoutEffect mount');389 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');390 });391 Scheduler.unstable_yieldValue(text);392 return text;393 }394 act(() => {395 ReactNoop.render(<App text={'mount'} />);396 });397 expect(Scheduler).toHaveYielded([398 'mount',399 'useLayoutEffect mount',400 'useEffect mount',401 'useLayoutEffect unmount',402 'useEffect unmount',403 'useLayoutEffect mount',404 'useEffect mount',405 'mount',406 'useLayoutEffect unmount',407 'useLayoutEffect mount',408 'useEffect unmount',409 'useEffect mount',410 ]);411 });412 it('newly mounted components after initial mount get double invoked', () => {413 let _setShowChild;414 function Child() {415 React.useEffect(() => {416 Scheduler.unstable_yieldValue('Child useEffect mount');417 return () => Scheduler.unstable_yieldValue('Child useEffect unmount');418 });419 React.useLayoutEffect(() => {420 Scheduler.unstable_yieldValue('Child useLayoutEffect mount');421 return () =>422 Scheduler.unstable_yieldValue('Child useLayoutEffect unmount');423 });424 return null;425 }426 function App() {427 const [showChild, setShowChild] = React.useState(false);428 _setShowChild = setShowChild;429 React.useEffect(() => {430 Scheduler.unstable_yieldValue('App useEffect mount');431 return () => Scheduler.unstable_yieldValue('App useEffect unmount');432 });433 React.useLayoutEffect(() => {434 Scheduler.unstable_yieldValue('App useLayoutEffect mount');435 return () =>436 Scheduler.unstable_yieldValue('App useLayoutEffect unmount');437 });438 return showChild && <Child />;439 }440 act(() => {441 ReactNoop.render(<App />);442 });443 expect(Scheduler).toHaveYielded([444 'App useLayoutEffect mount',445 'App useEffect mount',446 'App useLayoutEffect unmount',447 'App useEffect unmount',448 'App useLayoutEffect mount',449 'App useEffect mount',450 ]);451 act(() => {452 _setShowChild(true);453 });454 expect(Scheduler).toHaveYielded([455 'App useLayoutEffect unmount',456 'Child useLayoutEffect mount',457 'App useLayoutEffect mount',458 'App useEffect unmount',459 'Child useEffect mount',460 'App useEffect mount',461 'Child useLayoutEffect unmount',462 'Child useEffect unmount',463 'Child useLayoutEffect mount',464 'Child useEffect mount',465 ]);466 });467 it('classes and functions are double invoked together correctly', () => {468 class ClassChild extends React.PureComponent {469 componentDidMount() {470 Scheduler.unstable_yieldValue('componentDidMount');471 }472 componentWillUnmount() {473 Scheduler.unstable_yieldValue('componentWillUnmount');474 }475 render() {476 return this.props.text;477 }478 }479 function FunctionChild({text}) {480 React.useEffect(() => {481 Scheduler.unstable_yieldValue('useEffect mount');482 return () => Scheduler.unstable_yieldValue('useEffect unmount');483 });484 React.useLayoutEffect(() => {485 Scheduler.unstable_yieldValue('useLayoutEffect mount');486 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');487 });488 return text;489 }490 function App({text}) {491 return (492 <>493 <ClassChild text={text} />494 <FunctionChild text={text} />495 </>496 );497 }498 act(() => {...

Full Screen

Full Screen

StrictEffectsMode-test.js

Source:StrictEffectsMode-test.js Github

copy

Full Screen

...33 React.useEffect(() => {34 Scheduler.unstable_yieldValue('useEffect mount');35 return () => Scheduler.unstable_yieldValue('useEffect unmount');36 });37 React.useLayoutEffect(() => {38 Scheduler.unstable_yieldValue('useLayoutEffect mount');39 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');40 });41 return text;42 }43 act(() => {44 ReactTestRenderer.create(<App text={'mount'} />);45 });46 expect(Scheduler).toHaveYielded([47 'useLayoutEffect mount',48 'useEffect mount',49 ]);50 });51 it('double invoking for effects works properly', () => {52 function App({text}) {53 React.useEffect(() => {54 Scheduler.unstable_yieldValue('useEffect mount');55 return () => Scheduler.unstable_yieldValue('useEffect unmount');56 });57 React.useLayoutEffect(() => {58 Scheduler.unstable_yieldValue('useLayoutEffect mount');59 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');60 });61 return text;62 }63 let renderer;64 act(() => {65 renderer = ReactTestRenderer.create(<App text={'mount'} />, {66 unstable_isConcurrent: true,67 });68 });69 if (supportsDoubleInvokeEffects()) {70 expect(Scheduler).toHaveYielded([71 'useLayoutEffect mount',72 'useEffect mount',73 'useLayoutEffect unmount',74 'useEffect unmount',75 'useLayoutEffect mount',76 'useEffect mount',77 ]);78 } else {79 expect(Scheduler).toHaveYielded([80 'useLayoutEffect mount',81 'useEffect mount',82 ]);83 }84 act(() => {85 renderer.update(<App text={'update'} />);86 });87 expect(Scheduler).toHaveYielded([88 'useLayoutEffect unmount',89 'useLayoutEffect mount',90 'useEffect unmount',91 'useEffect mount',92 ]);93 act(() => {94 renderer.unmount();95 });96 expect(Scheduler).toHaveYielded([97 'useLayoutEffect unmount',98 'useEffect unmount',99 ]);100 });101 it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {102 function App({text}) {103 React.useEffect(() => {104 Scheduler.unstable_yieldValue('useEffect One mount');105 return () => Scheduler.unstable_yieldValue('useEffect One unmount');106 });107 React.useEffect(() => {108 Scheduler.unstable_yieldValue('useEffect Two mount');109 return () => Scheduler.unstable_yieldValue('useEffect Two unmount');110 });111 return text;112 }113 let renderer;114 act(() => {115 renderer = ReactTestRenderer.create(<App text={'mount'} />, {116 unstable_isConcurrent: true,117 });118 });119 if (supportsDoubleInvokeEffects()) {120 expect(Scheduler).toHaveYielded([121 'useEffect One mount',122 'useEffect Two mount',123 'useEffect One unmount',124 'useEffect Two unmount',125 'useEffect One mount',126 'useEffect Two mount',127 ]);128 } else {129 expect(Scheduler).toHaveYielded([130 'useEffect One mount',131 'useEffect Two mount',132 ]);133 }134 act(() => {135 renderer.update(<App text={'update'} />);136 });137 expect(Scheduler).toHaveYielded([138 'useEffect One unmount',139 'useEffect Two unmount',140 'useEffect One mount',141 'useEffect Two mount',142 ]);143 act(() => {144 renderer.unmount(null);145 });146 expect(Scheduler).toHaveYielded([147 'useEffect One unmount',148 'useEffect Two unmount',149 ]);150 });151 it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {152 function App({text}) {153 React.useLayoutEffect(() => {154 Scheduler.unstable_yieldValue('useLayoutEffect One mount');155 return () =>156 Scheduler.unstable_yieldValue('useLayoutEffect One unmount');157 });158 React.useLayoutEffect(() => {159 Scheduler.unstable_yieldValue('useLayoutEffect Two mount');160 return () =>161 Scheduler.unstable_yieldValue('useLayoutEffect Two unmount');162 });163 return text;164 }165 let renderer;166 act(() => {167 renderer = ReactTestRenderer.create(<App text={'mount'} />, {168 unstable_isConcurrent: true,169 });170 });171 if (supportsDoubleInvokeEffects()) {172 expect(Scheduler).toHaveYielded([173 'useLayoutEffect One mount',174 'useLayoutEffect Two mount',175 'useLayoutEffect One unmount',176 'useLayoutEffect Two unmount',177 'useLayoutEffect One mount',178 'useLayoutEffect Two mount',179 ]);180 } else {181 expect(Scheduler).toHaveYielded([182 'useLayoutEffect One mount',183 'useLayoutEffect Two mount',184 ]);185 }186 act(() => {187 renderer.update(<App text={'update'} />);188 });189 expect(Scheduler).toHaveYielded([190 'useLayoutEffect One unmount',191 'useLayoutEffect Two unmount',192 'useLayoutEffect One mount',193 'useLayoutEffect Two mount',194 ]);195 act(() => {196 renderer.unmount();197 });198 expect(Scheduler).toHaveYielded([199 'useLayoutEffect One unmount',200 'useLayoutEffect Two unmount',201 ]);202 });203 it('useEffect and useLayoutEffect is called twice when there is no unmount', () => {204 function App({text}) {205 React.useEffect(() => {206 Scheduler.unstable_yieldValue('useEffect mount');207 });208 React.useLayoutEffect(() => {209 Scheduler.unstable_yieldValue('useLayoutEffect mount');210 });211 return text;212 }213 let renderer;214 act(() => {215 renderer = ReactTestRenderer.create(<App text={'mount'} />, {216 unstable_isConcurrent: true,217 });218 });219 if (supportsDoubleInvokeEffects()) {220 expect(Scheduler).toHaveYielded([221 'useLayoutEffect mount',222 'useEffect mount',223 'useLayoutEffect mount',224 'useEffect mount',225 ]);226 } else {227 expect(Scheduler).toHaveYielded([228 'useLayoutEffect mount',229 'useEffect mount',230 ]);231 }232 act(() => {233 renderer.update(<App text={'update'} />);234 });235 expect(Scheduler).toHaveYielded([236 'useLayoutEffect mount',237 'useEffect mount',238 ]);239 act(() => {240 renderer.unmount();241 });242 expect(Scheduler).toHaveYielded([]);243 });244 it('passes the right context to class component lifecycles', () => {245 class App extends React.PureComponent {246 test() {}247 componentDidMount() {248 this.test();249 Scheduler.unstable_yieldValue('componentDidMount');250 }251 componentDidUpdate() {252 this.test();253 Scheduler.unstable_yieldValue('componentDidUpdate');254 }255 componentWillUnmount() {256 this.test();257 Scheduler.unstable_yieldValue('componentWillUnmount');258 }259 render() {260 return null;261 }262 }263 act(() => {264 ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});265 });266 if (supportsDoubleInvokeEffects()) {267 expect(Scheduler).toHaveYielded([268 'componentDidMount',269 'componentWillUnmount',270 'componentDidMount',271 ]);272 } else {273 expect(Scheduler).toHaveYielded(['componentDidMount']);274 }275 });276 it('double invoking works for class components', () => {277 class App extends React.PureComponent {278 componentDidMount() {279 Scheduler.unstable_yieldValue('componentDidMount');280 }281 componentDidUpdate() {282 Scheduler.unstable_yieldValue('componentDidUpdate');283 }284 componentWillUnmount() {285 Scheduler.unstable_yieldValue('componentWillUnmount');286 }287 render() {288 return this.props.text;289 }290 }291 let renderer;292 act(() => {293 renderer = ReactTestRenderer.create(<App text={'mount'} />, {294 unstable_isConcurrent: true,295 });296 });297 if (supportsDoubleInvokeEffects()) {298 expect(Scheduler).toHaveYielded([299 'componentDidMount',300 'componentWillUnmount',301 'componentDidMount',302 ]);303 } else {304 expect(Scheduler).toHaveYielded(['componentDidMount']);305 }306 act(() => {307 renderer.update(<App text={'update'} />);308 });309 expect(Scheduler).toHaveYielded(['componentDidUpdate']);310 act(() => {311 renderer.unmount();312 });313 expect(Scheduler).toHaveYielded(['componentWillUnmount']);314 });315 it('should not double invoke class lifecycles in legacy mode', () => {316 class App extends React.PureComponent {317 componentDidMount() {318 Scheduler.unstable_yieldValue('componentDidMount');319 }320 componentDidUpdate() {321 Scheduler.unstable_yieldValue('componentDidUpdate');322 }323 componentWillUnmount() {324 Scheduler.unstable_yieldValue('componentWillUnmount');325 }326 render() {327 return this.props.text;328 }329 }330 act(() => {331 ReactTestRenderer.create(<App text={'mount'} />);332 });333 expect(Scheduler).toHaveYielded(['componentDidMount']);334 });335 it('double flushing passive effects only results in one double invoke', () => {336 function App({text}) {337 const [state, setState] = React.useState(0);338 React.useEffect(() => {339 if (state !== 1) {340 setState(1);341 }342 Scheduler.unstable_yieldValue('useEffect mount');343 return () => Scheduler.unstable_yieldValue('useEffect unmount');344 });345 React.useLayoutEffect(() => {346 Scheduler.unstable_yieldValue('useLayoutEffect mount');347 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');348 });349 Scheduler.unstable_yieldValue(text);350 return text;351 }352 act(() => {353 ReactTestRenderer.create(<App text={'mount'} />, {354 unstable_isConcurrent: true,355 });356 });357 if (supportsDoubleInvokeEffects()) {358 expect(Scheduler).toHaveYielded([359 'mount',360 'useLayoutEffect mount',361 'useEffect mount',362 'useLayoutEffect unmount',363 'useEffect unmount',364 'useLayoutEffect mount',365 'useEffect mount',366 'mount',367 'useLayoutEffect unmount',368 'useLayoutEffect mount',369 'useEffect unmount',370 'useEffect mount',371 ]);372 } else {373 expect(Scheduler).toHaveYielded([374 'mount',375 'useLayoutEffect mount',376 'useEffect mount',377 'mount',378 'useLayoutEffect unmount',379 'useLayoutEffect mount',380 'useEffect unmount',381 'useEffect mount',382 ]);383 }384 });385 it('newly mounted components after initial mount get double invoked', () => {386 let _setShowChild;387 function Child() {388 React.useEffect(() => {389 Scheduler.unstable_yieldValue('Child useEffect mount');390 return () => Scheduler.unstable_yieldValue('Child useEffect unmount');391 });392 React.useLayoutEffect(() => {393 Scheduler.unstable_yieldValue('Child useLayoutEffect mount');394 return () =>395 Scheduler.unstable_yieldValue('Child useLayoutEffect unmount');396 });397 return null;398 }399 function App() {400 const [showChild, setShowChild] = React.useState(false);401 _setShowChild = setShowChild;402 React.useEffect(() => {403 Scheduler.unstable_yieldValue('App useEffect mount');404 return () => Scheduler.unstable_yieldValue('App useEffect unmount');405 });406 React.useLayoutEffect(() => {407 Scheduler.unstable_yieldValue('App useLayoutEffect mount');408 return () =>409 Scheduler.unstable_yieldValue('App useLayoutEffect unmount');410 });411 return showChild && <Child />;412 }413 act(() => {414 ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});415 });416 if (supportsDoubleInvokeEffects()) {417 expect(Scheduler).toHaveYielded([418 'App useLayoutEffect mount',419 'App useEffect mount',420 'App useLayoutEffect unmount',421 'App useEffect unmount',422 'App useLayoutEffect mount',423 'App useEffect mount',424 ]);425 } else {426 expect(Scheduler).toHaveYielded([427 'App useLayoutEffect mount',428 'App useEffect mount',429 ]);430 }431 act(() => {432 _setShowChild(true);433 });434 if (supportsDoubleInvokeEffects()) {435 expect(Scheduler).toHaveYielded([436 'App useLayoutEffect unmount',437 'Child useLayoutEffect mount',438 'App useLayoutEffect mount',439 'App useEffect unmount',440 'Child useEffect mount',441 'App useEffect mount',442 'Child useLayoutEffect unmount',443 'Child useEffect unmount',444 'Child useLayoutEffect mount',445 'Child useEffect mount',446 ]);447 } else {448 expect(Scheduler).toHaveYielded([449 'App useLayoutEffect unmount',450 'Child useLayoutEffect mount',451 'App useLayoutEffect mount',452 'App useEffect unmount',453 'Child useEffect mount',454 'App useEffect mount',455 ]);456 }457 });458 it('classes and functions are double invoked together correctly', () => {459 class ClassChild extends React.PureComponent {460 componentDidMount() {461 Scheduler.unstable_yieldValue('componentDidMount');462 }463 componentWillUnmount() {464 Scheduler.unstable_yieldValue('componentWillUnmount');465 }466 render() {467 return this.props.text;468 }469 }470 function FunctionChild({text}) {471 React.useEffect(() => {472 Scheduler.unstable_yieldValue('useEffect mount');473 return () => Scheduler.unstable_yieldValue('useEffect unmount');474 });475 React.useLayoutEffect(() => {476 Scheduler.unstable_yieldValue('useLayoutEffect mount');477 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');478 });479 return text;480 }481 function App({text}) {482 return (483 <>484 <ClassChild text={text} />485 <FunctionChild text={text} />486 </>487 );488 }489 let renderer;...

Full Screen

Full Screen

ReactDoubleInvokeEvents-test.js

Source:ReactDoubleInvokeEvents-test.js Github

copy

Full Screen

...32 React.useEffect(() => {33 Scheduler.unstable_yieldValue('useEffect mount');34 return () => Scheduler.unstable_yieldValue('useEffect unmount');35 });36 React.useLayoutEffect(() => {37 Scheduler.unstable_yieldValue('useLayoutEffect mount');38 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');39 });40 return text;41 }42 act(() => {43 ReactTestRenderer.create(<App text={'mount'} />);44 });45 expect(Scheduler).toHaveYielded([46 'useLayoutEffect mount',47 'useEffect mount',48 ]);49 });50 it('double invoking for effects works properly', () => {51 function App({text}) {52 React.useEffect(() => {53 Scheduler.unstable_yieldValue('useEffect mount');54 return () => Scheduler.unstable_yieldValue('useEffect unmount');55 });56 React.useLayoutEffect(() => {57 Scheduler.unstable_yieldValue('useLayoutEffect mount');58 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');59 });60 return text;61 }62 let renderer;63 act(() => {64 renderer = ReactTestRenderer.create(<App text={'mount'} />, {65 unstable_isConcurrent: true,66 });67 });68 if (supportsDoubleInvokeEffects()) {69 expect(Scheduler).toHaveYielded([70 'useLayoutEffect mount',71 'useEffect mount',72 'useLayoutEffect unmount',73 'useEffect unmount',74 'useLayoutEffect mount',75 'useEffect mount',76 ]);77 } else {78 expect(Scheduler).toHaveYielded([79 'useLayoutEffect mount',80 'useEffect mount',81 ]);82 }83 act(() => {84 renderer.update(<App text={'update'} />);85 });86 expect(Scheduler).toHaveYielded([87 'useLayoutEffect unmount',88 'useLayoutEffect mount',89 'useEffect unmount',90 'useEffect mount',91 ]);92 act(() => {93 renderer.unmount();94 });95 expect(Scheduler).toHaveYielded([96 'useLayoutEffect unmount',97 'useEffect unmount',98 ]);99 });100 it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {101 function App({text}) {102 React.useEffect(() => {103 Scheduler.unstable_yieldValue('useEffect One mount');104 return () => Scheduler.unstable_yieldValue('useEffect One unmount');105 });106 React.useEffect(() => {107 Scheduler.unstable_yieldValue('useEffect Two mount');108 return () => Scheduler.unstable_yieldValue('useEffect Two unmount');109 });110 return text;111 }112 let renderer;113 act(() => {114 renderer = ReactTestRenderer.create(<App text={'mount'} />, {115 unstable_isConcurrent: true,116 });117 });118 if (supportsDoubleInvokeEffects()) {119 expect(Scheduler).toHaveYielded([120 'useEffect One mount',121 'useEffect Two mount',122 'useEffect One unmount',123 'useEffect Two unmount',124 'useEffect One mount',125 'useEffect Two mount',126 ]);127 } else {128 expect(Scheduler).toHaveYielded([129 'useEffect One mount',130 'useEffect Two mount',131 ]);132 }133 act(() => {134 renderer.update(<App text={'update'} />);135 });136 expect(Scheduler).toHaveYielded([137 'useEffect One unmount',138 'useEffect Two unmount',139 'useEffect One mount',140 'useEffect Two mount',141 ]);142 act(() => {143 renderer.unmount(null);144 });145 expect(Scheduler).toHaveYielded([146 'useEffect One unmount',147 'useEffect Two unmount',148 ]);149 });150 it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {151 function App({text}) {152 React.useLayoutEffect(() => {153 Scheduler.unstable_yieldValue('useLayoutEffect One mount');154 return () =>155 Scheduler.unstable_yieldValue('useLayoutEffect One unmount');156 });157 React.useLayoutEffect(() => {158 Scheduler.unstable_yieldValue('useLayoutEffect Two mount');159 return () =>160 Scheduler.unstable_yieldValue('useLayoutEffect Two unmount');161 });162 return text;163 }164 let renderer;165 act(() => {166 renderer = ReactTestRenderer.create(<App text={'mount'} />, {167 unstable_isConcurrent: true,168 });169 });170 if (supportsDoubleInvokeEffects()) {171 expect(Scheduler).toHaveYielded([172 'useLayoutEffect One mount',173 'useLayoutEffect Two mount',174 'useLayoutEffect One unmount',175 'useLayoutEffect Two unmount',176 'useLayoutEffect One mount',177 'useLayoutEffect Two mount',178 ]);179 } else {180 expect(Scheduler).toHaveYielded([181 'useLayoutEffect One mount',182 'useLayoutEffect Two mount',183 ]);184 }185 act(() => {186 renderer.update(<App text={'update'} />);187 });188 expect(Scheduler).toHaveYielded([189 'useLayoutEffect One unmount',190 'useLayoutEffect Two unmount',191 'useLayoutEffect One mount',192 'useLayoutEffect Two mount',193 ]);194 act(() => {195 renderer.unmount();196 });197 expect(Scheduler).toHaveYielded([198 'useLayoutEffect One unmount',199 'useLayoutEffect Two unmount',200 ]);201 });202 it('useEffect and useLayoutEffect is called twice when there is no unmount', () => {203 function App({text}) {204 React.useEffect(() => {205 Scheduler.unstable_yieldValue('useEffect mount');206 });207 React.useLayoutEffect(() => {208 Scheduler.unstable_yieldValue('useLayoutEffect mount');209 });210 return text;211 }212 let renderer;213 act(() => {214 renderer = ReactTestRenderer.create(<App text={'mount'} />, {215 unstable_isConcurrent: true,216 });217 });218 if (supportsDoubleInvokeEffects()) {219 expect(Scheduler).toHaveYielded([220 'useLayoutEffect mount',221 'useEffect mount',222 'useLayoutEffect mount',223 'useEffect mount',224 ]);225 } else {226 expect(Scheduler).toHaveYielded([227 'useLayoutEffect mount',228 'useEffect mount',229 ]);230 }231 act(() => {232 renderer.update(<App text={'update'} />);233 });234 expect(Scheduler).toHaveYielded([235 'useLayoutEffect mount',236 'useEffect mount',237 ]);238 act(() => {239 renderer.unmount();240 });241 expect(Scheduler).toHaveYielded([]);242 });243 it('passes the right context to class component lifecycles', () => {244 class App extends React.PureComponent {245 test() {}246 componentDidMount() {247 this.test();248 Scheduler.unstable_yieldValue('componentDidMount');249 }250 componentDidUpdate() {251 this.test();252 Scheduler.unstable_yieldValue('componentDidUpdate');253 }254 componentWillUnmount() {255 this.test();256 Scheduler.unstable_yieldValue('componentWillUnmount');257 }258 render() {259 return null;260 }261 }262 act(() => {263 ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});264 });265 if (supportsDoubleInvokeEffects()) {266 expect(Scheduler).toHaveYielded([267 'componentDidMount',268 'componentWillUnmount',269 'componentDidMount',270 ]);271 } else {272 expect(Scheduler).toHaveYielded(['componentDidMount']);273 }274 });275 it('double invoking works for class components', () => {276 class App extends React.PureComponent {277 componentDidMount() {278 Scheduler.unstable_yieldValue('componentDidMount');279 }280 componentDidUpdate() {281 Scheduler.unstable_yieldValue('componentDidUpdate');282 }283 componentWillUnmount() {284 Scheduler.unstable_yieldValue('componentWillUnmount');285 }286 render() {287 return this.props.text;288 }289 }290 let renderer;291 act(() => {292 renderer = ReactTestRenderer.create(<App text={'mount'} />, {293 unstable_isConcurrent: true,294 });295 });296 if (supportsDoubleInvokeEffects()) {297 expect(Scheduler).toHaveYielded([298 'componentDidMount',299 'componentWillUnmount',300 'componentDidMount',301 ]);302 } else {303 expect(Scheduler).toHaveYielded(['componentDidMount']);304 }305 act(() => {306 renderer.update(<App text={'update'} />);307 });308 expect(Scheduler).toHaveYielded(['componentDidUpdate']);309 act(() => {310 renderer.unmount();311 });312 expect(Scheduler).toHaveYielded(['componentWillUnmount']);313 });314 it('should not double invoke class lifecycles in legacy mode', () => {315 class App extends React.PureComponent {316 componentDidMount() {317 Scheduler.unstable_yieldValue('componentDidMount');318 }319 componentDidUpdate() {320 Scheduler.unstable_yieldValue('componentDidUpdate');321 }322 componentWillUnmount() {323 Scheduler.unstable_yieldValue('componentWillUnmount');324 }325 render() {326 return this.props.text;327 }328 }329 act(() => {330 ReactTestRenderer.create(<App text={'mount'} />);331 });332 expect(Scheduler).toHaveYielded(['componentDidMount']);333 });334 it('double flushing passive effects only results in one double invoke', () => {335 function App({text}) {336 const [state, setState] = React.useState(0);337 React.useEffect(() => {338 if (state !== 1) {339 setState(1);340 }341 Scheduler.unstable_yieldValue('useEffect mount');342 return () => Scheduler.unstable_yieldValue('useEffect unmount');343 });344 React.useLayoutEffect(() => {345 Scheduler.unstable_yieldValue('useLayoutEffect mount');346 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');347 });348 Scheduler.unstable_yieldValue(text);349 return text;350 }351 act(() => {352 ReactTestRenderer.create(<App text={'mount'} />, {353 unstable_isConcurrent: true,354 });355 });356 if (supportsDoubleInvokeEffects()) {357 expect(Scheduler).toHaveYielded([358 'mount',359 'useLayoutEffect mount',360 'useEffect mount',361 'useLayoutEffect unmount',362 'useEffect unmount',363 'useLayoutEffect mount',364 'useEffect mount',365 'mount',366 'useLayoutEffect unmount',367 'useLayoutEffect mount',368 'useEffect unmount',369 'useEffect mount',370 ]);371 } else {372 expect(Scheduler).toHaveYielded([373 'mount',374 'useLayoutEffect mount',375 'useEffect mount',376 'mount',377 'useLayoutEffect unmount',378 'useLayoutEffect mount',379 'useEffect unmount',380 'useEffect mount',381 ]);382 }383 });384 it('newly mounted components after initial mount get double invoked', () => {385 let _setShowChild;386 function Child() {387 React.useEffect(() => {388 Scheduler.unstable_yieldValue('Child useEffect mount');389 return () => Scheduler.unstable_yieldValue('Child useEffect unmount');390 });391 React.useLayoutEffect(() => {392 Scheduler.unstable_yieldValue('Child useLayoutEffect mount');393 return () =>394 Scheduler.unstable_yieldValue('Child useLayoutEffect unmount');395 });396 return null;397 }398 function App() {399 const [showChild, setShowChild] = React.useState(false);400 _setShowChild = setShowChild;401 React.useEffect(() => {402 Scheduler.unstable_yieldValue('App useEffect mount');403 return () => Scheduler.unstable_yieldValue('App useEffect unmount');404 });405 React.useLayoutEffect(() => {406 Scheduler.unstable_yieldValue('App useLayoutEffect mount');407 return () =>408 Scheduler.unstable_yieldValue('App useLayoutEffect unmount');409 });410 return showChild && <Child />;411 }412 act(() => {413 ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});414 });415 if (supportsDoubleInvokeEffects()) {416 expect(Scheduler).toHaveYielded([417 'App useLayoutEffect mount',418 'App useEffect mount',419 'App useLayoutEffect unmount',420 'App useEffect unmount',421 'App useLayoutEffect mount',422 'App useEffect mount',423 ]);424 } else {425 expect(Scheduler).toHaveYielded([426 'App useLayoutEffect mount',427 'App useEffect mount',428 ]);429 }430 act(() => {431 _setShowChild(true);432 });433 if (supportsDoubleInvokeEffects()) {434 expect(Scheduler).toHaveYielded([435 'App useLayoutEffect unmount',436 'Child useLayoutEffect mount',437 'App useLayoutEffect mount',438 'App useEffect unmount',439 'Child useEffect mount',440 'App useEffect mount',441 'Child useLayoutEffect unmount',442 'Child useEffect unmount',443 'Child useLayoutEffect mount',444 'Child useEffect mount',445 ]);446 } else {447 expect(Scheduler).toHaveYielded([448 'App useLayoutEffect unmount',449 'Child useLayoutEffect mount',450 'App useLayoutEffect mount',451 'App useEffect unmount',452 'Child useEffect mount',453 'App useEffect mount',454 ]);455 }456 });457 it('classes and functions are double invoked together correctly', () => {458 class ClassChild extends React.PureComponent {459 componentDidMount() {460 Scheduler.unstable_yieldValue('componentDidMount');461 }462 componentWillUnmount() {463 Scheduler.unstable_yieldValue('componentWillUnmount');464 }465 render() {466 return this.props.text;467 }468 }469 function FunctionChild({text}) {470 React.useEffect(() => {471 Scheduler.unstable_yieldValue('useEffect mount');472 return () => Scheduler.unstable_yieldValue('useEffect unmount');473 });474 React.useLayoutEffect(() => {475 Scheduler.unstable_yieldValue('useLayoutEffect mount');476 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');477 });478 return text;479 }480 function App({text}) {481 return (482 <>483 <ClassChild text={text} />484 <FunctionChild text={text} />485 </>486 );487 }488 let renderer;...

Full Screen

Full Screen

ReactDoubleInvokeEvents-test.internal.js

Source:ReactDoubleInvokeEvents-test.internal.js Github

copy

Full Screen

...25 React.useEffect(() => {26 Scheduler.unstable_yieldValue('useEffect mount');27 return () => Scheduler.unstable_yieldValue('useEffect unmount');28 });29 React.useLayoutEffect(() => {30 Scheduler.unstable_yieldValue('useLayoutEffect mount');31 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');32 });33 return text;34 }35 ReactNoop.act(() => {36 ReactNoop.render(<App text={'mount'} />);37 });38 if (__DEV__ && __VARIANT__) {39 expect(Scheduler).toHaveYielded([40 'useLayoutEffect mount',41 'useEffect mount',42 'useLayoutEffect unmount',43 'useEffect unmount',44 'useLayoutEffect mount',45 'useEffect mount',46 ]);47 } else {48 expect(Scheduler).toHaveYielded([49 'useLayoutEffect mount',50 'useEffect mount',51 ]);52 }53 ReactNoop.act(() => {54 ReactNoop.render(<App text={'update'} />);55 });56 expect(Scheduler).toHaveYielded([57 'useLayoutEffect unmount',58 'useLayoutEffect mount',59 'useEffect unmount',60 'useEffect mount',61 ]);62 ReactNoop.act(() => {63 ReactNoop.render(null);64 });65 expect(Scheduler).toHaveYielded([66 'useLayoutEffect unmount',67 'useEffect unmount',68 ]);69 });70 it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {71 function App({text}) {72 React.useEffect(() => {73 Scheduler.unstable_yieldValue('useEffect One mount');74 return () => Scheduler.unstable_yieldValue('useEffect One unmount');75 });76 React.useEffect(() => {77 Scheduler.unstable_yieldValue('useEffect Two mount');78 return () => Scheduler.unstable_yieldValue('useEffect Two unmount');79 });80 return text;81 }82 ReactNoop.act(() => {83 ReactNoop.render(<App text={'mount'} />);84 });85 if (__DEV__ && __VARIANT__) {86 expect(Scheduler).toHaveYielded([87 'useEffect One mount',88 'useEffect Two mount',89 'useEffect One unmount',90 'useEffect Two unmount',91 'useEffect One mount',92 'useEffect Two mount',93 ]);94 } else {95 expect(Scheduler).toHaveYielded([96 'useEffect One mount',97 'useEffect Two mount',98 ]);99 }100 ReactNoop.act(() => {101 ReactNoop.render(<App text={'update'} />);102 });103 expect(Scheduler).toHaveYielded([104 'useEffect One unmount',105 'useEffect Two unmount',106 'useEffect One mount',107 'useEffect Two mount',108 ]);109 ReactNoop.act(() => {110 ReactNoop.render(null);111 });112 expect(Scheduler).toHaveYielded([113 'useEffect One unmount',114 'useEffect Two unmount',115 ]);116 });117 it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {118 function App({text}) {119 React.useLayoutEffect(() => {120 Scheduler.unstable_yieldValue('useLayoutEffect One mount');121 return () =>122 Scheduler.unstable_yieldValue('useLayoutEffect One unmount');123 });124 React.useLayoutEffect(() => {125 Scheduler.unstable_yieldValue('useLayoutEffect Two mount');126 return () =>127 Scheduler.unstable_yieldValue('useLayoutEffect Two unmount');128 });129 return text;130 }131 ReactNoop.act(() => {132 ReactNoop.render(<App text={'mount'} />);133 });134 if (__DEV__ && __VARIANT__) {135 expect(Scheduler).toHaveYielded([136 'useLayoutEffect One mount',137 'useLayoutEffect Two mount',138 'useLayoutEffect One unmount',139 'useLayoutEffect Two unmount',140 'useLayoutEffect One mount',141 'useLayoutEffect Two mount',142 ]);143 } else {144 expect(Scheduler).toHaveYielded([145 'useLayoutEffect One mount',146 'useLayoutEffect Two mount',147 ]);148 }149 ReactNoop.act(() => {150 ReactNoop.render(<App text={'update'} />);151 });152 expect(Scheduler).toHaveYielded([153 'useLayoutEffect One unmount',154 'useLayoutEffect Two unmount',155 'useLayoutEffect One mount',156 'useLayoutEffect Two mount',157 ]);158 ReactNoop.act(() => {159 ReactNoop.render(null);160 });161 expect(Scheduler).toHaveYielded([162 'useLayoutEffect One unmount',163 'useLayoutEffect Two unmount',164 ]);165 });166 it('useEffect and useLayoutEffect is called twice when there is no unmount', () => {167 function App({text}) {168 React.useEffect(() => {169 Scheduler.unstable_yieldValue('useEffect mount');170 });171 React.useLayoutEffect(() => {172 Scheduler.unstable_yieldValue('useLayoutEffect mount');173 });174 return text;175 }176 ReactNoop.act(() => {177 ReactNoop.render(<App text={'mount'} />);178 });179 if (__DEV__ && __VARIANT__) {180 expect(Scheduler).toHaveYielded([181 'useLayoutEffect mount',182 'useEffect mount',183 'useLayoutEffect mount',184 'useEffect mount',185 ]);186 } else {187 expect(Scheduler).toHaveYielded([188 'useLayoutEffect mount',189 'useEffect mount',190 ]);191 }192 ReactNoop.act(() => {193 ReactNoop.render(<App text={'update'} />);194 });195 expect(Scheduler).toHaveYielded([196 'useLayoutEffect mount',197 'useEffect mount',198 ]);199 ReactNoop.act(() => {200 ReactNoop.render(null);201 });202 expect(Scheduler).toHaveYielded([]);203 });204 it('passes the right context to class component lifecycles', () => {205 class App extends React.PureComponent {206 test() {}207 componentDidMount() {208 this.test();209 Scheduler.unstable_yieldValue('componentDidMount');210 }211 componentDidUpdate() {212 this.test();213 Scheduler.unstable_yieldValue('componentDidUpdate');214 }215 componentWillUnmount() {216 this.test();217 Scheduler.unstable_yieldValue('componentWillUnmount');218 }219 render() {220 return null;221 }222 }223 ReactNoop.act(() => {224 ReactNoop.render(<App />);225 });226 if (__DEV__ && __VARIANT__) {227 expect(Scheduler).toHaveYielded([228 'componentDidMount',229 'componentWillUnmount',230 'componentDidMount',231 ]);232 } else {233 expect(Scheduler).toHaveYielded(['componentDidMount']);234 }235 });236 it('double invoking works for class components', () => {237 class App extends React.PureComponent {238 componentDidMount() {239 Scheduler.unstable_yieldValue('componentDidMount');240 }241 componentDidUpdate() {242 Scheduler.unstable_yieldValue('componentDidUpdate');243 }244 componentWillUnmount() {245 Scheduler.unstable_yieldValue('componentWillUnmount');246 }247 render() {248 return this.props.text;249 }250 }251 ReactNoop.act(() => {252 ReactNoop.render(<App text={'mount'} />);253 });254 if (__DEV__ && __VARIANT__) {255 expect(Scheduler).toHaveYielded([256 'componentDidMount',257 'componentWillUnmount',258 'componentDidMount',259 ]);260 } else {261 expect(Scheduler).toHaveYielded(['componentDidMount']);262 }263 ReactNoop.act(() => {264 ReactNoop.render(<App text={'update'} />);265 });266 expect(Scheduler).toHaveYielded(['componentDidUpdate']);267 ReactNoop.act(() => {268 ReactNoop.render(null);269 });270 expect(Scheduler).toHaveYielded(['componentWillUnmount']);271 });272 it('double flushing passive effects only results in one double invoke', () => {273 function App({text}) {274 const [state, setState] = React.useState(0);275 React.useEffect(() => {276 if (state !== 1) {277 setState(1);278 }279 Scheduler.unstable_yieldValue('useEffect mount');280 return () => Scheduler.unstable_yieldValue('useEffect unmount');281 });282 React.useLayoutEffect(() => {283 Scheduler.unstable_yieldValue('useLayoutEffect mount');284 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');285 });286 Scheduler.unstable_yieldValue(text);287 return text;288 }289 ReactNoop.act(() => {290 ReactNoop.render(<App text={'mount'} />);291 });292 if (__DEV__ && __VARIANT__) {293 expect(Scheduler).toHaveYielded([294 'mount',295 'useLayoutEffect mount',296 'useEffect mount',297 'useLayoutEffect unmount',298 'useEffect unmount',299 'useLayoutEffect mount',300 'useEffect mount',301 'mount',302 'useLayoutEffect unmount',303 'useLayoutEffect mount',304 'useEffect unmount',305 'useEffect mount',306 ]);307 } else {308 expect(Scheduler).toHaveYielded([309 'mount',310 'useLayoutEffect mount',311 'useEffect mount',312 'mount',313 'useLayoutEffect unmount',314 'useLayoutEffect mount',315 'useEffect unmount',316 'useEffect mount',317 ]);318 }319 });320 it('newly mounted components after initial mount get double invoked', () => {321 let _setShowChild;322 function Child() {323 React.useEffect(() => {324 Scheduler.unstable_yieldValue('Child useEffect mount');325 return () => Scheduler.unstable_yieldValue('Child useEffect unmount');326 });327 React.useLayoutEffect(() => {328 Scheduler.unstable_yieldValue('Child useLayoutEffect mount');329 return () =>330 Scheduler.unstable_yieldValue('Child useLayoutEffect unmount');331 });332 return null;333 }334 function App() {335 const [showChild, setShowChild] = React.useState(false);336 _setShowChild = setShowChild;337 React.useEffect(() => {338 Scheduler.unstable_yieldValue('App useEffect mount');339 return () => Scheduler.unstable_yieldValue('App useEffect unmount');340 });341 React.useLayoutEffect(() => {342 Scheduler.unstable_yieldValue('App useLayoutEffect mount');343 return () =>344 Scheduler.unstable_yieldValue('App useLayoutEffect unmount');345 });346 return showChild && <Child />;347 }348 ReactNoop.act(() => {349 ReactNoop.render(<App />);350 });351 if (__DEV__ && __VARIANT__) {352 expect(Scheduler).toHaveYielded([353 'App useLayoutEffect mount',354 'App useEffect mount',355 'App useLayoutEffect unmount',356 'App useEffect unmount',357 'App useLayoutEffect mount',358 'App useEffect mount',359 ]);360 } else {361 expect(Scheduler).toHaveYielded([362 'App useLayoutEffect mount',363 'App useEffect mount',364 ]);365 }366 ReactNoop.act(() => {367 _setShowChild(true);368 });369 if (__DEV__ && __VARIANT__) {370 expect(Scheduler).toHaveYielded([371 'App useLayoutEffect unmount',372 'Child useLayoutEffect mount',373 'App useLayoutEffect mount',374 'App useEffect unmount',375 'Child useEffect mount',376 'App useEffect mount',377 'Child useLayoutEffect unmount',378 'Child useEffect unmount',379 'Child useLayoutEffect mount',380 'Child useEffect mount',381 ]);382 } else {383 expect(Scheduler).toHaveYielded([384 'App useLayoutEffect unmount',385 'Child useLayoutEffect mount',386 'App useLayoutEffect mount',387 'App useEffect unmount',388 'Child useEffect mount',389 'App useEffect mount',390 ]);391 }392 });393 it('classes and functions are double invoked together correctly', () => {394 class ClassChild extends React.PureComponent {395 componentDidMount() {396 Scheduler.unstable_yieldValue('componentDidMount');397 }398 componentWillUnmount() {399 Scheduler.unstable_yieldValue('componentWillUnmount');400 }401 render() {402 return this.props.text;403 }404 }405 function FunctionChild({text}) {406 React.useEffect(() => {407 Scheduler.unstable_yieldValue('useEffect mount');408 return () => Scheduler.unstable_yieldValue('useEffect unmount');409 });410 React.useLayoutEffect(() => {411 Scheduler.unstable_yieldValue('useLayoutEffect mount');412 return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');413 });414 return text;415 }416 function App({text}) {417 return (418 <>419 <ClassChild text={text} />420 <FunctionChild text={text} />421 </>422 );423 }424 ReactNoop.act(() => {...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { useLayoutEffect } = require('@playwright/test');2useLayoutEffect(() => {3 console.log('useLayoutEffect');4});5console.log('regular code');6const { useTestState } = require('@playwright/test');7useTestState('counter', (counter = 0) => counter + 1);8useTestState('counter', (counter = 0) => counter + 1);9useTestState('counter', (counter = 0) => counter + 1);10const { useWorker } = require('@playwright/test');11const worker = useWorker(__filename);12const result = await worker.run(function (a, b) {13 return a + b;14}, 1, 2);15const { useFixtures } = require('@playwright/test');16const { page, server } = useFixtures({17 server: [async ({}, run) => {18 const server = await createServer();19 await run(server);20 await server.close();21 }, { scope: 'worker' }],22 page: [async ({ server }, run) => {23 const context = await browser.newContext();24 const page = await context.newPage();25 await page.goto(server

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { useLayoutEffect } = require('playwright');2const { useLayoutEffect } = require('playwright');3const { useLayoutEffect } = require('playwright');4const { useLayoutEffect } = require('playwright');5const { useLayoutEffect } = require('playwright');6const { useLayoutEffect } = require('playwright');7const { useLayoutEffect } = require('playwright');8const { useLayoutEffect } = require('playwright');9**Environments (please complete the following information):**

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { useLayoutEffect } = require('playwright');2useLayoutEffect(async () => {3});4const { useFrame } = require('playwright');5useFrame(async () => {6});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { useLayoutEffect } = require('@playwright/test');2useLayoutEffect(async (page) => {3 await page.evaluate(() => {4 });5});6useLayoutEffect(async (page) => {7});8useLayoutEffect.skip(async (page) => {9});10useLayoutEffect.fixme(async (page) => {11});12const { useLayoutEffect } = require('playwright-use-layout-effect');13module.exports = {14 use: {15 },16};17const { useLayoutEffect } = require('@playwright/test');18useLayoutEffect(async (page) => {19 await page.evaluate(() => {20 });21});22MIT © [Nathan Smith](

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { useLayoutEffect } = require('../../lib/api');2useLayoutEffect(async (page) => {3 await page.evaluate(() => {4 const element = document.createElement('div');5 element.id = 'my-div';6 document.body.appendChild(element);7 });8});9const { useLayoutEffect } = require('../../lib/api');10useLayoutEffect(async (page) => {11 await page.evaluate(() => {12 const element = document.createElement('div');13 element.id = 'my-div';14 document.body.appendChild(element);15 });16});17const { useLayoutEffect } = require('../../lib/api');18useLayoutEffect(async (page) => {19 await page.evaluate(() => {20 const element = document.createElement('div');21 element.id = 'my-div';22 document.body.appendChild(element);23 });24});25### useLayoutEffect(callback)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { useLayoutEffect } = require('playwright');2useLayoutEffect(async (page) => {3 await page.evaluate(() => {4 });5});6const { test } = require('@playwright/test');7test('custom selector', async ({ page }) => {8 await page.setContent('<div data-testid="foo">bar</div>');9 const element = await page.$('test=foo');10 expect(await element.textContent()).toBe('bar');11});12const { test } = require('@playwright/test');13test.use({ headless: false });14test.use({ headless: true });15test('test parameter', async ({ page }) => {16 await page.screenshot({ path: `example-${test.config.headless}.png` });17});18const { test, expect } = require('@playwright/test');19test.use({ storageState: 'storage.json' });20test('test fixture', async ({ page }) => {21 await page.click('text=Get started');22 await page.fill('input[placeholder="Email"]', '

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { useLayoutEffect } = require('@playwright/test');2useLayoutEffect(async page => {3});4The Playwright Internal type definitions are included in the npm package. To use them, import the types in your test file:5const { useLayoutEffect } = require('@playwright/test');6useLayoutEffect(async page => {7});8useLayoutEffect(9 callback: (page: Page) => Promise<void> | void,10 options?: {11 timeout?: number;12 scope?: string;13 }14): void;15const { useLayoutEffect } = require('@playwright/test');16useLayoutEffect(async page => {17 await page.click('button');18});19const { test } = require('@playwright/test');20test('should click the button', async ({ page }) => {21 await page.goto('/path/to/your/page');22 await page.click('button');23});24const { useLayoutEffect } = require('@playwright/test');25useLayoutEffect(async page => {26 await page.click('button');27}, { scope: 'worker' });28const { test } = require('@playwright/test');29test('should click the button', async ({ page }) => {30 await page.goto('/path/to/your/page');31 await page.click('button');32});33- Interact with the page (click, fill, select, etc.)34- Set the page state (set cookies, set viewport size, etc.)35- Set the page configuration (set extra HTTP headers

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful