diff --git a/src/withStyles.jsx b/src/withStyles.jsx
index 8d421b78..7f84ad26 100644
--- a/src/withStyles.jsx
+++ b/src/withStyles.jsx
@@ -109,9 +109,13 @@ export function withStyles(
// Get and store the result in the stylesFnResultsCache for the component
// -- not the instance -- so we only apply the theme to the stylesFn
// once per theme for this component.
- const cachedResultForTheme = stylesFnResultCacheMap.get(theme);
+ const isClient = typeof window !== 'undefined';
+ const cachedResultForTheme = isClient ? stylesFnResultCacheMap.get(theme) : null;
const stylesFnResult = cachedResultForTheme || stylesFn(theme) || {};
- stylesFnResultCacheMap.set(theme, stylesFnResult); // cache the result of stylesFn(theme)
+ if (isClient) {
+ // cache the result of stylesFn(theme)
+ stylesFnResultCacheMap.set(theme, stylesFnResult);
+ }
return stylesFnResult;
}
diff --git a/test/withStyles_test.jsx b/test/withStyles_test.jsx
index 7653426a..e64a3132 100644
--- a/test/withStyles_test.jsx
+++ b/test/withStyles_test.jsx
@@ -11,6 +11,9 @@ import { describeIfReact } from './ifReactHelpers';
import WithStylesContext, { DIRECTIONS } from '../src/WithStylesContext';
import ThemedStyleSheet from '../src/ThemedStyleSheet';
+const describeIfClient = typeof window === 'undefined' ? describe.skip : describe;
+const describeIfServer = typeof window === 'undefined' ? describe : describe.skip;
+
describe('withStyles', () => {
let testTheme;
let testInterface;
@@ -463,33 +466,68 @@ describe('withStyles', () => {
expect(secondInterface.resolveLTR).to.have.property('callCount', 3);
});
- it('re-calculates stylesFn(theme) at most once per theme', () => {
- const TestHelper = makeTestHelper();
- expect(stylesFn).to.have.property('callCount', 0);
- const wrapper = mount();
- expect(stylesFn).to.have.property('callCount', 1);
- wrapper.setProps({ stylesTheme: secondTheme });
- expect(stylesFn).to.have.property('callCount', 2);
- wrapper.setProps({ stylesTheme: firstTheme });
- expect(stylesFn).to.have.property('callCount', 2);
- wrapper.setProps({ stylesTheme: secondTheme });
- expect(stylesFn).to.have.property('callCount', 2);
- expect(stylesFn.getCall(0).args[0]).to.equal(firstTheme);
- expect(stylesFn.getCall(1).args[0]).to.equal(secondTheme);
+ describeIfClient('on the client', () => {
+ it('re-calculates stylesFn(theme) at most once per theme', () => {
+ const TestHelper = makeTestHelper();
+ expect(stylesFn).to.have.property('callCount', 0);
+ const wrapper = mount();
+ expect(stylesFn).to.have.property('callCount', 1);
+ wrapper.setProps({ stylesTheme: secondTheme });
+ expect(stylesFn).to.have.property('callCount', 2);
+ wrapper.setProps({ stylesTheme: firstTheme });
+ expect(stylesFn).to.have.property('callCount', 2);
+ wrapper.setProps({ stylesTheme: secondTheme });
+ expect(stylesFn).to.have.property('callCount', 2);
+ expect(stylesFn.getCall(0).args[0]).to.equal(firstTheme);
+ expect(stylesFn.getCall(1).args[0]).to.equal(secondTheme);
+ });
+
+ it('re-calculates stylesFn(theme) per component per theme', () => {
+ const TestHelper = makeTestHelper();
+ expect(stylesFn).to.have.property('callCount', 0);
+ const wrapper = mount(
+
+
+
+
+
+
,
+ );
+ expect(stylesFn).to.have.property('callCount', 1);
+ });
});
- it('re-calculates stylesFn(theme) per component per theme', () => {
- const TestHelper = makeTestHelper();
- expect(stylesFn).to.have.property('callCount', 0);
- const wrapper = mount(
-
-
-
-
-
-
,
- );
- expect(stylesFn).to.have.property('callCount', 1);
+ describeIfServer('on the server', () => {
+ it('re-calculates stylesFn(theme) on every render', () => {
+ const TestHelper = makeTestHelper();
+ expect(stylesFn).to.have.property('callCount', 0);
+ const wrapper = mount();
+ expect(stylesFn).to.have.property('callCount', 1);
+ wrapper.setProps({ stylesTheme: secondTheme });
+ expect(stylesFn).to.have.property('callCount', 2);
+ wrapper.setProps({ stylesTheme: firstTheme });
+ expect(stylesFn).to.have.property('callCount', 3);
+ wrapper.setProps({ stylesTheme: secondTheme });
+ expect(stylesFn).to.have.property('callCount', 4);
+ expect(stylesFn.getCall(0).args[0]).to.equal(firstTheme);
+ expect(stylesFn.getCall(1).args[0]).to.equal(secondTheme);
+ expect(stylesFn.getCall(3).args[0]).to.equal(firstTheme);
+ expect(stylesFn.getCall(4).args[0]).to.equal(secondTheme);
+ });
+
+ it('re-calculates stylesFn(theme) per component', () => {
+ const TestHelper = makeTestHelper();
+ expect(stylesFn).to.have.property('callCount', 0);
+ const wrapper = mount(
+
+
+
+
+
+
,
+ );
+ expect(stylesFn).to.have.property('callCount', 4);
+ });
});
});