{"id":169,"date":"2021-11-27T21:24:00","date_gmt":"2021-11-27T21:24:00","guid":{"rendered":"http:\/\/frontendguruji.com\/?p=169"},"modified":"2022-01-02T11:03:05","modified_gmt":"2022-01-02T11:03:05","slug":"error-typeerror-parentinstance-children-indexof-is-not-a-function-react-testing-library","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/error-typeerror-parentinstance-children-indexof-is-not-a-function-react-testing-library\/","title":{"rendered":"ERROR TypeError: parentInstance.children.indexOf is not a function \u2013 React Testing Library"},"content":{"rendered":"\n<p>Hello friends &#x1f64f;, today someone came to me with this issue, it was a React v16 project and facing issue while trying to match the snapshots using <strong>React Testing Library<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>TypeError: parentInstance.children.indexOf is not a function\n<\/code><\/pre>\n\n\n\n<p>This error was pointing to<strong> .create<\/strong> method of the renderer:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import renderer from 'react-test-renderer';\n.\n.\n.\nconst component = renderer<strong>.create<\/strong>(&lt;MyComponent\/&gt;);\nexpect(component).toMatchSnapshot();<\/code><\/pre>\n\n\n\n<p>So after bit some research &#x1f50d;&#x1f605;, found that error is happening due to some compatibility issues with the react-test-renderer and  createPortal  of React.<\/p>\n\n\n\n<p>Basically issue is using <strong>react-test-renderer <\/strong>to create a snapshot of a component, which contain React <strong>createPortal <\/strong>function. <em><strong>ReactDOM.createPortal<\/strong><\/em>&nbsp;is not supported inside a React TestRenderer tree. <br>Another renderer can\u2019t be used in addition to the test renderer.<\/p>\n\n\n\n<p>And in our scenario &lt;MyComponent\/&gt; is using React createPortal method and in this case <strong>parentInstance.children<\/strong> is an <strong>instance of HTMLCollection<\/strong>, but <strong>test-renderer expects<\/strong> an <strong>array of Instance type<\/strong>.<\/p>\n\n\n\n<p>And after doing some research again &#x1f50d;&#x1f605;, found that as a workaround we can use <strong>toJson<\/strong> method from <strong>enzyme-to-json<\/strong> to match the snapshot.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\nimport renderer from 'react-test-renderer';\nimport toJson from 'enzyme-to-json';\n.\n.\n.\nconst component = <strong>toJson<\/strong>(renderer.create(&lt;MyComponent\/&gt;));\nexpect(component).toMatchSnapshot();\n\n<\/code><\/pre>\n\n\n\n<p>Do you know anyother way to resolve this issue, feel free to comment.<\/p>\n\n\n\n<p>Thanks &#x1f64f;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello friends &#x1f64f;, today someone came to me with this issue, it was a React v16 project and facing issue while trying to match the snapshots using React Testing Library. This error was pointing to .create method of the renderer: So after bit some research &#x1f50d;&#x1f605;, found that error is happening due to some compatibility &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/frontendguruji.com\/blog\/error-typeerror-parentinstance-children-indexof-is-not-a-function-react-testing-library\/\"> <span class=\"screen-reader-text\">ERROR TypeError: parentInstance.children.indexOf is not a function \u2013 React Testing Library<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[30],"tags":[12,31,13,39,32,40],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/169"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":0,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}