{"id":2989,"date":"2025-01-07T19:50:23","date_gmt":"2025-01-08T01:50:23","guid":{"rendered":"https:\/\/readme.com\/resources\/?p=2989"},"modified":"2025-01-07T19:50:24","modified_gmt":"2025-01-08T01:50:24","slug":"upgrading-react-to-v16-and-enzyme-to-v3","status":"publish","type":"post","link":"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3","title":{"rendered":"Upgrading React to v16 and Enzyme to v3"},"content":{"rendered":"\n

A couple of weeks ago React v16 was released with some exciting new features including returning arrays from render()<\/code> functions (no more wrapping <divs><\/code>!), better server side rendering and performance improvements. Read more here: https:\/\/reactjs.org\/blog\/2017\/09\/26\/react-v16.0.html<\/a><\/p>\n\n\n\n

We’re not yet using React on the main ReadMe site, but we are on one of our smaller projects which will soon be integrated into main ReadMe (more on this in a later blog post). On this project I decided to give the shiny new React a spin to see if anything needed to change or be refactored.<\/p>\n\n\n\n

Luckily our code worked great (it’s quite a small codebase)! But when it came to running the tests I noticed some weird failures. I didn’t realise at the time that Enzyme would also need to be upgraded (they have a pretty useful migration guide here<\/a>). I’ve documented my small problems in migrating below to hopefully help anyone else who has to go through a similar process.<\/p>\n\n\n\n

New adapter system<\/h2>\n\n\n\n

With Enzyme v3 they’ve cleverly introduced a new adapter system. The purpose of which is so that new (or old) gotchas of different React versions don’t leak into the main Enzyme codebase, but are contained within their own adapter. Here’s the adapter for React 16: https:\/\/www.npmjs.com\/package\/enzyme-adapter-react-16<\/a><\/p>\n\n\n\n

Enzyme now needs to be configured with an adapter when it is require()<\/code>d.<\/p>\n\n\n\n

Before:<\/p>\n\n\n\n

const { shallow, mount } = require('enzyme');\n<\/code><\/pre>\n\n\n\n
After:<\/p>\n\n\n\n
const Adapter = require('enzyme-adapter-react-16');\nconst enzyme = require('enzyme');\nenzyme.configure({ adapter: new Adapter() });\n\nconst { shallow } = enzyme;\n<\/code><\/pre>\n\n\n\n
Slightly more boilerplate, but it gives more flexibility and allows them to make changes easier in future. If the boilerplate annoys you, you can create a helper file which wraps this up:<\/p>\n\n\n\n
const Adapter = require('enzyme-adapter-react-16');\nconst enzyme = require('enzyme');\n\nenzyme.configure({ adapter: new Adapter() });\n\nmodule.exports = enzyme;\n<\/code><\/pre>\n\n\n\n
You can either require this directly, or if you’re using Jest, you can add it to the setupFiles<\/code><\/a> array and leave your code as before.<\/p>\n\n\n\n
instance.hasClass()<\/code> not working<\/h2>\n\n\n\n
Enzyme provides a way to assert whether a class exists or not: http:\/\/airbnb.io\/enzyme\/docs\/api\/ShallowWrapper\/hasClass.html<\/a>. Right now there appears to be a bug in how this is working: https:\/\/github.com\/airbnb\/enzyme\/issues\/1177<\/a> the workaround is to call render() on the instance first to return the cheerio wrapper. This is working but I’ve subscribed to the issue for future updates.<\/p>\n\n\n\n
Before:<\/p>\n\n\n\n
component.hasClass('test');\n<\/code><\/pre>\n\n\n\n
After:<\/p>\n\n\n\n
component.render().hasClass('test');\n<\/code><\/pre>\n\n\n\n
update()<\/code> on mount()<\/code>ed components needs to be manualy called in some cases<\/h2>\n\n\n\n
This change is well documented in the migration guide here<\/a>.<\/p>\n\n\n\n
If you’re making changes by calling instance functions instead of simulating events, you may get bitten by this one.<\/p>\n\n\n\n
Before:<\/p>\n\n\n\n
component.instance().toggle();\nexpect(component.find('.text').text()).toBe('toggled');\n<\/code><\/pre>\n\n\n\n
After:<\/p>\n\n\n\n
component.instance().toggle();\ncomponent.update();\nexpect(component.find('.text').text()).toBe('toggled');\n<\/code><\/pre>\n\n\n\n
component.node<\/code> is now an inaccessible private member<\/h2>\n\n\n\n
Accessing component.node<\/code> previously used to return you with the DOM node, which you could modify freely. For example to modify the value of an input.<\/p>\n\n\n\n
Now on access you will get the following error message:<\/p>\n\n\n\n
Attempted to access ShallowWrapper::node, which was previously a private property on\nEnzyme ShallowWrapper instances, but is no longer and should not be relied upon.\nConsider using the getElement() method instead.\n<\/code><\/pre>\n\n\n\n
Using getElement()<\/code> didn’t work for me, but I found that using instance()<\/code> was suitable for my uses (found from this github issue<\/a>).<\/p>\n\n\n\n
Before:<\/p>\n\n\n\n
component.find('input[type=\"text\"]').node.value = '1234';\n<\/code><\/pre>\n\n\n\n
After:<\/p>\n\n\n\n
component.find('input[type=\"text\"]').instance().value = '1234';\n<\/code><\/pre>\n\n\n\n
React now requires a requestAnimationFrame<\/code> polyfill<\/h2>\n\n\n\n
You may see this in your test or application logs:<\/p>\n\n\n\n
Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http:\/\/fb.me\/react-polyfills\n<\/code><\/pre>\n\n\n\n
I’ve added the raf<\/code><\/a> package to jest’s setupFiles<\/code> to fix this as well. Obviously it depends on your end browser support whether you need to polyfill this in your application or not.<\/p>\n\n\n\n
Bonus: Remember to update everything<\/h2>\n\n\n\n
I came across a few other issues because I forgot to update everything and had some version mismatches between all of the required modules. Be sure to run the following otherwise you’ll get some weird issues:<\/p>\n\n\n\n
npm install react@latest react-dom@latest react-test-renderer@latest enzyme@latest enzyme-adapter-react-16@latest\n<\/code><\/pre>\n\n\n\n
It may also be a good idea to perform the Enzyme update first (using the React 15 Adapter<\/a>), then the React update. It may be more difficult to debug issues if you’re unsure where problems are coming from.<\/p>\n","protected":false},"excerpt":{"rendered":"
A couple of weeks ago React v16 was released with some exciting new features including returning arrays from render() functions (no more wrapping <divs>!), better server side rendering and performance improvements. Read more here: https:\/\/reactjs.org\/blog\/2017\/09\/26\/react-v16.0.html We’re not yet using React on the main ReadMe site, but we are on one of our smaller projects which will soon be integrated […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[22],"tags":[],"ppma_author":[53],"class_list":["post-2989","post","type-post","status-publish","format-standard","hentry","category-api-tips"],"acf":[],"yoast_head":"\nHow to Transition to React 16 and Enzyme 3<\/title>\n<meta name=\"description\" content=\"Navigate the upgrade to React 16 and Enzyme 3 effortlessly with our comprehensive guide, featuring solutions to common challenges.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Transition to React 16 and Enzyme 3\" \/>\n<meta property=\"og:description\" content=\"Navigate the upgrade to React 16 and Enzyme 3 effortlessly with our comprehensive guide, featuring solutions to common challenges.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3\" \/>\n<meta property=\"og:site_name\" content=\"ReadMe: Resource Library\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-08T01:50:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-08T01:50:24+00:00\" \/>\n<meta name=\"author\" content=\"Dom Harrington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Miche Nickolaisen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3\",\"url\":\"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3\",\"name\":\"How to Transition to React 16 and Enzyme 3\",\"isPartOf\":{\"@id\":\"https:\/\/readme.com\/resources\/#website\"},\"datePublished\":\"2025-01-08T01:50:23+00:00\",\"dateModified\":\"2025-01-08T01:50:24+00:00\",\"author\":{\"@id\":\"https:\/\/readme.com\/resources\/#\/schema\/person\/770bcc036178743133b5ba515195981b\"},\"description\":\"Navigate the upgrade to React 16 and Enzyme 3 effortlessly with our comprehensive guide, featuring solutions to common challenges.\",\"breadcrumb\":{\"@id\":\"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/readme.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upgrading React to v16 and Enzyme to v3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/readme.com\/resources\/#website\",\"url\":\"https:\/\/readme.com\/resources\/\",\"name\":\"ReadMe: Resource Library\",\"description\":\"Making API documentation better for everyone\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/readme.com\/resources\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/readme.com\/resources\/#\/schema\/person\/770bcc036178743133b5ba515195981b\",\"name\":\"Miche Nickolaisen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/readme.com\/resources\/#\/schema\/person\/image\/a24e32f88df84934c107cef6fa8d3223\",\"url\":\"https:\/\/readme.com\/resources\/wp-content\/uploads\/2024\/06\/IMG_7151-scaled-e1718387764646.jpg\",\"contentUrl\":\"https:\/\/readme.com\/resources\/wp-content\/uploads\/2024\/06\/IMG_7151-scaled-e1718387764646.jpg\",\"caption\":\"Miche Nickolaisen\"},\"description\":\"An Austin resident since 2009, Miche grew up in rural southwestern Missouri. When not working on ReadMe's content marketing, you can find them doing a number of hobbies, including (but not limited to) bouldering, martial arts, playing tabletop RPGs and\/or video games, bullet journaling, and making art. They live with a large menagerie of indoor pets and a smaller (outdoor) menagerie of feral cats they take care of (sometimes including a few possums and raccoons, just for good measure).\",\"url\":\"https:\/\/readme.com\/resources\/author\/miche\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Transition to React 16 and Enzyme 3","description":"Navigate the upgrade to React 16 and Enzyme 3 effortlessly with our comprehensive guide, featuring solutions to common challenges.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3","og_locale":"en_US","og_type":"article","og_title":"How to Transition to React 16 and Enzyme 3","og_description":"Navigate the upgrade to React 16 and Enzyme 3 effortlessly with our comprehensive guide, featuring solutions to common challenges.","og_url":"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3","og_site_name":"ReadMe: Resource Library","article_published_time":"2025-01-08T01:50:23+00:00","article_modified_time":"2025-01-08T01:50:24+00:00","author":"Dom Harrington","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Miche Nickolaisen","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3","url":"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3","name":"How to Transition to React 16 and Enzyme 3","isPartOf":{"@id":"https:\/\/readme.com\/resources\/#website"},"datePublished":"2025-01-08T01:50:23+00:00","dateModified":"2025-01-08T01:50:24+00:00","author":{"@id":"https:\/\/readme.com\/resources\/#\/schema\/person\/770bcc036178743133b5ba515195981b"},"description":"Navigate the upgrade to React 16 and Enzyme 3 effortlessly with our comprehensive guide, featuring solutions to common challenges.","breadcrumb":{"@id":"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/readme.com\/resources\/upgrading-react-to-v16-and-enzyme-to-v3#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/readme.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Upgrading React to v16 and Enzyme to v3"}]},{"@type":"WebSite","@id":"https:\/\/readme.com\/resources\/#website","url":"https:\/\/readme.com\/resources\/","name":"ReadMe: Resource Library","description":"Making API documentation better for everyone","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/readme.com\/resources\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/readme.com\/resources\/#\/schema\/person\/770bcc036178743133b5ba515195981b","name":"Miche Nickolaisen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/readme.com\/resources\/#\/schema\/person\/image\/a24e32f88df84934c107cef6fa8d3223","url":"https:\/\/readme.com\/resources\/wp-content\/uploads\/2024\/06\/IMG_7151-scaled-e1718387764646.jpg","contentUrl":"https:\/\/readme.com\/resources\/wp-content\/uploads\/2024\/06\/IMG_7151-scaled-e1718387764646.jpg","caption":"Miche Nickolaisen"},"description":"An Austin resident since 2009, Miche grew up in rural southwestern Missouri. When not working on ReadMe's content marketing, you can find them doing a number of hobbies, including (but not limited to) bouldering, martial arts, playing tabletop RPGs and\/or video games, bullet journaling, and making art. They live with a large menagerie of indoor pets and a smaller (outdoor) menagerie of feral cats they take care of (sometimes including a few possums and raccoons, just for good measure).","url":"https:\/\/readme.com\/resources\/author\/miche"}]}},"authors":[{"term_id":53,"user_id":0,"is_guest":1,"slug":"dom-harrington","display_name":"Dom Harrington","avatar_url":{"url":"https:\/\/readme.com\/resources\/wp-content\/uploads\/2024\/06\/1516897618298.jpeg","url2x":"https:\/\/readme.com\/resources\/wp-content\/uploads\/2024\/06\/1516897618298.jpeg"},"first_name":"Dom","last_name":"Harrington","position":"Open Source Engineer","slogan":"","description":"Dom joins the ReadMe team remotely from the UK. He enjoys cooking, long walks in the countryside and playing video games. You\u2019ll likely find him in ReadMe's open source repos frantically writing tests."}],"_links":{"self":[{"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/posts\/2989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/comments?post=2989"}],"version-history":[{"count":0,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/posts\/2989\/revisions"}],"wp:attachment":[{"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/media?parent=2989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/categories?post=2989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/tags?post=2989"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/ppma_author?post=2989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}