How to use mountIndeterminateComponent method in Playwright Internal
Best JavaScript code snippet using playwright-internal
get-label-from-stack-trace.js
Source:get-label-from-stack-trace.js 
1// @flow2import { getLabelFromStackTrace } from '../src/get-label-from-stack-trace'3/**4 * # Safari stack traces5 *6 * The component name may not appear in the Safari stack trace because Safari7 * implements Proper Tail Calls.8 *9 * Two components that seem almost identical may produce different stack traces10 * based on whether or not a Proper Tail Call optimization was possible. As a11 * result, you may not get the same stack traces if you try to reproduce these12 * test cases on your own.13 *14 * If Safari omits the component name from the stack trace, the best thing we15 * can do is:16 *17 * 1. Match the parent component's name if it is in the stack trace, or18 * 2. Return `undefined`.19 */20// Ensure that it works for components that have numbers and $ in their name21const expectedLabel = 'MyComponent-9'22/**23 * E.g.24 *25 * ```26 * function MyComponent$9() {27 * return <div css={{ color: 'red' }} />28 * }29 * ```30 *31 * See `playgrounds/cra/.env` for instructions on testing with the old JSX32 * transform.33 *34 * All tests after this block are for runtime=automatic, i.e. the new JSX35 * transform introduced in React 1736 */37describe('typical function component - runtime=classic', () => {38 test('Chrome', () => {39 // Each "at" line starts with some whitespace40 const stackTrace = `Error41 at createEmotionProps (emotion-element-1fb5ab00.browser.esm.js:143)42 at jsx (emotion-react.browser.esm.js:100)43 at MyComponent$9 (App.js:22)44 at renderWithHooks (react-dom.development.js:14803)45 at mountIndeterminateComponent (react-dom.development.js:17482)46 at beginWork (react-dom.development.js:18596)`47 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)48 })49 test('Firefox', () => {50 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/bundle.js:46440:4051jsx@http://localhost:3000/static/js/bundle.js:46636:11352MyComponent$9@http://localhost:3000/static/js/bundle.js:47600:7253renderWithHooks@http://localhost:3000/static/js/bundle.js:18904:2754mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:21583:1355beginWork@http://localhost:3000/static/js/bundle.js:22697:16`56 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)57 })58 test('Safari', () => {59 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/bundle.js:46440:4960jsx@http://localhost:3000/static/js/bundle.js:46635:11361renderWithHooks@http://localhost:3000/static/js/bundle.js:18904:2762mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:21583:2863beginWork$1@http://localhost:3000/static/js/bundle.js:27280:23`64 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()65 })66 test('SSR', () => {67 const stackTrace = `Error68 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a506f09.cjs.dev.js:195:40)69 at jsx (webpack-internal:///../../packages/react/dist/emotion-react.cjs.dev.js:103:45)70 at MyComponent$9 (webpack-internal:///./pages/index.js:20:61)71 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)72 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)73 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)74 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)75 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)76 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)77 at Object.defaultGetInitialProps (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:301:51)`78 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)79 })80})81/**82 * E.g.83 *84 * ```85 * function MyComponent$9() {86 * return <div css={{ color: 'red' }} />87 * }88 * ```89 */90describe('typical function component', () => {91 test('Chrome', () => {92 const stackTrace = `Error93 at createEmotionProps (emotion-element-895e3bbe.browser.esm.js:142)94 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:18)95 at MyComponent$9 (App.js:5)96 at renderWithHooks (react-dom.development.js:14803)97 at mountIndeterminateComponent (react-dom.development.js:17482)98 at beginWork (react-dom.development.js:18596)99 at beginWork$1 (react-dom.development.js:23179)`100 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)101 })102 test('Firefox', () => {103 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:40104jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247105MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2274:92106renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31107mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:17108beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:20306:20`109 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)110 })111 test('Safari', () => {112 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:49113jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247114MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2274:92115renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31116mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:32117beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:27`118 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)119 })120 test('SSR', () => {121 const stackTrace = `Error122 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)123 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)124 at MyComponent$9 (webpack-internal:///./pages/index.js:60:85)125 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)126 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)127 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)128 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)129 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)130 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)131 at Object.defaultGetInitialProps (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:301:51)`132 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)133 })134})135/**136 * E.g.137 *138 * ```139 * function MyComponent$9() {140 * function renderSpan() {141 * return <span css={{ color: 'orchid' }}>Orchid</span>142 * }143 *144 * return <div>{renderSpan()}</div>145 * }146 * ```147 */148describe('render function within function component', () => {149 test('Chrome', () => {150 const stackTrace = `Error151 at createEmotionProps (emotion-element-895e3bbe.browser.esm.js:142)152 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:18)153 at renderSpan (App.js:5)154 at MyComponent$9 (App.js:8)155 at renderWithHooks (react-dom.development.js:14803)156 at mountIndeterminateComponent (react-dom.development.js:17482)157 at beginWork (react-dom.development.js:18596)`158 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)159 })160 test('Firefox', () => {161 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:40162jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247163renderSpan@http://localhost:3000/static/js/main.chunk.js:2273:89164MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2287:15165renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31166mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:17167beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:20306:20168beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:18`169 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)170 })171 test('Safari', () => {172 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:49173jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247174MyComponent$9@http://localhost:3000/main.4d087bc1a783e9f2b657.hot-update.js:36:25175renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31176updateFunctionComponent@http://localhost:3000/static/js/vendors~main.chunk.js:18795:39177beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:27`178 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)179 })180 test('SSR', () => {181 const stackTrace = `Error182 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)183 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)184 at renderSpan (webpack-internal:///./pages/index.js:28:82)185 at MyComponent$9 (webpack-internal:///./pages/index.js:71:15)186 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)187 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)188 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)189 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)190 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)191 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)`192 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)193 })194})195/**196 * E.g.197 *198 * ```199 * function MyComponent$9() {200 * return <div>201 * {[0].map(i => <div css={{ color: 'red' }} key={i} />)}202 * </div>203 * }204 * ```205 */206describe('element returned by Array.map', () => {207 test('Chrome', () => {208 const stackTrace = `Error209 at createEmotionProps (emotion-element-895e3bbe.browser.esm.js:142)210 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:18)211 at App.js:5212 at Array.map (<anonymous>)213 at MyComponent$9 (App.js:5)214 at renderWithHooks (react-dom.development.js:14803)215 at mountIndeterminateComponent (react-dom.development.js:17482)216 at beginWork (react-dom.development.js:18596)217 at beginWork$1 (react-dom.development.js:23179)`218 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)219 })220 test('Firefox', () => {221 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:40222jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247223MyComponent$9/<.children<@http://localhost:3000/static/js/main.chunk.js:2274:106224MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2274:19225renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31226mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:17227beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:20306:20228beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:18`229 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)230 })231 test('Safari', () => {232 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:49233jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247234map@[native code]235MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2274:22236renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31237mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:32238beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:27`239 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)240 })241 test('SSR', () => {242 const stackTrace = `Error243 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)244 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)245 at eval (webpack-internal:///./pages/index.js:78:99)246 at Array.map (<anonymous>)247 at MyComponent$9 (webpack-internal:///./pages/index.js:78:19)248 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)249 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)250 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)251 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)252 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)`253 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)254 })255})256/**257 * E.g.258 *259 * ```260 * const test = {261 * MyComponent$9() {262 * return <div css={{ color: 'red' }}>red</div>263 * }264 * }265 *266 * function App() {267 * const el = test.MyComponent$9()268 *269 * return ...270 * }271 * ```272 */273describe('function component within object', () => {274 test('Chrome', () => {275 const stackTrace = `Error276 at createEmotionProps (emotion-element-6352414e.browser.esm.js?fcc6:142)277 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js?cf67:18)278 at Object.MyComponent$9 (index.js?bee7:7)279 at App (index.js?bee7:14)280 at renderWithHooks (react-dom.development.js?3c4a:14803)281 at mountIndeterminateComponent (react-dom.development.js?3c4a:17482)282 at beginWork (react-dom.development.js?3c4a:18596)283 at beginWork$1 (react-dom.development.js?3c4a:23179)`284 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)285 })286 test('Firefox', () => {287 const stackTrace = `createEmotionProps@webpack-internal:///../../packages/react/dist/emotion-element-6352414e.browser.esm.js:163:40288jsxDEV@webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js:35:230289MyComponent$9@webpack-internal:///./pages/index.js:32:82290App@webpack-internal:///./pages/index.js:49:17291renderWithHooks@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:14803:27292mountIndeterminateComponent@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17482:13293beginWork@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:18596:16294beginWork$1@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:23179:14`295 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)296 })297 test('Safari', () => {298 // MyComponent$9 does not appear in the stack trace299 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:866:49300jsxDEV@http://localhost:3000/static/js/main.chunk.js:1147:247301App@http://localhost:3000/static/js/main.chunk.js:2290:32302renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:19152:31303mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21764:32304beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:27384:27`305 expect(getLabelFromStackTrace(stackTrace)).toBe('App')306 })307 test('SSR', () => {308 const stackTrace = `Error309 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)310 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)311 at Object.MyComponent$9 (webpack-internal:///./pages/index.js:31:82)312 at App (webpack-internal:///./pages/index.js:47:19)313 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)314 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)315 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)316 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)317 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)318 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)`319 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)320 })321})322test('Chrome: Module.jsx', () => {323 // From https://github.com/emotion-js/emotion/issues/1947324 const stackTrace = `Error325 at Module.jsx (http://localhost:10400/foo/bar/Combo?WZC6ZC&1ECYELF&12FP1RC&17F9LE8&P29J1Z&19IF3L2&AS09Z5&DHIG3C&EZJOER&13HZV70&1Y0F1JC&7UNIX3&SXHPTZ&K2YF13&11KMHHF&ZT36EV&Z44N8N&1QZW1DM&O16D0M&CW2QNS&1FH6TF2&ZWDLTF&1X87ICA&6LRWIZ&ME66AT&1SR9GT&1YH9ZQP&HHC8F2&1DB0VYO&FKOBET&1MJ8I38&JLAULY&1CH0G0Z&1TVRXYJ&SPNXDO&1JYOJGK&1LO9VOK&11TND7U&1YWNKYV&1DXWRM&TK6KOI&154ANPU&RWT5PA&19HGOKC&1YUJVCR&VFG0H0&172UQH&WFFZOK&1G8KK9P&Z4U2ZW&9UOM25&CBEUA3&1BURRUK&34VP40&CT8SCX&C5EGO8&XBSA9O&LL4E3N&1G5530W&R7QR2I&11ZITTG&1OIUGH1&ZN50OK&19R3ZDC&68ZZJF&413IE5&P0AYR7&1SMIEQU&1I34GN7&1GCT1EE&165FEOI&1NN6TMC&1FGT66H&1CP9Y2C&1R3WFPP&16Z97O3&1HGGWC2&AL9WFH&JXOSA2&QUXERX&NU7E4G&3HPVD3&16NVKFB&1JO5LOD&PIJWGC&1HD0KL3&A5KQ0E&UVG8ZT&156786I&1EGYRX&931PJP&71A44J&K4T5RR&YJS0J6&6NKXDV&15LGDNT&DK4XFH:6963:17)326 at MyComponent$9 (http://localhost:10400/foo/bar/Combo?WZC6ZC&1ECYELF&12FP1RC&17F9LE8&P29J1Z&19IF3L2&AS09Z5&DHIG3C&EZJOER&13HZV70&1Y0F1JC&7UNIX3&SXHPTZ&K2YF13&11KMHHF&ZT36EV&Z44N8N&1QZW1DM&O16D0M&CW2QNS&1FH6TF2&ZWDLTF&1X87ICA&6LRWIZ&ME66AT&1SR9GT&1YH9ZQP&HHC8F2&1DB0VYO&FKOBET&1MJ8I38&JLAULY&1CH0G0Z&1TVRXYJ&SPNXDO&1JYOJGK&1LO9VOK&11TND7U&1YWNKYV&1DXWRM&TK6KOI&154ANPU&RWT5PA&19HGOKC&1YUJVCR&VFG0H0&172UQH&WFFZOK&1G8KK9P&Z4U2ZW&9UOM25&CBEUA3&1BURRUK&34VP40&CT8SCX&C5EGO8&XBSA9O&LL4E3N&1G5530W&R7QR2I&11ZITTG&1OIUGH1&ZN50OK&19R3ZDC&68ZZJF&413IE5&P0AYR7&1SMIEQU&1I34GN7&1GCT1EE&165FEOI&1NN6TMC&1FGT66H&1CP9Y2C&1R3WFPP&16Z97O3&1HGGWC2&AL9WFH&JXOSA2&QUXERX&NU7E4G&3HPVD3&16NVKFB&1JO5LOD&PIJWGC&1HD0KL3&A5KQ0E&UVG8ZT&156786I&1EGYRX&931PJP&71A44J&K4T5RR&YJS0J6&6NKXDV&15LGDNT&DK4XFH:13679:15)327 at renderWithHooks (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:78801:18)328 at updateFunctionComponent (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:80490:19)329 at beginWork (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:81500:13)330 at performUnitOfWork (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:85175:11)331 at workLoop (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:85215:22)332 at renderRoot (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:85298:5)333 at performWorkOnRoot (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:86205:5)334 at performWork (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:86117:5)`335 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)336})337/**338 * E.g.339 *340 * ```341 * const MyComponent$9 = React.forwardRef(function MyComponent$9() {342 * return <div css={{ color: 'red' }} />343 * })344 * ```345 */346describe('React.forwardRef with named function', () => {347 // forwardRef only changes the stack trace for SSR348 test('SSR', () => {349 const stackTrace = `Error350 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)351 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)352 at Object.MyComponent$9 [as render] (webpack-internal:///./pages/index.js:31:80)353 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3535:44)354 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)355 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)356 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)357 at Object.defaultGetInitialProps (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:301:51)358 at Function.getInitialProps (webpack-internal:///../../node_modules/next/dist/pages/_document.js:187:16)359 at Object.loadGetInitialProps (C:/Projects/OSS/emotion/node_modules/next/dist/shared/lib/utils.js:69:29)`360 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)361 })362})363/**364 * E.g. (put an @ in front of jsxImportSource if doing this for real)365 *366 * ```367 * // jsxImportSource theme-ui368 *369 * function MyComponent$9() {370 * return <div sx={{ color: 'red' }} />371 * }372 * ```373 *374 * See https://theme-ui.com/sx-prop.375 */376describe('multiple jsx factories', () => {377 test('Chrome', () => {378 const stackTrace = `Error379 at createEmotionProps (emotion-element-db00a197.browser.esm.js:78)380 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:14)381 at jsxDEV (theme-ui-core-jsx-dev-runtime.esm.js:7)382 at MyComponent$9 (App.js:6)383 at renderWithHooks (react-dom.development.js:14803)384 at mountIndeterminateComponent (react-dom.development.js:17482)385 at beginWork (react-dom.development.js:18596)386 at beginWork$1 (react-dom.development.js:23179)`387 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)388 })389 test('Firefox', () => {390 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:771:40391jsxDEV@http://localhost:3000/static/js/main.chunk.js:942:247392jsxDEV@http://localhost:3000/static/js/vendors~main.chunk.js:3998:87393MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2094:86394renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:21501:31395mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:24113:17396beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:25191:20397beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:29733:18`398 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)399 })400 test('Safari', () => {401 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:866:49402jsxDEV@http://localhost:3000/static/js/main.chunk.js:1147:247403MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2277:86404renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:19627:31405mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:22239:32406beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:27859:27`407 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)408 })409 test('SSR', () => {410 const stackTrace = `Error411 at Object.createEmotionProps (C:/Projects/OSS/emotion/packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)412 at Object.jsxDEV (C:/Projects/OSS/emotion/packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)413 at jsxDEV (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/@theme-ui/core/jsx-dev-runtime/dist/theme-ui-core-jsx-dev-runtime.cjs.dev.js:15:24)414 at MyComponent$9 (webpack-internal:///./pages/index.js:64:79)415 at processChild (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)416 at resolve (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)417 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)418 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)419 at Object.renderToString (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)420 at Object.renderPage (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/next/dist/server/render.js:621:45)`421 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)422 })423 // From https://github.com/emotion-js/emotion/pull/1714#discussion_r365518850424 test('dollar signs in jsx', () => {425 const stackTrace = `jsx@http://localhost:3000/_next/static/development/pages/theme_ui.js?ts=1578745166666:440:17426jsx$$1@http://localhost:3000/_next/static/development/pages/theme_ui.js?ts=1578745166666:2777:60427MyComponent$9@http://localhost:3000/_next/static/development/pages/theme_ui.js?ts=1578745166666:23:62428renderWithHooks@http://localhost:3000/_next/static/development/dll/dll_d6a88dbe3071bd165157.js?ts=1578745166666:16511:27429mountIndeterminateComponent@http://localhost:3000/_next/static/development/dll/dll_d6a88dbe3071bd165157.js?ts=1578745166666:19045:13`430 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)431 })432})433/**434 * E.g.435 *436 * ```437 * class MyComponent$9 extends React.Component {438 * render() {439 * return <div css={{ color: 'red' }} />440 * }441 * }442 * ```443 */444describe('class component', () => {445 test('Chrome', () => {446 const stackTrace = `Error447 at createEmotionProps (emotion-element-6352414e.browser.esm.js:142)448 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:18)449 at MyComponent$9.render (App.js:6)450 at finishClassComponent (react-dom.development.js:17163)451 at updateClassComponent (react-dom.development.js:17110)452 at beginWork (react-dom.development.js:18620)453 at beginWork$1 (react-dom.development.js:23179)`454 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()455 })456 test('Firefox', () => {457 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:40458jsxDEV@http://localhost:3000/static/js/main.chunk.js:1125:247459render@http://localhost:3000/static/js/main.chunk.js:2276:89460finishClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:23777:22461updateClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:23727:48462beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:25187:20463beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:29705:18`464 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()465 })466 test('Safari', () => {467 // render does not appear in the stack trace468 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:866:49469jsxDEV@http://localhost:3000/static/js/main.chunk.js:1147:247470finishClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21453:41471updateClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21406:48472beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:27384:27`473 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()474 })475 test('SSR', () => {476 const stackTrace = `Error477 at Object.createEmotionProps (C:/Projects/OSS/emotion/packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)478 at Object.jsxDEV (C:/Projects/OSS/emotion/packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)479 at jsxDEV (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/@theme-ui/core/jsx-dev-runtime/dist/theme-ui-core-jsx-dev-runtime.cjs.dev.js:15:24)480 at MyComponent$9.render (webpack-internal:///./pages/index.js:40:76)481 at processChild (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3134:18)482 at resolve (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)483 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)484 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)485 at Object.renderToString (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)486 at Object.renderPage (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/next/dist/server/render.js:621:45)`487 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()488 })489})490/**491 * E.g.492 *493 * ```494 * import React from 'react'495 *496 * var __extends =497 * (this && this.__extends) ||498 * (function () {499 * var extendStatics = function (d, b) {500 * extendStatics =501 * Object.setPrototypeOf ||502 * ({ __proto__: [] } instanceof Array &&503 * function (d, b) {504 * d.__proto__ = b505 * }) ||506 * function (d, b) {507 * for (var p in b)508 * if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]509 * }510 * return extendStatics(d, b)511 * }512 * return function (d, b) {513 * extendStatics(d, b)514 * function __() {515 * this.constructor = d516 * }517 * d.prototype =518 * b === null ? Object.create(b) : ((__.prototype = b.prototype), new __())519 * }520 * })()521 *522 * export const MyComponent$9 = (function (_super) {523 * __extends(MyComponent$9, _super)524 * function MyComponent$9() {525 * var _this = (_super !== null && _super.apply(this, arguments)) || this526 * return _this527 * }528 * MyComponent$9.prototype.render = function () {529 * // Defining a variable to prevent Proper Tail Call530 * const el = <div css={{ color: 'red' }} />531 * return el532 * }533 * return MyComponent$9534 * })(React.PureComponent)535 * ```536 */537describe('class component transpiled to ES 5', () => {538 test('Chrome', () => {539 const stackTrace = `Error540 at createEmotionProps (emotion-element-10a9af6f.browser.esm.js?d0a2:168)541 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js?cf67:18)542 at MyComponent$9.render (MyComponent9.js?2fbf:37)543 at finishClassComponent (react-dom.development.js?3c4a:17160)544 at updateClassComponent (react-dom.development.js?3c4a:17110)545 at beginWork (react-dom.development.js?3c4a:18620)546 at beginWork$1 (react-dom.development.js?3c4a:23179)547 at performUnitOfWork (react-dom.development.js?3c4a:22154)548 at workLoopSync (react-dom.development.js?3c4a:22130)549 at performSyncWorkOnRoot (react-dom.development.js?3c4a:21756)`550 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()551 })552 test('Firefox', () => {553 const stackTrace = `createEmotionProps@webpack-internal:///../../packages/react/dist/emotion-element-10a9af6f.browser.esm.js:189:42554jsxDEV@webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js:35:230555MyComponent$9</MyComponent$9.prototype.render@webpack-internal:///./pages/MyComponent9.js:62:82556finishClassComponent@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17163:18557updateClassComponent@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17110:44558beginWork@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:18620:16559beginWork$1@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:23179:14560performUnitOfWork@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:22154:12561workLoopSync@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:22130:22`562 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()563 })564 test('Safari', () => {565 // No idea why the function name is just blank in this stack trace566 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:973:49567jsxDEV@http://localhost:3000/static/js/main.chunk.js:1609:247568@http://localhost:3000/static/js/main.chunk.js:2926:93569finishClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21433:41570updateClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21386:48571beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:27364:27572performUnitOfWork@http://localhost:3000/static/js/vendors~main.chunk.js:26352:27573workLoopSync@http://localhost:3000/static/js/vendors~main.chunk.js:26328:43574performSyncWorkOnRoot@http://localhost:3000/static/js/vendors~main.chunk.js:25946:25`575 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()576 })577 test('SSR', () => {578 const stackTrace = `Error579 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-491a37fd.cjs.dev.js:201:42)580 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)581 at MyComponent$9.render (webpack-internal:///./pages/MyComponent9.js:60:82)582 at processChild (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3134:18)583 at resolve (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)584 at ReactDOMServerRenderer.render (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)585 at ReactDOMServerRenderer.read (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)586 at Object.renderToString (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)587 at Object.renderPage (/Users/sammagura/Documents/emotion/node_modules/next/dist/server/render.js:621:45)588 at Object.defaultGetInitialProps (/Users/sammagura/Documents/emotion/node_modules/next/dist/server/render.js:301:51)`589 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()590 })591})592/**593 * https://github.com/emotion-js/emotion/issues/2614594 *595 * Not sure how to reproduce this other than this repro project:596 * https://github.com/srmagura/emotion-issue-2614597 */598describe('issue #2614 - class component transpiled to ES 5', () => {599 test('Chrome', () => {600 const stackTrace = `Error601 at createEmotionProps (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js:183)602 at Module.jsx (webpack-internal:///./node_modules/@emotion/react/dist/emotion-react.browser.esm.js:127)603 at Loader.render (webpack-internal:///./node_modules/react-spinners/ScaleLoader.js:56)604 at finishClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17485)605 at updateClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17435)606 at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19073)607 at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23935)608 at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22771)609 at workLoopSync (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22702)610 at renderRootSync (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22665)`611 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()612 })613 test('Firefox', () => {614 const stackTrace = `createEmotionProps@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js:183:40615jsx@webpack-internal:///./node_modules/@emotion/react/dist/emotion-react.browser.esm.js:127:105616Loader.prototype.render@webpack-internal:///./node_modules/react-spinners/ScaleLoader.js:56:35617finishClassComponent@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17485:31618updateClassComponent@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17435:44619beginWork@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19073:16620beginWork$1@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23935:14621performUnitOfWork@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22771:12622workLoopSync@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22702:22`623 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()624 })625 test('Safari', () => {626 // No idea why the function name is blank and there are no file locations627 const stackTrace = `createEmotionProps@628jsx@629@630finishClassComponent@631updateClassComponent@632beginWork$1@633performUnitOfWork@634workLoopSync@635renderRootSync@636performSyncWorkOnRoot@637scheduleUpdateOnFiber@638updateContainer@`639 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()640 })641 // No SSR stack trace since this comes from a Gatsby project...
App.js
Source:App.js
1import React, { Component } from 'react';2import './App.css';3class App extends Component {4 constructor(props) {5 super(props);6 this.state = {7 recipes: [8 {9 id: 0,10 title: "Spaghetti",11 instructions: "Open jar of Spaghetti sauce. Bring to simmer. Boil water. Cook pasta until done. Combine pasta and sauce",12 ingredients: ["pasta", "8 cups water", "1 box spaghetti"],13 img: "spaghetti.jpg"14 },15 {16 id: 1,17 title: "Milkshake",18 instructions: "Combine ice cream and milk. Blend until creamy",19 ingredients: ["2 Scoops Ice cream", "8 ounces milk"],20 img: "milkshake.jpg"21 },22 {23 id: 2,24 title: "Avocado Toast",25 instructions: "Toast bread. Slice avocado and spread on bread. Add salt, oil, and pepper to taste.",26 ingredients: ["2 slices of bread", "1 avocado", "1 tablespoon olive oil", "1 pinch of salt", "pepper"],27 img: "avocado_toast.jpg"28 }29 ],30 nextRecipeId: 3,31 }32 this.handleSave = this.handleSave.bind(this);33 }34 handleSave(recipe) {35 this.setState((prevState, props) => {36 const newRecipe = { ...recipe, id: this.state.nextRecipeId };37 return {38 nextRecipeId: prevState.nextRecipeId + 1,39 recipes: [...this.state.recipes, newRecipe],40 }41 });42 }43 // EXERCISE 1 : Form component is where user enter recipe's data. Its initial state is empty 44 // string for title, instructions, img and an empty array for ingredients45 // it has onSubmit event, onClick event, and several onChange events with associated function calls46 // onSubmit event triggers a onSave call (passed as prop from App component) and state is updated.47 // onClick event reset the form.48 // onChange event set the state to the values entered by the user as new recipe.49 // onSave passed from App component through the props is linked to this.handleSave in the App component50 // By submitting the form, onSave function call allows App component, parent of Form, to acquire the new51 // recipe values and add it to its state.recipes array. The event happens in Form component, but it 52 // is being implemented in App component. Remember data travels down the tree only, not upstream or between53 // siblings. In order for the new recipe to be listed, the new recipe values must pass to List54 // component. It cannot happen directly. So, Form "communicate" the new recipe values to App through onSave call55 // then App component passes its new state (with the new recipe) downstream as prop to List component56 // ** HOW DO YOU PASS AS PROP this.handleSave in App component to onSave in FORM COMPONENT?57 // EXERCISE 2 : this.state.recipes contains the data you do want to pass to List component.58 //in the List component you can access it through props.recipes59 // in the List component you generate a JSX element by using map method on recipes object60 render() {61 return (62 <div className="App">63 <h1>My Recipes</h1>64 <Form /> {/*Modify it here EXERCISE 1 */}65 <hr />66 <List /> {/*Modify it here EXERCISE 2 */}67 </div>68 );69 }70}71 {/*go to line 187 for EXERCISE 3 */}72function List(props) {73 //try <Recipe key={recipe.id} {...recipe} /> //spread operator instead of 74 // passing one-by-one property75 //In return statement you wrap Recipe JSX component with div class 'recipe-list'76 const recipesJSX = props.recipes.map((recipe, index) => (77 <Recipe key={recipe.id} title={recipe.title} img={recipe.img}78 instructions={recipe.instructions} id={recipe.id}79 ingredients={recipe.ingredients} />80 ));81 return (82 <div className="recipe-list">83 {recipesJSX}84 </div>85 );86}87function Recipe(props) {88 const { title, img, instructions, id } = props; // destructuring the props 89 // wrapping each ingredient with li HTML elements and returning them90 // with an implicit return inside an arrow function.91 // note that the unique key is the index, which is not optimal92 const ingredientsJSX = props.ingredients.map((ing, index) => (93 <li key={index}>{ing}</li>94 ));95 return (96 <div className="recipe-card">97 <div className="recipe-card-img">98 <img src={img} alt={title} />99 </div>100 <div className="recipe-card-content">101 <h3 className="recipe-title">{title}</h3>102 <h4>Ingredients:</h4>103 <ul>104 {ingredientsJSX}105 </ul>106 <h4>Instructions:</h4>107 <p>{instructions}</p>108 <button type="button" onClick={() => alert(`Are you sure to DELETE recipe number ${id + 1}?`)}>DELETE</button>109 </div>110 </div>111 );112}113class Form extends Component {114 115 constructor(props) {116 super(props);117 this.state = {118 title: '',119 instructions: "",120 ingredients: [''],121 img: ''122 };123 124 //this.handleChange = this.handleChange.bind(this);125 this.handleNewIngredient = this.handleNewIngredient.bind(this);126 this.handleChangeIng = this.handleChangeIng.bind(this);127 this.handleSubmit = this.handleSubmit.bind(this);128 }129 130 // handleChange(e) {131 // console.log(e.target.value);132 // this.setState({[e.target.name]: e.target.value});133 // }134 // Pay ATTENTION: arrow functions DO NOT HAVE their own "this" : no need to bind135 handleChangeTitle= (e) => {136 console.log(e.target.value);137 this.setState({title: e.target.value})138 }139 handleChangeIns = (e) => {140 console.log(e.target.value);141 this.setState({instructions: e.target.value})142 }143 handleChangeImg = (e) => {144 console.log(e.target.value);145 this.setState({img: e.target.value})146 }147 148 handleNewIngredient(e) {149 const {ingredients} = this.state;150 this.setState({ingredients: [...ingredients, '']});151 }152 153 handleChangeIng(e) {154 const index = Number(e.target.name.split('-')[1]);155 const ingredients = this.state.ingredients.map((ing, i) => (156 i === index ? e.target.value : ing157 ));158 this.setState({ingredients});159 }160 // EXERCISE 3: handleReset call must set state to its initial state as 161 // when the constructor of class Form is called (look above)162 // You should use this.setState( {.....})163 handleReset = (e) => {164 e.preventDefault();165 alert(`Are you sure you want to reset?`)166 {/*Modify it here EXERCISE 3 */}167}168 handleSubmit(e) {169 e.preventDefault();170 this.props.onSave({...this.state});171 this.setState({172 title: '',173 instructions: '',174 ingredients: [''],175 img: ''176 })177 }178 179 render() {180 const {title, instructions, img, ingredients} = this.state;181 let inputs = ingredients.map((ing, i) => (182 <div183 className="recipe-form-line"184 key={`ingredient-${i}`}185 >186 <label>{i+1}.187 <input188 type="text"189 name={`ingredient-${i}`}190 value={ing}191 size={45}192 autoComplete="off"193 placeholder=" Ingredient"194 onChange={this.handleChangeIng} />195 </label>196 </div>197 ));198 199 return (200 <div className="recipe-form-container">201 <form className='recipe-form' onSubmit={this.handleSubmit}>202 <button203 type="button"204 className="close-button"205 onClick={this.handleReset}206 >207 X208 </button>209 <div className='recipe-form-line'>210 <label htmlFor='recipe-title-input'>Title</label>211 <input212 id='recipe-title-input'213 key='title'214 name='title'215 type='text'216 value={title}217 size={42}218 autoComplete="off"219 onChange={this.handleChangeTitle}/>220 </div>221 <label222 htmlFor='recipe-instructions-input'223 style={{marginTop: '5px'}}224 >225 Instructions226 </label>227 <textarea228 key='instructions'229 id='recipe-instructions-input'230 type='Instructions'231 name='instructions'232 rows='8'233 cols='50'234 autoComplete='off'235 value={instructions}236 onChange={this.handleChangeIns}/>237 {inputs}238 <button239 type="button"240 onClick={this.handleNewIngredient}241 className="buttons"242 >243 +244 </button>245 <div className='recipe-form-line'>246 <label htmlFor='recipe-img-input'>Image Url</label>247 <input248 id='recipe-img-input'249 type='text'250 placeholder=''251 name='img'252 value={img}253 size={36}254 autoComplete='off'255 onChange={this.handleChangeImg} />256 </div>257 <button258 type="submit"259 className="buttons"260 style={{alignSelf: 'flex-end', marginRight: 0}}261 >262 SAVE263 </button>264 </form>265 </div>266 )267 }268}269export default App;270/**271 * THIS IS THE ERROR YOU SHOULD RECEIVE WHEN TRYING TO RUN THE APP AS IT IS NOW:272 * It points to line 89: cannot run map on an undefined value: what is the object273 * that map is expecting to execute on??274 * 275 * App.js:89 Uncaught TypeError: Cannot read properties of undefined (reading 'map')276 at List (App.js:89:1)277 at renderWithHooks (react-dom.development.js:14985:1)278 at mountIndeterminateComponent (react-dom.development.js:17811:1)279 at beginWork (react-dom.development.js:19049:1)280 at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)281 at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)282 at invokeGuardedCallback (react-dom.development.js:4056:1)283 at beginWork$1 (react-dom.development.js:23964:1)284 at performUnitOfWork (react-dom.development.js:22776:1)285 at workLoopSync (react-dom.development.js:22707:1)286List @ App.js:89287renderWithHooks @ react-dom.development.js:14985288mountIndeterminateComponent @ react-dom.development.js:17811289beginWork @ react-dom.development.js:19049290callCallback @ react-dom.development.js:3945291invokeGuardedCallbackDev @ react-dom.development.js:3994292invokeGuardedCallback @ react-dom.development.js:4056293beginWork$1 @ react-dom.development.js:23964294performUnitOfWork @ react-dom.development.js:22776295workLoopSync @ react-dom.development.js:22707296renderRootSync @ react-dom.development.js:22670297performSyncWorkOnRoot @ react-dom.development.js:22293298scheduleUpdateOnFiber @ react-dom.development.js:21881299updateContainer @ react-dom.development.js:25482300(anonymous) @ react-dom.development.js:26021301unbatchedUpdates @ react-dom.development.js:22431302legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020303render @ react-dom.development.js:26103304./src/index.js @ index.js:7305options.factory @ react refresh:6306__webpack_require__ @ bootstrap:24307(anonymous) @ startup:7308(anonymous) @ startup:7309react-dom.development.js:20085 The above error occurred in the <List> component:310 at List (http://localhost:3003/static/js/bundle.js:118:28)311 at div312 at App (http://localhost:3003/static/js/bundle.js:28:5)313Consider adding an error boundary to your tree to customize error handling behavior.314Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.315logCapturedError @ react-dom.development.js:20085316update.callback @ react-dom.development.js:20118317callCallback @ react-dom.development.js:12318318commitUpdateQueue @ react-dom.development.js:12339319commitLifeCycles @ react-dom.development.js:20736320commitLayoutEffects @ react-dom.development.js:23426321callCallback @ react-dom.development.js:3945322invokeGuardedCallbackDev @ react-dom.development.js:3994323invokeGuardedCallback @ react-dom.development.js:4056324commitRootImpl @ react-dom.development.js:23151325unstable_runWithPriority @ scheduler.development.js:468326runWithPriority$1 @ react-dom.development.js:11276327commitRoot @ react-dom.development.js:22990328performSyncWorkOnRoot @ react-dom.development.js:22329329scheduleUpdateOnFiber @ react-dom.development.js:21881330updateContainer @ react-dom.development.js:25482331(anonymous) @ react-dom.development.js:26021332unbatchedUpdates @ react-dom.development.js:22431333legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020334render @ react-dom.development.js:26103335./src/index.js @ index.js:7336options.factory @ react refresh:6337__webpack_require__ @ bootstrap:24338(anonymous) @ startup:7339(anonymous) @ startup:7340App.js:89 Uncaught TypeError: Cannot read properties of undefined (reading 'map')341 at List (App.js:89:1)342 at renderWithHooks (react-dom.development.js:14985:1)343 at mountIndeterminateComponent (react-dom.development.js:17811:1)344 at beginWork (react-dom.development.js:19049:1)345 at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)346 at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)347 at invokeGuardedCallback (react-dom.development.js:4056:1)348 at beginWork$1 (react-dom.development.js:23964:1)349 at performUnitOfWork (react-dom.development.js:22776:1)350 at workLoopSync (react-dom.development.js:22707:1)351List @ App.js:89352renderWithHooks @ react-dom.development.js:14985353mountIndeterminateComponent @ react-dom.development.js:17811354beginWork @ react-dom.development.js:19049355callCallback @ react-dom.development.js:3945356invokeGuardedCallbackDev @ react-dom.development.js:3994357invokeGuardedCallback @ react-dom.development.js:4056358beginWork$1 @ react-dom.development.js:23964359performUnitOfWork @ react-dom.development.js:22776360workLoopSync @ react-dom.development.js:22707361renderRootSync @ react-dom.development.js:22670362performSyncWorkOnRoot @ react-dom.development.js:22293363scheduleUpdateOnFiber @ react-dom.development.js:21881364updateContainer @ react-dom.development.js:25482365(anonymous) @ react-dom.development.js:26021366unbatchedUpdates @ react-dom.development.js:22431367legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020368render @ react-dom.development.js:26103369./src/index.js @ index.js:7370options.factory @ react refresh:6371__webpack_require__ @ bootstrap:24372(anonymous) @ startup:7373(anonymous) @ startup:7...
react-filber-beginwork.js
Source:react-filber-beginwork.js
...7 */8export function beginWork(current, workInProgress) {9 switch(workInProgress.tag) {10 case IndeterminateComponent: //å½æ°ç»ä»¶11 return mountIndeterminateComponent(12 current,13 workInProgress,14 workInProgress.type // ç»ä»¶15 )16 default:17 break;18 }19}20/**21 *22 * @param {*} current ä¸ä¸ä¸ªfiber å次æè½½ çæ¶ånull23 * @param {*} workInProgress è¿ä¸æ¬¡æ£å¨æ建ä¸çfiber24 * @param {*} Component //å½åç»ä»¶25 */26function mountIndeterminateComponent(current, workInProgress, Component) {27 // value å°±æ¯ç»ä»¶çè¿åå¼28 let children = renderWithHooks(29 current,30 workInProgress,31 Component32 );33 console.log('children', children);34 window.counter = children;35 workInProgress.tag = FunctionComponent;36 // æ ¹æ®å¿åçæè
说ä¸é¢è¿åçèæDOmï¼æ建Fiberåæ 37 reconcileChildren(current, workInProgress, children);38 return null;39}40/**...
config.js
Source:config.js
1import React from 'react';2import Router, { withRouter } from 'next/router';3import { configure } from '@storybook/react';4import { action } from '@storybook/addon-actions';5const requireComponents = require.context('../components/', true, /stories\.js$/);6function loadStories() {7 requireComponents.keys().forEach(requireComponents);8 // Add any new component folders with stories here, using the patterns defined above9}10/* ********************************************************** */11/* Necessary to mock Next's router */12// https://github.com/zeit/next.js/issues/1827#issuecomment-32372122113const actionWithPromise = () => {14 action('clicked link')();15 // we need to return promise because it is needed by Link.linkClicked16 return new Promise((resolve, reject) => reject());17};18const mockedRouter = {19 push: actionWithPromise,20 replace: actionWithPromise,21 prefetch: () => {},22 route: '/mock-route',23};24Router.router = mockedRouter;25withRouter = Component => props => <Component {...props} router={mockedRouter} />26/*27 Commenting out `withRouter` leads to red screen of death in Storybook with:28 Cannot read property 'route' of undefined29 TypeError: Cannot read property 'route' of undefined30 at OutboundLink (http://localhost:9001/static/preview.bundle.js:51877:81)31 at mountIndeterminateComponent (http://localhost:9001/static/preview.bundle.js:32410:13)32 at beginWork (http://localhost:9001/static/preview.bundle.js:32850:14)33 at performUnitOfWork (http://localhost:9001/static/preview.bundle.js:34893:12)34 at workLoop (http://localhost:9001/static/preview.bundle.js:34932:24)35 at renderRoot (http://localhost:9001/static/preview.bundle.js:34972:7)36 at performWorkOnRoot (http://localhost:9001/static/preview.bundle.js:35590:22)37 at performWork (http://localhost:9001/static/preview.bundle.js:35512:7)38 at performSyncWork (http://localhost:9001/static/preview.bundle.js:35484:3)39 at requestWork (http://localhost:9001/static/preview.bundle.js:35384:5)40*/41/* ********************************************************** */...
beginWork.js
Source:beginWork.js
...11 // ä¸ç¡®å®ç»ä»¶12 case IndeterminateComponent: {13 const elementType = workInProgress.elementType;14 // å è½½åå§ç»ä»¶15 return mountIndeterminateComponent(16 current,17 workInProgress,18 elementType,19 renderExpirationTime,20 );21 }22 // å½æ°ç»ä»¶23 case FunctionComponent: {24 const Component = workInProgress.type;25 const unresolvedProps = workInProgress.pendingProps;26 const resolvedProps =27 workInProgress.elementType === Component28 ? unresolvedProps29 : resolveDefaultProps(Component, unresolvedProps);...
ReactFiberWorkLoop.js
Source:ReactFiberWorkLoop.js
1import { renderWithHooks } from "./ReactFiberHooks";2import { FunctionComponent, HostComponent, IndeterminateComponent } from "./ReactWorkTags";3let workInProgress = null4function mountIndeterminateComponent(current, workInProgress, Component) {5 let children = renderWithHooks(6 current,7 workInProgress,8 Component9 )10 console.log(children);11 workInProgress.tag = FunctionComponent12 reconcileChildren(current, workInProgress, children)13 return workInProgress.child;14}15function beginWork (current, workInProgress) {16 switch (workInProgress.tag) {17 case IndeterminateComponent:18 return mountIndeterminateComponent(19 current,20 workInProgress,21 workInProgress.type // Counter22 );23 default:24 break; 25 }26}27function performUnitOfWork(unitOfWork) {28 debugger29 var current = unitOfWork.alternate;30 return beginWork(current, unitOfWork)31}32function workLoop() {...
mountIndeterminateComponent.js
Source:mountIndeterminateComponent.js
1// ...2function mountIndeterminateComponent(3 _current,4 workInProgress,5 Component,6 renderExpirationTime,7 ) {8 9 /** çç¥åå¤é¶æ®µä»£ç **/ 10 // ...11 12 // valueå°±æ¯æ¸²æåºæ¥çAPPç»ä»¶13 let value;14 15 value = renderWithHooks(16 null,...
ReactFiberBeginWork.js
Source:ReactFiberBeginWork.js
...5 */6function beginWork(current, workInProgress) {7 switch(workInProgress.tag) {8 case IndeterminateComponent: 9 return mountIndeterminateComponent(10 current,11 workInProgress,12 workInProgress.type13 );14 default:15 break;16 }17}18function mountIndeterminateComponent(current, workInProgress,Component) {19 value = renderWithHooks(20 current, 21 workInProgress,22 Component23 )...
Using AI Code Generation
1const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');2const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');3const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');4const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');5const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');6const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');7const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');8const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');9const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');10const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');11const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');12const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');13const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');14const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');15const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');16const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');
Using AI Code Generation
1const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');2const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');3const { chromium } = require('playwright');4(async () => {5 const browser = await chromium.launch();6 const page = await browser.newPage();7 const app = await mountIndeterminateComponent(page, 'test.js');8 await app.evaluate(() => {9 console.log('hello');10 });11 await browser.close();12})();13const { mountIndeterminateComponent } = require('playwright/lib/server/inspector');14const { chromium } = require('playwright');15(async () => {16 const browser = await chromium.launch();17 const page = await browser.newPage();18 const app = await mountIndeterminateComponent(page, 'test.js');19 await app.evaluate(() => {20 console.log('hello');21 });22 await browser.close();23})();
Using AI Code Generation
1const { mountIndeterminateComponent } = require('playwright/lib/server/webkit/wkPage');2const { Page } = require('playwright/lib/server/webkit/wkPage');3const { WKSession } = require('playwright/lib/server/webkit/wkConnection');4const { WKConnection } = require('playwright/lib/server/webkit/wkConnection');5const { WKTransport } = require('playwright/lib/server/webkit/wkTransport');6const { WKBrowser } = require('playwright/lib/server/webkit/wkBrowser');7const { WKBrowserContext } = require('playwright/lib/server/webkit/wkBrowser');8const { WKPage } = require('playwright/lib/server/webkit/wkPage');9const { WKElementHandle } = require('playwright/lib/server/webkit/wkElementHandle');10const { WKFrame } = require('playwright/lib/server/webkit/wkFrame');11const { WKExecutionContext } = require('playwright/lib/server/webkit/wkExecutionContext');12const { WKWorker } = require('playwright/lib/server/webkit/wkWorker');13const { WKBindingCall } = require('playwright/lib/server/webkit/wkBindingCall');14const { WKFileChooser } = require('playwright/lib/server/webkit/wkFileChooser');15const { WKDownload } = require('playwright/lib/server/webkit/wkDownload');16const { WKWebSocket } = require('playwright/lib/server/webkit/wkWebSocket');17const { WKWebSocketTransport } = require('playwright/lib/server/webkit/wkWebSocketTransport');18const { WKSessionPool } = require('playwright/lib/server/webkit/wkBrowser');19const { WKBrowserServer } = require('playwright/lib/server/webkit/wkBrowserServer');20const { WebKit } = require('playwright/lib/server/webkit/webkit');21const { BrowserType } = require('playwright/lib/server/browserType');22const { BrowserContext } = require('playwright/lib/server/browserContext');23const { BrowserServer } = require('playwright/lib/server/browserServer');24const { Browser } = require('playwright/lib/server/browser');25const { Page } = require('playwright/lib/server/page');26const { Frame } = require('playwright/lib/server/frame');27const { Dialog } = require('playwright/lib/server/dialog');28const { Worker } = require('playwright/lib/server/worker');29const { JSHandle } = require('playwright/lib/server/jsHandle');30const {
Using AI Code Generation
1const { mountIndeterminateComponent } = require('playwright/lib/server/webkit/wkPage.js');2const { Page } = require('playwright');3const path = require('path');4async function main() {5 const page = await Page.create();6 const componentPath = path.resolve(__dirname, './component.js');7 const component = await mountIndeterminateComponent(page, componentPath);8 console.log(await component.evaluate((component) => component.test));9}10main();11const component = {12};13module.exports = component;14const { chromium } = require('playwright');15(async () => {16 const browser = await chromium.launch();17 const page = await browser.newPage();18 await page.screenshot({ path: 'example.png' });19 await browser.close();20})();21const { chromium } = require('playwright');22(async () => {23 const browser = await chromium.launch({ headless: false });24 const page = await browser.newPage();25 await page.screenshot({ path: 'example.png' });26 await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30 const browser = await chromium.launch({ headless: false, slowMo: 1000 });31 const page = await browser.newPage();32 await page.screenshot({ path: 'example.png' });33 await browser.close();34})();35const { chromium } = require('playwright');36(async () => {37 const browser = await chromium.launch({38 proxy: {
Using AI Code Generation
1const { mountIndeterminateComponent } = require('playwright/lib/server/inspector/inspector.js');2const { default: React } = require('react');3const { render } = require('react-dom');4const { default: App } = require('./App.js');5const app = mountIndeterminateComponent(render, React.createElement(App));6app.waitForSelector('text=Hello');7const { default: React } = require('react');8const { default: ReactDOM } = require('react-dom');9const { default: Child } = require('./Child.js');10const App = () => {11 const [text, setText] = React.useState('Hello');12 return (13 <Child text={text} />14 <button onClick={() => setText('World')}>Change Text</button>15 );16};17module.exports = App;18const { default: React } = require('react');19const Child = ({ text }) => {20 return <div>{text}</div>;21};22module.exports = Child;23 4 | app.waitForSelector('text=Hello');24> 6 | test('Hello World', async ({ page }) => {25 8 | await page.waitForSelector('text=Hello');26 9 | });27 at Object.<anonymous> (test.js:6:6)28const { mountIndeterminateComponent } = require('playwright/lib/server/inspector/inspector.js');29const { default: React } = require('react');30const { render } = require('react-dom');
Using AI Code Generation
1const { mountIndeterminateComponent } = require('@playwright/test/lib/server/kit');2const { test } = require('@playwright/test');3test('test', async ({ page }) => {4 const { component, waitForEvent } = await mountIndeterminateComponent(page, 'my-component');5 await waitForEvent('my-event');6 await component.evaluate(() => component.doSomething());7});8const { mountIndeterminateComponent } = require('@playwright/test/lib/server/kit');9const { test } = require('@playwright/test');10test('test', async ({ page }) => {11 const { component, waitForEvent } = await mountIndeterminateComponent(page, 'my-component');12 await waitForEvent('my-event');13 await component.evaluate(() => component.doSomething());14});15const { mountIndeterminateComponent } = require('@playwright/test/lib/server/kit');16const { test } = require('@playwright/test');17test('test', async ({ page }) => {18 const { component, waitForEvent } = await mountIndeterminateComponent(page, 'my-component');19 await waitForEvent('my-event');20 await component.evaluate(() => component.doSomething());21});22const { mountIndeterminateComponent } = require('@playwright/test/lib/server/kit');23const { test } = require('@playwright/test');24test('test', async ({ page }) => {25 const { component, waitForEvent } = await mountIndeterminateComponent(page, 'my-component');26 await waitForEvent('my-event');27 await component.evaluate(() => component.doSomething());28});29const { mountIndeterminateComponent } = require('@playwright/test/lib/server/kit');30const { test } = require('@playwright/test');31test('test', async ({ page }) => {32 const { component, waitForEvent } = await mountIndeterminateComponent(page, 'my-component');33 await waitForEvent('my-event');34 await component.evaluate(() => component.doSomething());35});
Using AI Code Generation
1const { mountIndeterminateComponent } = require('playwright/lib/server/webkit/wkPage');2const { Page } = require('playwright');3const { React } = require('playwright/lib/server/webkit/wkPage');4const { ReactTestRenderer } = require('playwright/lib/server/webkit/wkPage');5const { ReactTestComponent } = require('playwright/lib/server/webkit/wkPage');6const page = await browser.newPage();7const component = React.createElement('div', { id: 'test' }, 'Test');8const componentHandle = await mountIndeterminateComponent(page, component);9const element = await componentHandle.$('#test');10const text = await element.innerText();11expect(text).toBe('Test');12await componentHandle.unmount();13const componentHandle1 = await mountIndeterminateComponent(page, component);14expect(componentHandle1).toBeNull();15await componentHandle.unmount();16const componentHandle2 = await mountIndeterminateComponent(page, component);17expect(componentHandle2).toBeNull();
Using AI Code Generation
1import { mountIndeterminateComponent, unmountComponentAtNode, renderToString, renderToStaticMarkup } from '@playwright/test';2const wrapper = mountIndeterminateComponent(<MyComponent />);3unmountComponentAtNode(wrapper);4const html = renderToString(<MyComponent />);5const html = renderToStaticMarkup(<MyComponent />);6 ✓ should work (1s)7 ✓ should work for a second test (1s)8 ✓ should work for a third test (1s)9 ✓ should work for a fourth test (1s)10 ✓ should work for a fifth test (1s)11 5 passed (4s)12 ✓ should work for a fourth test (1s)13 1 passed (1s)
Using AI Code Generation
1const { mountIndeterminateComponent } = require('playwright/lib/server/dom');2const { React } = require('playwright/lib/server/dom/react');3const { createElement } = require('playwright/lib/server/dom/react');4const { render } = require('playwright/lib/server/dom/react');5const { Component } = require('playwright/lib/server/dom/react');6const { useState } = require('playwright/lib/server/dom/react');7class Test extends Component {8 constructor(props) {9 super(props);10 this.state = {11 };12 }13 render() {14 return createElement('div', {}, this.state.count);15 }16}17const component = render(createElement(Test), document.body);18mountIndeterminateComponent(component);19const { test } = require('@playwright/test');20const { expect } = require('@playwright/test');21test('should mount', async ({ page }) => {22 const text = await page.textContent('div');23 expect(text).toBe('0');24});25FAIL test.spec.js (9.1s)26 5: test('should mount', async ({ page }) => {27 7: const text = await page.textContent('div');28 Timeout of 5000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (/Users/username/Documents/Projects/Playwright/test.spec.js)29 at Object.<anonymous> (/Users/username/Documents/Projects/Playwright/test.spec.js:6:5)
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:
- 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.
- 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.
- 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.
- 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.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
