diff --git a/test/integration/basic/pages/hmr/style-stateful-component.js b/test/integration/basic/pages/hmr/style-stateful-component.js
new file mode 100644
index 00000000..6739ebc9
--- /dev/null
+++ b/test/integration/basic/pages/hmr/style-stateful-component.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+
+export default class StyleStateFul extends Component {
+ render () {
+ return (
+
+
+
+ This is the style page.
+
+
+
+
+ )
+ }
+}
diff --git a/test/integration/basic/pages/hmr/style.js b/test/integration/basic/pages/hmr/style.js
index 508fc693..e492327c 100644
--- a/test/integration/basic/pages/hmr/style.js
+++ b/test/integration/basic/pages/hmr/style.js
@@ -1,14 +1,17 @@
+import React from 'react'
export default () => {
return (
- <>' '
-
- This is the style page.
-
-
-
' '>
+
+
+
+ This is the style page.
+
+
+
+
)
}
diff --git a/test/integration/basic/test/hmr.js b/test/integration/basic/test/hmr.js
index 760babf9..68174e4c 100644
--- a/test/integration/basic/test/hmr.js
+++ b/test/integration/basic/test/hmr.js
@@ -133,6 +133,41 @@ export default (context, render) => {
browser.close()
})
+
+ // Added because of a regression in react-hot-loader, see issues: #4246 #4273
+ // Also: https://github.com/zeit/styled-jsx/issues/425
+ it('should update styles in a stateful component correctly', async () => {
+ const browser = await webdriver(context.appPort, '/hmr/style-stateful-component')
+ const pTag = await browser.elementByCss('.hmr-style-page p')
+ const initialFontSize = await pTag.getComputedCss('font-size')
+
+ expect(initialFontSize).toBe('100px')
+
+ const pagePath = join(__dirname, '../', 'pages', 'hmr', 'style-stateful-component.js')
+
+ const originalContent = readFileSync(pagePath, 'utf8')
+ const editedContent = originalContent.replace('100px', '200px')
+
+ // Change the page
+ writeFileSync(pagePath, editedContent, 'utf8')
+
+ // wait for 5 seconds
+ await waitFor(5000)
+
+ try {
+ // Check whether the this page has reloaded or not.
+ const editedPTag = await browser.elementByCss('.hmr-style-page p')
+ const editedFontSize = await editedPTag.getComputedCss('font-size')
+
+ expect(editedFontSize).toBe('200px')
+ } finally {
+ // Finally is used so that we revert the content back to the original regardless of the test outcome
+ // restore the about page content.
+ writeFileSync(pagePath, originalContent, 'utf8')
+ }
+
+ browser.close()
+ })
})
})
}