Skip to content

Commit a96f0d4

Browse files
siriwatknpweb-flow
authored andcommitted
[styled-engine] Add caching to improve performance for running tests with Jest (#45846)
1 parent d33c377 commit a96f0d4

File tree

2 files changed

+38
-4
lines changed

2 files changed

+38
-4
lines changed

packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { CacheProvider } from '@emotion/react';
55
import createCache from '@emotion/cache';
66
import { StyleSheet } from '@emotion/sheet';
77

8+
// To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
9+
const cacheMap = new Map();
10+
811
// Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
912
// We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
1013
// Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
@@ -98,10 +101,15 @@ function getCache(injectFirst, enableCssLayer) {
98101

99102
export default function StyledEngineProvider(props) {
100103
const { injectFirst, enableCssLayer, children } = props;
101-
const cache = React.useMemo(
102-
() => getCache(injectFirst, enableCssLayer),
103-
[injectFirst, enableCssLayer],
104-
);
104+
const cache = React.useMemo(() => {
105+
const cacheKey = `${injectFirst}-${enableCssLayer}`;
106+
if (cacheMap.has(cacheKey)) {
107+
return cacheMap.get(cacheKey);
108+
}
109+
const fresh = getCache(injectFirst, enableCssLayer);
110+
cacheMap.set(cacheKey, fresh);
111+
return fresh;
112+
}, [injectFirst, enableCssLayer]);
105113
return cache ? <CacheProvider value={cache}>{children}</CacheProvider> : children;
106114
}
107115

packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.test.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import { __unsafe_useEmotionCache } from '@emotion/react';
23
import { StyledEngineProvider, GlobalStyles } from '@mui/styled-engine';
34
import { createRenderer } from '@mui/internal-test-utils';
45
import { expect } from 'chai';
@@ -49,4 +50,29 @@ describe('[Emotion] StyledEngineProvider', () => {
4950
);
5051
expect(rule).to.equal('@layer theme,base,mui,components,utilities;');
5152
});
53+
54+
it('should reuse the same cache', () => {
55+
let upperCache;
56+
let innerCache;
57+
function Upper() {
58+
const cache = __unsafe_useEmotionCache();
59+
upperCache = cache;
60+
return (
61+
<StyledEngineProvider injectFirst>
62+
<Inner />
63+
</StyledEngineProvider>
64+
);
65+
}
66+
function Inner() {
67+
const cache = __unsafe_useEmotionCache();
68+
innerCache = cache;
69+
return null;
70+
}
71+
render(
72+
<StyledEngineProvider injectFirst>
73+
<Upper />
74+
</StyledEngineProvider>,
75+
);
76+
expect(innerCache).to.equal(upperCache);
77+
});
5278
});

0 commit comments

Comments
 (0)