Testcafe-react-selector throws react version error

[vvedachalam]

I am getting the below error when I use react-selector in my project:

Error: { type: 'uncaughtErrorInClientFunctionCode', isTestCafeError: true, callsite: CallsiteRecord { filename: 'C:\_git\Proj\fold\app\features\step_definitions\mif.js', lineNum: 19, callsiteFrameIdx: 5, stackFrames: [ CallSite {}, CallSite {}, CallSite {}, CallSite {}, CallSite {}, CallSite {} ], isV8Frames: true }, errMsg: 'Error: testcafe-react-selectors supports React version 15.x and newer', instantiationCallsiteName: 'with' }

I am using react version 15.5.4.

[kirovboris]

Hi @vvedachalam,

Unfortunately, I can't reproduce this issue. The following details could help us to find the problem:

• testcafe version
• browser version
• test code
• link to your website or minimal working example

[leegee]

Error: testcafe-react-selectors supports React version 15.x and newer

yarn list react ...react@15.6.2

Latest Testcafe with headless Chrome, code came straight from the example page at testcafe website.

Sorry about the fomatting on this, but here's the output of document.querySelectorAll('[data-reactroot]');

NodeList [div]0: divaccessKey: ""align: ""assignedSlot: nullattributes: NamedNodeMap {0: data-reactroot, 1: style, data-reactroot: data-reactroot, style: style, length: 2}baseURI: "http://localhost:8080/front-page"childElementCount: 1childNodes: NodeList(3) [div._1NrNHKdQRF3i8Oc-Minika, comment, comment]children: HTMLCollection [div._1NrNHKdQRF3i8Oc-Minika]classList: DOMTokenList [value: ""]className: ""clientHeight: 930clientLeft: 0clientTop: 0clientWidth: 708contentEditable: "inherit"dataset: DOMStringMap {reactroot: ""}dir: ""draggable: falsefirstChild: div._1NrNHKdQRF3i8Oc-MinikafirstElementChild: div._1NrNHKdQRF3i8Oc-Minikahidden: falseid: ""innerHTML: "<div class="_1NrNHKdQRF3i8Oc-Minika"><header class="_3QVrYmqHN973Az1l5Bo9N_ "><div class="_2lRModUQYyigRDi0NKHcL _1pvzx9so53enryo-fNG3ze"></div><h1 class="_3gbymSmN74QT5CHbyH80dg">Weekly Sales Stock &amp; Intake</h1><div class="_1-BHV_5XkuJvpUpRAJN8FB"><div class="_2ts9DLzqXwO6iGdYSR7R3O"><div class="_1uiHOv7QUptpMTCsEtmTTj _2w0AioJyvUPgUDjEftktNc"></div><div class="_1d5fLHKEHu7bgL3IuPBsDJ">xxxx IN-LINE</div><div class="_1JHtRV2iB7enpah6TA6Xfx _2w0AioJyvUPgUDjEftktNc"></div><div>bart.nowak@xxxx.com</div></div><div class="_1vUQRlqFY1qSJH_8CGFQk_ _1pFnym7YZtEvKJnaOwRwyr"><div class="_1FOPwjXh39RK_gPGS5e29Q _16yJihPRRgFVUB2ofje9Jm"></div><span class="_1E2fCbGydgkRlXRLLQ9i9V" style="visibility: visible;"><!-- react-text: 22 -->29<!-- /react-text --><span style="visibility: hidden;">:</span><!-- react-text: 24 -->47<!-- /react-text --></span></div><div class="_29MwR_hVdSoFG7POAOpisp">master:3eae7e6</div><button id="defaultButton" data-test-id="defaultButton" class="_1J9CYna19Kw9w0EKMpeSXp _27KXAlisCcqeZjiKLaf7sw _3PyoRNnDo3iThbgnGRXiti"><div class="_2cFvm2pZXvjSyJNReDLuCQ "></div></button><button id="defaultButton" data-test-id="defaultButton" class="_1J9CYna19Kw9w0EKMpeSXp _27KXAlisCcqeZjiKLaf7sw"><div class="_2kJ0_heo9Iipf7O7FU4Aab "></div></button></div></header><div class="_3oX8GOOPm25Pl1h6GrCa4Z "><div class="_17VYxoLhEBl4DMAK60LDcw _3LZX0Ecpql-aT3XG48CQ27"><label for="ry">Retail Year</label><select name="ry" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>RY16</option><option>RY17</option><option>RY18</option><option>RY19</option><option>RY20</option></select></div><div class="_17VYxoLhEBl4DMAK60LDcw _3LZX0Ecpql-aT3XG48CQ27"><label for="channel">Channel</label><select name="channel" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>TOTAL CO</option><option>TOTAL CO EX ID</option><option>TOTAL STORES</option><option>xxxx STORES OWN</option><option>xxxx STORES PARTNER</option><option>TOTAL DIGITAL</option><option>DIGITAL</option><option>DIGITAL ID</option></select></div><div><label for="mmg1">Merchandise Hierarchy</label><div class="_1rFGkg_iuecrYAqliEWNuG"><div class="_17VYxoLhEBl4DMAK60LDcw _11viZi9XhNyIuB61AlyBW9"><label for="mmg1">Category</label><select name="mmg1" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>ALL</option><option>ACTION SPORTS</option><option>ALL DIVISIONS</option><option>ALL OTHER</option><option>APPAREL</option><option>ATHLETIC TRAINING</option><option>BADGE CREATION</option><option>BASEBALL OTH FIELD SPORTS</option><option>BASKETBALL</option><option>BASKETBALL JORDAN</option><option>BIG LACES</option><option>CHELSEA FC MERCH LTD</option><option>CONVERSE</option><option>DIGITAL SPORT</option><option>EQUIPMENT</option><option>FCBM</option><option>FOOTBALL/SOCCER</option><option>FOOTWEAR</option><option>FUEL BAND</option><option>FUELBAND</option><option>GOLF</option><option>HADDAD</option><option>HURLEY</option><option>ITEM NOT ON FILE</option><option>JR286</option><option>MARCHON</option><option>NFL</option><option>xxxx SB</option><option>xxxx SPORTSWEAR MENS</option><option>xxxx SPORTSWEAR WMNS</option><option>xxxxID</option><option>OTHER</option><option>POLAR ELECTRO EUROPE BV</option><option>ROPES LACES</option><option>RUGBY</option><option>RUNNING MENS</option><option>RUNNING WMNS</option><option>TENNIS</option><option>TOMTOM BELGIUM NV</option><option>UNCATEGORIZED</option><option>WOMEN TRAINING</option><option>YOUNG ATHLETES</option></select></div><div class="_17VYxoLhEBl4DMAK60LDcw _11viZi9XhNyIuB61AlyBW9"><label for="mmg2">Gender</label><select name="mmg2" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>ALL</option><option>KIDS</option><option>MENS</option><option>UNCATEGORIZED</option><option>UNISEX</option><option>WOMENS</option></select></div><div class="_17VYxoLhEBl4DMAK60LDcw _11viZi9XhNyIuB61AlyBW9"><label for="mmg3">Division</label><select name="mmg3" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>ALL</option><option>APPAREL</option><option>EQUIPMENT</option><option>FOOTWEAR</option></select></div></div></div><button id="processHierachy" data-test-id="processHierachy" class="_34BdWjJV67vymrQGyfW_t4 _11viZi9XhNyIuB61AlyBW9 tRLdBh33UIGIsc0Vl_lDB">Load Data</button></div><!-- react-empty: 120 --></div><!-- react-empty: 7 --><!-- react-empty: 8 -->"innerText: "Weekly Sales Stock & Intake↵xxxx IN-LINE↵bart.nowak@xxxx.com↵2947↵master:3eae7e6↵↵↵Retail Year↵↵Channel↵↵Merchandise Hierarchy↵Category↵↵Gender↵↵Division↵↵LOAD DATA"isConnected: trueisContentEditable: falselang: ""lastChild: commentlastElementChild: div._1NrNHKdQRF3i8Oc-MinikalocalName: "div"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: nullnextSibling: textnodeName: "DIV"nodeType: 1nodeValue: nullnonce: ""offsetHeight: 930offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 708onabort: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullongotpointercapture: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerup: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<div data-reactroot="" style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px;"><div class="_1NrNHKdQRF3i8Oc-Minika"><header class="_3QVrYmqHN973Az1l5Bo9N_ "><div class="_2lRModUQYyigRDi0NKHcL _1pvzx9so53enryo-fNG3ze"></div><h1 class="_3gbymSmN74QT5CHbyH80dg">Weekly Sales Stock &amp; Intake</h1><div class="_1-BHV_5XkuJvpUpRAJN8FB"><div class="_2ts9DLzqXwO6iGdYSR7R3O"><div class="_1uiHOv7QUptpMTCsEtmTTj _2w0AioJyvUPgUDjEftktNc"></div><div class="_1d5fLHKEHu7bgL3IuPBsDJ">xxxx IN-LINE</div><div class="_1JHtRV2iB7enpah6TA6Xfx _2w0AioJyvUPgUDjEftktNc"></div><div>bart.nowak@xxxx.com</div></div><div class="_1vUQRlqFY1qSJH_8CGFQk_ _1pFnym7YZtEvKJnaOwRwyr"><div class="_1FOPwjXh39RK_gPGS5e29Q _16yJihPRRgFVUB2ofje9Jm"></div><span class="_1E2fCbGydgkRlXRLLQ9i9V" style="visibility: visible;"><!-- react-text: 22 -->29<!-- /react-text --><span style="visibility: hidden;">:</span><!-- react-text: 24 -->47<!-- /react-text --></span></div><div class="_29MwR_hVdSoFG7POAOpisp">master:3eae7e6</div><button id="defaultButton" data-test-id="defaultButton" class="_1J9CYna19Kw9w0EKMpeSXp _27KXAlisCcqeZjiKLaf7sw _3PyoRNnDo3iThbgnGRXiti"><div class="_2cFvm2pZXvjSyJNReDLuCQ "></div></button><button id="defaultButton" data-test-id="defaultButton" class="_1J9CYna19Kw9w0EKMpeSXp _27KXAlisCcqeZjiKLaf7sw"><div class="_2kJ0_heo9Iipf7O7FU4Aab "></div></button></div></header><div class="_3oX8GOOPm25Pl1h6GrCa4Z "><div class="_17VYxoLhEBl4DMAK60LDcw _3LZX0Ecpql-aT3XG48CQ27"><label for="ry">Retail Year</label><select name="ry" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>RY16</option><option>RY17</option><option>RY18</option><option>RY19</option><option>RY20</option></select></div><div class="_17VYxoLhEBl4DMAK60LDcw _3LZX0Ecpql-aT3XG48CQ27"><label for="channel">Channel</label><select name="channel" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>TOTAL CO</option><option>TOTAL CO EX ID</option><option>TOTAL STORES</option><option>xxxx STORES OWN</option><option>xxxx STORES PARTNER</option><option>TOTAL DIGITAL</option><option>DIGITAL</option><option>DIGITAL ID</option></select></div><div><label for="mmg1">Merchandise Hierarchy</label><div class="_1rFGkg_iuecrYAqliEWNuG"><div class="_17VYxoLhEBl4DMAK60LDcw _11viZi9XhNyIuB61AlyBW9"><label for="mmg1">Category</label><select name="mmg1" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>ALL</option><option>ACTION SPORTS</option><option>ALL DIVISIONS</option><option>ALL OTHER</option><option>APPAREL</option><option>ATHLETIC TRAINING</option><option>BADGE CREATION</option><option>BASEBALL OTH FIELD SPORTS</option><option>BASKETBALL</option><option>BASKETBALL JORDAN</option><option>BIG LACES</option><option>CHELSEA FC MERCH LTD</option><option>CONVERSE</option><option>DIGITAL SPORT</option><option>EQUIPMENT</option><option>FCBM</option><option>FOOTBALL/SOCCER</option><option>FOOTWEAR</option><option>FUEL BAND</option><option>FUELBAND</option><option>GOLF</option><option>HADDAD</option><option>HURLEY</option><option>ITEM NOT ON FILE</option><option>JR286</option><option>MARCHON</option><option>NFL</option><option>xxxx SB</option><option>xxxx SPORTSWEAR MENS</option><option>xxxx SPORTSWEAR WMNS</option><option>xxxxID</option><option>OTHER</option><option>POLAR ELECTRO EUROPE BV</option><option>ROPES LACES</option><option>RUGBY</option><option>RUNNING MENS</option><option>RUNNING WMNS</option><option>TENNIS</option><option>TOMTOM BELGIUM NV</option><option>UNCATEGORIZED</option><option>WOMEN TRAINING</option><option>YOUNG ATHLETES</option></select></div><div class="_17VYxoLhEBl4DMAK60LDcw _11viZi9XhNyIuB61AlyBW9"><label for="mmg2">Gender</label><select name="mmg2" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>ALL</option><option>KIDS</option><option>MENS</option><option>UNCATEGORIZED</option><option>UNISEX</option><option>WOMENS</option></select></div><div class="_17VYxoLhEBl4DMAK60LDcw _11viZi9XhNyIuB61AlyBW9"><label for="mmg3">Division</label><select name="mmg3" class="_1BPaD6IutfEFuPSm4JSw97"><option disabled="" value="true">Please select</option><option>ALL</option><option>APPAREL</option><option>EQUIPMENT</option><option>FOOTWEAR</option></select></div></div></div><button id="processHierachy" data-test-id="processHierachy" class="_34BdWjJV67vymrQGyfW_t4 _11viZi9XhNyIuB61AlyBW9 tRLdBh33UIGIsc0Vl_lDB">Load Data</button></div><!-- react-empty: 120 --></div><!-- react-empty: 7 --><!-- react-empty: 8 --></div>"outerText: "Weekly Sales Stock & Intake↵xxxx IN-LINE↵bart.nowak@xxxx.com↵2947↵master:3eae7e6↵↵↵Retail Year↵↵Channel↵↵Merchandise Hierarchy↵Category↵↵Gender↵↵Division↵↵LOAD DATA"ownerDocument: documentparentElement: div#rootparentNode: div#rootprefix: nullpreviousElementSibling: nullpreviousSibling: nullscrollHeight: 1020scrollLeft: 0scrollTop: 0scrollWidth: 779shadowRoot: (...)slot: ""spellcheck: truestyle: CSSStyleDeclaration {0: "position", 1: "left", 2: "right", 3: "top", 4: "bottom", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}tabIndex: -1tagName: "DIV"textContent: "Weekly Sales Stock & Intakexxxx IN-LINEbart.nowak@xxxx.com29:47master:3eae7e6Retail YearPlease selectRY16RY17RY18RY19RY20ChannelPlease selectTOTAL COTOTAL CO EX IDTOTAL STORESxxxx STORES OWNxxxx STORES PARTNERTOTAL DIGITALDIGITALDIGITAL IDMerchandise HierarchyCategoryPlease selectALLACTION SPORTSALL DIVISIONSALL OTHERAPPARELATHLETIC TRAININGBADGE CREATIONBASEBALL OTH FIELD SPORTSBASKETBALLBASKETBALL JORDANBIG LACESCHELSEA FC MERCH LTDCONVERSEDIGITAL SPORTEQUIPMENTFCBMFOOTBALL/SOCCERFOOTWEARFUEL BANDFUELBANDGOLFHADDADHURLEYITEM NOT ON FILEJR286MARCHONNFLxxxx SBxxxx SPORTSWEAR MENSxxxx SPORTSWEAR WMNSxxxxIDOTHERPOLAR ELECTRO EUROPE BVROPES LACESRUGBYRUNNING MENSRUNNING WMNSTENNISTOMTOM BELGIUM NVUNCATEGORIZEDWOMEN TRAININGYOUNG ATHLETESGenderPlease selectALLKIDSMENSUNCATEGORIZEDUNISEXWOMENSDivisionPlease selectALLAPPARELEQUIPMENTFOOTWEARLoad Data"title: ""translate: true__reactInternalInstance$4p5b6wwahns: ReactDOMComponent {_currentElement: {…}, _tag: "div", _namespaceURI: "http://www.w3.org/1999/xhtml", _renderedChildren: {…}, _previousStyle: {…}, …}__proto__: HTMLDivElementlength: 1__proto__: NodeList

[kirovboris]

Thank you, @leegee. I'll investigate it.

[leegee]

Please let me know if I can help, this mod looks really useful!

[kirovboris]

@leegee, could you please provide the simplified code of the root component? I see what causes this bug from your example, but i can't reproduce it. Also please check this issue with testcafe-react-selctors@1.0.4.

[leegee]

Not even the simplified, I'm sorry. I can answer specific questions, though, if it helps....

Not my code base, sorry: terms of contract.

[kirovboris]

@leegee, I've just published testcafe-react-selectors@1.0.6. Could you please check if this issue still reproduces?

[leegee]

Thanks, but I'm afraid not — had to switch library :(

[kirovboris]

It was fixed in testcafe-react-selectors@1.0.6, so I close this issue. Please let me know if the problem still occurs.