Skip to content

Commit 2f27156

Browse files
Andaristemmatown
Andarist
and
emmatown
authored
useInsertionEffect when it's available (emotion-js#2600)
* Upgrade React 18 to its latest RC version * Refactored tests to RTL to run tests easier against different React version, also run test suite with React 18 * Add separate Jest config to run tests with React 18 * Move rule insertion to the inner `<Insertion/>` for the css prop * Fixed Enzyme's shallow tests * Make test pass with real `useInsertionEffect` * Use `<Insertion/> and `useInsertionEffect` for all injection points in `@emotion/react` and `@emotion/styled`` * Fixed import-prod test problem with production React 18 throwing when used with RTL cause it's using act * Refactor one last test that was using JSDOM explicitly * Fixed CI * Update packages/css/test/no-babel/index.test.js * add changesets Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>
1 parent d253163 commit 2f27156

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+865
-983
lines changed

‎.changeset/silver-foxes-double.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@emotion/react': minor
3+
'@emotion/styled': minor
4+
---
5+
6+
Refactored code to use the upcoming `React.useInsertionEffect` when it's available (this is a new hook that is going to be introduced in React 18). This shouldn't have any effect on existing codebases and the change should be transparent.

‎.changeset/tricky-cameras-fold.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@emotion/utils': minor
3+
---
4+
5+
Introduced `registerStyles` helper that is shared across between other packages. This is just an internal util that shouldn't be used by packages other than `@emotion/*` packages.

‎.changeset/wet-bikes-explain.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@emotion/jest': patch
3+
---
4+
5+
Adjusted Enzyme-related code path to accomodate for changes related to the refactor around using `React.useInsertionEffect`.

‎.github/workflows/main.yml

+32-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ jobs:
4444
run: yarn
4545

4646
- name: Run Tests
47-
run: yarn coverage --color
47+
run: yarn test:ci --color
4848

4949
- name: Upload coverage to Codecov
5050
uses: codecov/codecov-action@v1
@@ -81,6 +81,37 @@ jobs:
8181
- name: Check Types
8282
run: yarn flow:check
8383

84+
test_react18:
85+
name: Test React 18
86+
runs-on: ubuntu-latest
87+
steps:
88+
- uses: actions/checkout@main
89+
90+
- name: Set Node.js 12.x
91+
uses: actions/setup-node@main
92+
with:
93+
node-version: 12.x
94+
95+
- name: Get yarn cache directory path
96+
id: yarn-cache-dir-path
97+
run: echo "::set-output name=dir::$(yarn cache dir)"
98+
99+
- uses: actions/cache@v2
100+
id: yarn-cache
101+
with:
102+
path: |
103+
${{ steps.yarn-cache-dir-path.outputs.dir }}
104+
node_modules
105+
key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
106+
restore-keys: |
107+
${{ runner.os }}-yarn-
108+
109+
- name: Install Dependencies
110+
run: yarn
111+
112+
- name: Run Tests with React 18
113+
run: yarn test:react18:ci
114+
84115
test_dist:
85116
name: Test Dist
86117
runs-on: ubuntu-latest

‎jest-react18.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const baseConfig = require('./jest.config.js')
2+
3+
module.exports = Object.assign({}, baseConfig, {
4+
moduleNameMapper: {
5+
'^react($|\\/.+)': 'react18$1',
6+
'^react-dom($|\\/.+)': 'react18-dom$1',
7+
'^react-test-renderer($|\\/.+)': 'react18-test-renderer$1'
8+
}
9+
})

‎jest.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
module.exports = {
22
testEnvironment: 'jsdom',
33
transform: {
4-
'\\.css$': '<rootDir>/test/styleTransform.js',
54
'^.+\\.js?$': 'babel-jest'
65
},
76
watchPlugins: [

‎jest.dist.js

-2
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,3 @@ const baseConfig = require('./jest.config.js')
33
module.exports = Object.assign({}, baseConfig, {
44
transformIgnorePatterns: ['dist', 'node_modules']
55
})
6-
7-
delete module.exports.moduleNameMapper

‎package.json

+7-5
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
"test:size": "npm-run-all build size",
99
"test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
1010
"test": "jest",
11+
"test:react18": "jest -c jest-react18.config.js",
1112
"test:typescript": "yarn workspaces run test:typescript",
12-
"coverage": "jest --coverage --no-cache --ci --runInBand",
13+
"test:ci": "jest --coverage --no-cache --ci --runInBand",
14+
"test:react18:ci": "yarn test:react18 --coverage --no-cache --ci --runInBand",
1315
"test:prod": "yarn build && jest -c jest.dist.js --no-cache --ci --runInBand",
1416
"lint:check": "eslint .",
1517
"test:watch": "jest --watch",
@@ -193,7 +195,7 @@
193195
"@mdx-js/mdx": "^1.6.22",
194196
"@mdx-js/react": "^1.6.22",
195197
"@preconstruct/cli": "1.1.34",
196-
"@testing-library/react": "^12.1.2",
198+
"@testing-library/react": "13.0.0-alpha.5",
197199
"@types/jest": "^27.0.3",
198200
"@types/node": "^10.11.4",
199201
"@types/react": "^16.9.11",
@@ -237,7 +239,6 @@
237239
"jest-junit": "^13.0.0",
238240
"jest-serializer-html": "^7.1.0",
239241
"jest-watch-typeahead": "^1.0.0",
240-
"jsdom": "^16.6.0",
241242
"lint-staged": "^7.2.0",
242243
"module-alias": "^2.0.1",
243244
"multipipe": "^1.0.2",
@@ -257,8 +258,9 @@
257258
"react-primitives": "^0.8.1",
258259
"react-router-dom": "^4.2.2",
259260
"react-test-renderer": "16.8.6",
260-
"react18": "npm:react@alpha",
261-
"react18-dom": "npm:react-dom@alpha",
261+
"react18": "npm:react@18.0.0-rc.0-next-aa8f2bdbc-20211215",
262+
"react18-dom": "npm:react-dom@18.0.0-rc.0-next-aa8f2bdbc-20211215",
263+
"react18-test-renderer": "npm:react-test-renderer@18.0.0-rc.0-next-aa8f2bdbc-20211215",
262264
"svg-tag-names": "^1.1.1",
263265
"through": "^2.3.8",
264266
"unified": "^6.1.6",

‎packages/css/test/instance/__snapshots__/inline.test.js.snap

+1-49
Original file line numberDiff line numberDiff line change
@@ -91,52 +91,6 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
9191
box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
9292
}
9393

94-
@font-face {
95-
font-family: 'Patrick Hand SC';
96-
font-style: normal;
97-
font-weight: 400;
98-
src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
99-
unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
100-
}
101-
102-
@keyframes animation-i9f7qw-bounce {
103-
from, 20%, 53%, 80%, to {
104-
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
105-
transform: translate3d(0, 0, 0);
106-
}
107-
108-
40%, 43% {
109-
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
110-
transform: translate3d(0, -30px, 0);
111-
}
112-
113-
70% {
114-
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
115-
transform: translate3d(0, -15px, 0);
116-
}
117-
118-
90% {
119-
transform: translate3d(0, -4px, 0);
120-
}
121-
}
122-
123-
.no-prefix {
124-
display: flex;
125-
justify-content: center;
126-
}
127-
128-
.some-key-14e1j2p-hoverStyles-Something_Main {
129-
color: hotpink;
130-
display: flex;
131-
}
132-
133-
.some-key-14e1j2p-hoverStyles-Something_Main:hover {
134-
color: hotpink;
135-
background-color: lightgray;
136-
border-color: aqua;
137-
box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
138-
}
139-
14094
.some-key-1h1w8ez-Image {
14195
animation: animation-i9f7qw-bounce;
14296
border-radius: 50%;
@@ -157,9 +111,7 @@ exports[`renderStylesToString renders large recursive component 1`] = `
157111
>
158112
.some-key-127stik{color:hotpink;}
159113
</style>
160-
<div class="some-key-127stik"
161-
data-reactroot
162-
>
114+
<div class="some-key-127stik">
163115
woah there
164116
<span>
165117
hello world

‎packages/css/test/instance/__snapshots__/stream.test.js.snap

+1-49
Original file line numberDiff line numberDiff line change
@@ -86,52 +86,6 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
8686
box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
8787
}
8888

89-
@font-face {
90-
font-family: 'Patrick Hand SC';
91-
font-style: normal;
92-
font-weight: 400;
93-
src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
94-
unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
95-
}
96-
97-
@keyframes animation-i9f7qw-bounce {
98-
from, 20%, 53%, 80%, to {
99-
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
100-
transform: translate3d(0, 0, 0);
101-
}
102-
103-
40%, 43% {
104-
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
105-
transform: translate3d(0, -30px, 0);
106-
}
107-
108-
70% {
109-
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
110-
transform: translate3d(0, -15px, 0);
111-
}
112-
113-
90% {
114-
transform: translate3d(0, -4px, 0);
115-
}
116-
}
117-
118-
.no-prefix {
119-
display: flex;
120-
justify-content: center;
121-
}
122-
123-
.some-key-14e1j2p-hoverStyles-Something_Main {
124-
color: hotpink;
125-
display: flex;
126-
}
127-
128-
.some-key-14e1j2p-hoverStyles-Something_Main:hover {
129-
color: hotpink;
130-
background-color: lightgray;
131-
border-color: aqua;
132-
box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
133-
}
134-
13589
.some-key-1h1w8ez-Image {
13690
animation: animation-i9f7qw-bounce;
13791
border-radius: 50%;
@@ -147,9 +101,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
147101
>
148102
.some-global-200{padding:0;margin:200;}.some-key-127stik{color:hotpink;}.some-global-199{padding:0;margin:199;}.some-global-198{padding:0;margin:198;}.some-global-197{padding:0;margin:197;}.some-global-196{padding:0;margin:196;}.some-global-195{padding:0;margin:195;}.some-global-194{padding:0;margin:194;}.some-global-193{padding:0;margin:193;}.some-global-192{padding:0;margin:192;}.some-global-191{padding:0;margin:191;}.some-global-190{padding:0;margin:190;}.some-global-189{padding:0;margin:189;}.some-global-188{padding:0;margin:188;}.some-global-187{padding:0;margin:187;}.some-global-186{padding:0;margin:186;}.some-global-185{padding:0;margin:185;}.some-global-184{padding:0;margin:184;}.some-global-183{padding:0;margin:183;}.some-global-182{padding:0;margin:182;}.some-global-181{padding:0;margin:181;}.some-global-180{padding:0;margin:180;}.some-global-179{padding:0;margin:179;}.some-global-178{padding:0;margin:178;}.some-global-177{padding:0;margin:177;}.some-global-176{padding:0;margin:176;}.some-global-175{padding:0;margin:175;}.some-global-174{padding:0;margin:174;}.some-global-173{padding:0;margin:173;}.some-global-172{padding:0;margin:172;}.some-global-171{padding:0;margin:171;}.some-global-170{padding:0;margin:170;}.some-global-169{padding:0;margin:169;}.some-global-168{padding:0;margin:168;}.some-global-167{padding:0;margin:167;}.some-global-166{padding:0;margin:166;}.some-global-165{padding:0;margin:165;}.some-global-164{padding:0;margin:164;}.some-global-163{padding:0;margin:163;}.some-global-162{padding:0;margin:162;}.some-global-161{padding:0;margin:161;}.some-global-160{padding:0;margin:160;}.some-global-159{padding:0;margin:159;}.some-global-158{padding:0;margin:158;}.some-global-157{padding:0;margin:157;}.some-global-156{padding:0;margin:156;}.some-global-155{padding:0;margin:155;}.some-global-154{padding:0;margin:154;}.some-global-153{padding:0;margin:153;}.some-global-152{padding:0;margin:152;}.some-global-151{padding:0;margin:151;}.some-global-150{padding:0;margin:150;}.some-global-149{padding:0;margin:149;}.some-global-148{padding:0;margin:148;}.some-global-147{padding:0;margin:147;}.some-global-146{padding:0;margin:146;}.some-global-145{padding:0;margin:145;}.some-global-144{padding:0;margin:144;}.some-global-143{padding:0;margin:143;}.some-global-142{padding:0;margin:142;}.some-global-141{padding:0;margin:141;}.some-global-140{padding:0;margin:140;}.some-global-139{padding:0;margin:139;}.some-global-138{padding:0;margin:138;}.some-global-137{padding:0;margin:137;}.some-global-136{padding:0;margin:136;}.some-global-135{padding:0;margin:135;}.some-global-134{padding:0;margin:134;}.some-global-133{padding:0;margin:133;}.some-global-132{padding:0;margin:132;}.some-global-131{padding:0;margin:131;}.some-global-130{padding:0;margin:130;}.some-global-129{padding:0;margin:129;}.some-global-128{padding:0;margin:128;}.some-global-127{padding:0;margin:127;}.some-global-126{padding:0;margin:126;}.some-global-125{padding:0;margin:125;}.some-global-124{padding:0;margin:124;}.some-global-123{padding:0;margin:123;}.some-global-122{padding:0;margin:122;}.some-global-121{padding:0;margin:121;}.some-global-120{padding:0;margin:120;}.some-global-119{padding:0;margin:119;}.some-global-118{padding:0;margin:118;}.some-global-117{padding:0;margin:117;}.some-global-116{padding:0;margin:116;}.some-global-115{padding:0;margin:115;}.some-global-114{padding:0;margin:114;}.some-global-113{padding:0;margin:113;}.some-global-112{padding:0;margin:112;}.some-global-111{padding:0;margin:111;}.some-global-110{padding:0;margin:110;}.some-global-109{padding:0;margin:109;}.some-global-108{padding:0;margin:108;}.some-global-107{padding:0;margin:107;}.some-global-106{padding:0;margin:106;}.some-global-105{padding:0;margin:105;}.some-global-104{padding:0;margin:104;}.some-global-103{padding:0;margin:103;}.some-global-102{padding:0;margin:102;}.some-global-101{padding:0;margin:101;}.some-global-100{padding:0;margin:100;}.some-global-99{padding:0;margin:99;}.some-global-98{padding:0;margin:98;}.some-global-97{padding:0;margin:97;}.some-global-96{padding:0;margin:96;}.some-global-95{padding:0;margin:95;}.some-global-94{padding:0;margin:94;}.some-global-93{padding:0;margin:93;}.some-global-92{padding:0;margin:92;}.some-global-91{padding:0;margin:91;}.some-global-90{padding:0;margin:90;}.some-global-89{padding:0;margin:89;}.some-global-88{padding:0;margin:88;}.some-global-87{padding:0;margin:87;}.some-global-86{padding:0;margin:86;}.some-global-85{padding:0;margin:85;}.some-global-84{padding:0;margin:84;}.some-global-83{padding:0;margin:83;}.some-global-82{padding:0;margin:82;}.some-global-81{padding:0;margin:81;}.some-global-80{padding:0;margin:80;}.some-global-79{padding:0;margin:79;}.some-global-78{padding:0;margin:78;}.some-global-77{padding:0;margin:77;}.some-global-76{padding:0;margin:76;}.some-global-75{padding:0;margin:75;}.some-global-74{padding:0;margin:74;}.some-global-73{padding:0;margin:73;}.some-global-72{padding:0;margin:72;}.some-global-71{padding:0;margin:71;}.some-global-70{padding:0;margin:70;}.some-global-69{padding:0;margin:69;}.some-global-68{padding:0;margin:68;}.some-global-67{padding:0;margin:67;}.some-global-66{padding:0;margin:66;}.some-global-65{padding:0;margin:65;}.some-global-64{padding:0;margin:64;}.some-global-63{padding:0;margin:63;}.some-global-62{padding:0;margin:62;}.some-global-61{padding:0;margin:61;}.some-global-60{padding:0;margin:60;}.some-global-59{padding:0;margin:59;}.some-global-58{padding:0;margin:58;}.some-global-57{padding:0;margin:57;}.some-global-56{padding:0;margin:56;}.some-global-55{padding:0;margin:55;}.some-global-54{padding:0;margin:54;}.some-global-53{padding:0;margin:53;}.some-global-52{padding:0;margin:52;}.some-global-51{padding:0;margin:51;}.some-global-50{padding:0;margin:50;}.some-global-49{padding:0;margin:49;}.some-global-48{padding:0;margin:48;}.some-global-47{padding:0;margin:47;}.some-global-46{padding:0;margin:46;}.some-global-45{padding:0;margin:45;}.some-global-44{padding:0;margin:44;}.some-global-43{padding:0;margin:43;}.some-global-42{padding:0;margin:42;}.some-global-41{padding:0;margin:41;}.some-global-40{padding:0;margin:40;}.some-global-39{padding:0;margin:39;}.some-global-38{padding:0;margin:38;}.some-global-37{padding:0;margin:37;}.some-global-36{padding:0;margin:36;}.some-global-35{padding:0;margin:35;}.some-global-34{padding:0;margin:34;}.some-global-33{padding:0;margin:33;}.some-global-32{padding:0;margin:32;}.some-global-31{padding:0;margin:31;}.some-global-30{padding:0;margin:30;}.some-global-29{padding:0;margin:29;}.some-global-28{padding:0;margin:28;}.some-global-27{padding:0;margin:27;}.some-global-26{padding:0;margin:26;}.some-global-25{padding:0;margin:25;}.some-global-24{padding:0;margin:24;}.some-global-23{padding:0;margin:23;}.some-global-22{padding:0;margin:22;}.some-global-21{padding:0;margin:21;}.some-global-20{padding:0;margin:20;}.some-global-19{padding:0;margin:19;}.some-global-18{padding:0;margin:18;}.some-global-17{padding:0;margin:17;}.some-global-16{padding:0;margin:16;}.some-global-15{padding:0;margin:15;}.some-global-14{padding:0;margin:14;}.some-global-13{padding:0;margin:13;}.some-global-12{padding:0;margin:12;}.some-global-11{padding:0;margin:11;}.some-global-10{padding:0;margin:10;}.some-global-9{padding:0;margin:9;}.some-global-8{padding:0;margin:8;}.some-global-7{padding:0;margin:7;}.some-global-6{padding:0;margin:6;}.some-global-5{padding:0;margin:5;}.some-global-4{padding:0;margin:4;}.some-global-3{padding:0;margin:3;}.some-global-2{padding:0;margin:2;}.some-global-1{padding:0;margin:1;}
149103
</style>
150-
<div class="some-key-127stik"
151-
data-reactroot
152-
>
104+
<div class="some-key-127stik">
153105
woah there
154106
<span>
155107
hello world

‎packages/css/test/instance/inline.test.js

+40-38
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
/**
2-
* @jest-environment node
3-
*/
1+
import {
2+
stripDataReactRoot,
3+
disableBrowserEnvTemporarily,
4+
safeQuerySelector
5+
} from 'test-utils'
46
import {
57
getComponents,
68
getInjectedRules,
79
createBigComponent,
810
getCssFromChunks,
911
setHtml
1012
} from '../../../server/test/util'
11-
import { JSDOM } from 'jsdom'
1213

1314
let React
1415
let renderToString
@@ -28,52 +29,53 @@ const resetAllModules = () => {
2829
}
2930

3031
describe('renderStylesToString', () => {
31-
beforeEach(resetAllModules)
32-
33-
test('renders styles with ids', () => {
34-
const { Page1, Page2 } = getComponents(emotion, reactEmotion)
35-
expect(
36-
emotionServer.renderStylesToString(renderToString(<Page1 />))
37-
).toMatchSnapshot()
38-
expect(
39-
emotionServer.renderStylesToString(renderToString(<Page2 />))
40-
).toMatchSnapshot()
32+
test('renders styles with ids', async () => {
33+
await disableBrowserEnvTemporarily(() => {
34+
resetAllModules()
35+
const { Page1, Page2 } = getComponents(emotion, reactEmotion)
36+
expect(
37+
emotionServer.renderStylesToString(renderToString(<Page1 />))
38+
).toMatchSnapshot()
39+
expect(
40+
emotionServer.renderStylesToString(renderToString(<Page2 />))
41+
).toMatchSnapshot()
42+
})
4143
})
42-
test('renders large recursive component', () => {
43-
const BigComponent = createBigComponent(emotion)
44-
expect(
45-
emotionServer.renderStylesToString(
46-
renderToString(<BigComponent count={200} />)
47-
)
48-
).toMatchSnapshot()
44+
test('renders large recursive component', async () => {
45+
await disableBrowserEnvTemporarily(() => {
46+
resetAllModules()
47+
const BigComponent = createBigComponent(emotion)
48+
expect(
49+
stripDataReactRoot(
50+
emotionServer.renderStylesToString(
51+
renderToString(<BigComponent count={200} />)
52+
)
53+
)
54+
).toMatchSnapshot()
55+
})
4956
})
5057
})
5158
describe('hydration', () => {
52-
beforeEach(resetAllModules)
59+
test('only inserts rules that are not in the critical css', async () => {
60+
const appHtml = await disableBrowserEnvTemporarily(() => {
61+
resetAllModules()
5362

54-
afterEach(() => {
55-
global.document = undefined
56-
global.window = undefined
57-
global.navigator = undefined
58-
})
63+
const { Page1 } = getComponents(emotion, reactEmotion)
64+
return emotionServer.renderStylesToString(renderToString(<Page1 />))
65+
})
5966

60-
test('only inserts rules that are not in the critical css', () => {
61-
const { Page1 } = getComponents(emotion, reactEmotion)
62-
const html = emotionServer.renderStylesToString(renderToString(<Page1 />))
63-
expect(html).toMatchSnapshot()
64-
const { window } = new JSDOM(html)
65-
global.document = window.document
66-
global.window = window
67-
global.navigator = window.navigator
68-
setHtml(html, document)
67+
expect(appHtml).toMatchSnapshot()
68+
document.body.innerHTML = `<div id="root">${appHtml}</div>`
6969

7070
resetAllModules()
7171

7272
expect(emotion.cache.registered).toEqual({})
7373

7474
const { Page1: NewPage1 } = getComponents(emotion, reactEmotion)
75-
render(<NewPage1 />)
76-
expect(getInjectedRules(document)).toMatchSnapshot()
75+
render(<NewPage1 />, {
76+
container: safeQuerySelector('#root')
77+
})
78+
expect(getInjectedRules()).toMatchSnapshot()
7779
expect(getCssFromChunks(emotion, document)).toMatchSnapshot()
7880
})
7981
})

0 commit comments

Comments
 (0)