Update to enzyme v3 #1012
Update to enzyme v3 #1012
Conversation
|
I am curious, did you try mocking require.ensure to load the translation data? |
| @@ -9,6 +9,17 @@ module.exports = resizeTo(['tiny', 'small', 'medium', 'large', 'huge', 'enormous | |||
| browser.expect.element('div').text.to.contain('en').before(waitInms); | |||
| }, | |||
|
|
|||
| // new | |||
There was a problem hiding this comment.
nit: this comment could be a bit more descriptive
There was a problem hiding this comment.
Removed in this commit: de92c42
| @@ -0,0 +1,22 @@ | |||
| import React from 'react'; | |||
|
|
|||
There was a problem hiding this comment.
nit: have an extra line here between imports don't really need, also could remove an extra line after the imports as well
There was a problem hiding this comment.
Removed in this commit: de92c42
| @@ -8,6 +8,7 @@ it('should support rendering a string without translation', () => { | |||
| expect(base).toMatchSnapshot(); | |||
| }); | |||
|
|
|||
|
|
|||
There was a problem hiding this comment.
nit: added an extra line here not needed
There was a problem hiding this comment.
Removed in this commit: de92c42
| @@ -8,7 +8,7 @@ it('should render the embedded content consumer container', () => { | |||
| src="https://www.google.com/" | |||
| />); | |||
|
|
|||
| const wrapper = shallow(embeddedContentConsumer); | |||
There was a problem hiding this comment.
What's the reason we're switching from shallow rendering to rendering the static html?
There was a problem hiding this comment.
The event listeners in the EmbeddedContentConsumer component were throwing errors after updating to enzyme v3 using the shallow method. My understanding on why this is an issue now is a bit rough but here's what I'm thinking. Attaching an event listener to the document with addEventListener means the event is not being handled by React's synthetic event system and I believe enyzme's shallow and mount methods use React's synthetic event system while render uses another implementation which supports addEventListener.
|
@emilyrohrbough I looked around for a few ways to mock |
|
@bjankord I think moving them to nightwatch is totally fine. I did a little digging myself since I was curious and it seem like the general suggestion is to move away from using require.ensure and actually use System.import (introduced with webpack v2) to do code splitting and dynamical loading. Might be something we should keep in mind for using/updating in the future. |
| @@ -3,7 +3,7 @@ | |||
| exports[`renders a banner that has basic information 1`] = ` | |||
| <ResponsiveElement | |||
| defaultElement={ | |||
| <Component | |||
| <Unknown | |||
There was a problem hiding this comment.
Not entirely sure, I tested this with shallow, mount, and render and all output the string, Unknown here. Looks like jest has some logic to determine the type of component for react elements / components which are passed in as props here.
With how _LargeDemographicsBannerDisplay and _SmallDemographicsBannerDisplay are exported, it seems jest is unable to determine what type they are and falls back to using the string Unknown where before it would use the string Component.
In _LargeDemographicsBannerDisplay and _SmallDemographicsBannerDisplay, we could update the exports to export the function expressions.
* Update to enzyme v3 * Remove unnecessary new lines * Update Mutli and Single Selectable List Row snapshots
Summary
Additional Details
wrapper.unrenderedwithwrapper.instance().unrenderedwas a private enzyme method which has been removed.wrapper.nodewithwrapper.getElement().nodewas a private enzyme method which has been removed.require.ensure.require.ensurethrows errors in testing.require.ensurewhen testing.require.ensurecalls in terra-i18n with no luck.require.ensure, I added tests to nightwatch which cover the same functionality that was being tested before in jest for Base componentResolves #871