@@ -158,11 +158,11 @@ mod tests {
158158 </style>
159159 <script
160160 crossorigin
161- src="https://unpkg.com/react@17 /umd/react.development.js"
161+ src="https://unpkg.com/react@18 /umd/react.development.js"
162162 ></script>
163163 <script
164164 crossorigin
165- src="https://unpkg.com/react-dom@17 /umd/react-dom.development.js"
165+ src="https://unpkg.com/react-dom@18 /umd/react-dom.development.js"
166166 ></script>
167167 <link rel="icon" href="https://graphql.org/favicon.ico">
168168 <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
@@ -187,15 +187,14 @@ mod tests {
187187 return url.toString();
188188 }
189189
190- ReactDOM.render(
190+ ReactDOM.createRoot(document.getElementById("graphiql")). render(
191191 React.createElement(GraphiQL, {
192192 fetcher: GraphiQL.createFetcher({
193193 url: createUrl('/'),
194194 fetch: customFetch,
195195 }),
196196 defaultEditorToolsVisibility: true,
197- }),
198- document.getElementById("graphiql")
197+ })
199198 );
200199 </script>
201200 </body>
@@ -236,11 +235,11 @@ mod tests {
236235 </style>
237236 <script
238237 crossorigin
239- src="https://unpkg.com/react@17 /umd/react.development.js"
238+ src="https://unpkg.com/react@18 /umd/react.development.js"
240239 ></script>
241240 <script
242241 crossorigin
243- src="https://unpkg.com/react-dom@17 /umd/react-dom.development.js"
242+ src="https://unpkg.com/react-dom@18 /umd/react-dom.development.js"
244243 ></script>
245244 <link rel="icon" href="https://graphql.org/favicon.ico">
246245 <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
@@ -265,16 +264,15 @@ mod tests {
265264 return url.toString();
266265 }
267266
268- ReactDOM.render(
267+ ReactDOM.createRoot(document.getElementById("graphiql")). render(
269268 React.createElement(GraphiQL, {
270269 fetcher: GraphiQL.createFetcher({
271270 url: createUrl('/'),
272271 fetch: customFetch,
273272 subscriptionUrl: createUrl('/ws', true),
274273 }),
275274 defaultEditorToolsVisibility: true,
276- }),
277- document.getElementById("graphiql")
275+ })
278276 );
279277 </script>
280278 </body>
@@ -321,11 +319,11 @@ mod tests {
321319 </style>
322320 <script
323321 crossorigin
324- src="https://unpkg.com/react@17 /umd/react.development.js"
322+ src="https://unpkg.com/react@18 /umd/react.development.js"
325323 ></script>
326324 <script
327325 crossorigin
328- src="https://unpkg.com/react-dom@17 /umd/react-dom.development.js"
326+ src="https://unpkg.com/react-dom@18 /umd/react-dom.development.js"
329327 ></script>
330328 <link rel="icon" href="https://graphql.org/favicon.ico">
331329 <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
@@ -358,7 +356,7 @@ mod tests {
358356 const plugins = [];
359357 plugins.push(GraphiQLPluginExplorer.explorerPlugin());
360358
361- ReactDOM.render(
359+ ReactDOM.createRoot(document.getElementById("graphiql")). render(
362360 React.createElement(GraphiQL, {
363361 fetcher: GraphiQL.createFetcher({
364362 url: createUrl('/'),
@@ -373,8 +371,7 @@ mod tests {
373371 }),
374372 defaultEditorToolsVisibility: true,
375373 plugins,
376- }),
377- document.getElementById("graphiql")
374+ })
378375 );
379376 </script>
380377 </body>