1- import { act , render } from '@testing-library/react' ;
1+ import { Mock } from 'vitest' ;
2+ import { useGraphiQL as $useGraphiQL } from '@graphiql/react' ;
3+ import { render } from '@testing-library/react' ;
24import { GraphQLInt , GraphQLObjectType , GraphQLSchema } from 'graphql' ;
35import { FC , useEffect } from 'react' ;
46import {
@@ -7,7 +9,17 @@ import {
79 useDocExplorerActions ,
810} from '../../context' ;
911import { DocExplorer } from '../doc-explorer' ;
10- import { schemaStore } from '../../../../graphiql-react/dist/stores/schema' ;
12+
13+ const useGraphiQL = $useGraphiQL as Mock ;
14+
15+ vi . mock ( '@graphiql/react' , async ( ) => {
16+ const originalModule =
17+ await vi . importActual < typeof import ( '@graphiql/react' ) > ( '@graphiql/react' ) ;
18+ return {
19+ ...originalModule ,
20+ useGraphiQL : vi . fn ( ) ,
21+ } ;
22+ } ) ;
1123
1224function makeSchema ( fieldName = 'field' ) {
1325 return new GraphQLSchema ( {
@@ -29,15 +41,16 @@ function makeSchema(fieldName = 'field') {
2941}
3042
3143const defaultSchemaContext = {
32- ...schemaStore . getInitialState ( ) ,
33- async introspect ( ) { } ,
44+ fetchError : null ,
45+ introspect ( ) { } ,
46+ isFetching : false ,
3447 schema : makeSchema ( ) ,
48+ validationErrors : [ ] ,
3549} ;
3650
3751const withErrorSchemaContext = {
38- ...schemaStore . getInitialState ( ) ,
52+ ...defaultSchemaContext ,
3953 fetchError : 'Error fetching schema' ,
40- async introspect ( ) { } ,
4154 schema : new GraphQLSchema ( { description : 'GraphQL Schema for testing' } ) ,
4255} ;
4356
@@ -50,21 +63,29 @@ const DocExplorerWithContext: FC = () => {
5063} ;
5164
5265describe ( 'DocExplorer' , ( ) => {
66+ beforeEach ( ( ) => {
67+ vi . resetModules ( ) ;
68+ } ) ;
69+
5370 it ( 'renders spinner when the schema is loading' , ( ) => {
54- schemaStore . setState ( { isFetching : true } ) ;
71+ useGraphiQL . mockImplementation ( cb =>
72+ cb ( { ...defaultSchemaContext , isFetching : true } ) ,
73+ ) ;
5574 const { container } = render ( < DocExplorerWithContext /> ) ;
5675 const spinner = container . querySelectorAll ( '.graphiql-spinner' ) ;
5776 expect ( spinner ) . toHaveLength ( 1 ) ;
5877 } ) ;
5978 it ( 'renders with null schema' , ( ) => {
60- schemaStore . setState ( { ...defaultSchemaContext , schema : null } ) ;
79+ useGraphiQL . mockImplementation ( cb =>
80+ cb ( { ...defaultSchemaContext , schema : null } ) ,
81+ ) ;
6182 const { container } = render ( < DocExplorerWithContext /> ) ;
6283 const error = container . querySelectorAll ( '.graphiql-doc-explorer-error' ) ;
6384 expect ( error ) . toHaveLength ( 1 ) ;
6485 expect ( error [ 0 ] ) . toHaveTextContent ( 'No GraphQL schema available' ) ;
6586 } ) ;
6687 it ( 'renders with schema' , ( ) => {
67- schemaStore . setState ( defaultSchemaContext ) ;
88+ useGraphiQL . mockImplementation ( cb => cb ( defaultSchemaContext ) ) ;
6889 const { container } = render ( < DocExplorerWithContext /> ) ;
6990 const error = container . querySelectorAll ( '.graphiql-doc-explorer-error' ) ;
7091 expect ( error ) . toHaveLength ( 0 ) ;
@@ -73,14 +94,11 @@ describe('DocExplorer', () => {
7394 ) . toHaveTextContent ( 'GraphQL Schema for testing' ) ;
7495 } ) ;
7596 it ( 'renders correctly with schema error' , ( ) => {
76- schemaStore . setState ( withErrorSchemaContext ) ;
97+ useGraphiQL . mockImplementation ( cb => cb ( withErrorSchemaContext ) ) ;
7798 const { rerender, container } = render ( < DocExplorerWithContext /> ) ;
7899 const error = container . querySelector ( '.graphiql-doc-explorer-error' ) ;
79100 expect ( error ) . toHaveTextContent ( 'Error fetching schema' ) ;
80-
81- act ( ( ) => {
82- schemaStore . setState ( defaultSchemaContext ) ;
83- } ) ;
101+ useGraphiQL . mockImplementation ( cb => cb ( defaultSchemaContext ) ) ;
84102 rerender ( < DocExplorerWithContext /> ) ;
85103 const errors = container . querySelectorAll ( '.graphiql-doc-explorer-error' ) ;
86104 expect ( errors ) . toHaveLength ( 0 ) ;
@@ -104,45 +122,38 @@ describe('DocExplorer', () => {
104122 } ;
105123
106124 // Initial render, set initial state
107- schemaStore . setState ( {
108- ...defaultSchemaContext ,
109- schema : initialSchema ,
110- } ) ;
125+ useGraphiQL . mockImplementation ( cb =>
126+ cb ( { ...defaultSchemaContext , schema : initialSchema } ) ,
127+ ) ;
111128 const { container, rerender } = render (
112129 < DocExplorerStore >
113130 < SetInitialStack />
114131 </ DocExplorerStore > ,
115132 ) ;
116133
117134 // First proper render of doc explorer
118- act ( ( ) => {
119- schemaStore . setState ( {
120- ...defaultSchemaContext ,
121- schema : initialSchema ,
122- } ) ;
123- } ) ;
124135 rerender (
125136 < DocExplorerStore >
126137 < DocExplorer />
127138 </ DocExplorerStore > ,
128139 ) ;
129140
130- const [ title ] = container . querySelectorAll ( '.graphiql-doc-explorer-title' ) ;
141+ const title = container . querySelector ( '.graphiql-doc-explorer-title' ) ! ;
131142 expect ( title . textContent ) . toEqual ( 'field' ) ;
132143
133144 // Second render of doc explorer, this time with a new schema, with _same_ field name
134- act ( ( ) => {
135- schemaStore . setState ( {
145+ useGraphiQL . mockImplementation ( cb =>
146+ cb ( {
136147 ...defaultSchemaContext ,
137148 schema : makeSchema ( ) , // <<< New, but equivalent, schema
138- } ) ;
139- } ) ;
149+ } ) ,
150+ ) ;
140151 rerender (
141152 < DocExplorerStore >
142153 < DocExplorer />
143154 </ DocExplorerStore > ,
144155 ) ;
145- const [ title2 ] = container . querySelectorAll ( '.graphiql-doc-explorer-title' ) ;
156+ const title2 = container . querySelector ( '.graphiql-doc-explorer-title' ) ! ;
146157 // Because `Query.field` still exists in the new schema, we can still render it
147158 expect ( title2 . textContent ) . toEqual ( 'field' ) ;
148159 } ) ;
@@ -166,23 +177,16 @@ describe('DocExplorer', () => {
166177 } ;
167178
168179 // Initial render, set initial state
169- schemaStore . setState ( {
170- ...defaultSchemaContext ,
171- schema : initialSchema ,
172- } ) ;
180+ useGraphiQL . mockImplementation ( cb =>
181+ cb ( { ...defaultSchemaContext , schema : initialSchema } ) ,
182+ ) ;
173183 const { container, rerender } = render (
174184 < DocExplorerStore >
175185 < SetInitialStack />
176186 </ DocExplorerStore > ,
177187 ) ;
178188
179189 // First proper render of doc explorer
180- act ( ( ) => {
181- schemaStore . setState ( {
182- ...defaultSchemaContext ,
183- schema : initialSchema ,
184- } ) ;
185- } ) ;
186190 rerender (
187191 < DocExplorerStore >
188192 < DocExplorer />
@@ -193,12 +197,12 @@ describe('DocExplorer', () => {
193197 expect ( title . textContent ) . toEqual ( 'field' ) ;
194198
195199 // Second render of doc explorer, this time with a new schema, with a different field name
196- act ( ( ) => {
197- schemaStore . setState ( {
200+ useGraphiQL . mockImplementation ( cb =>
201+ cb ( {
198202 ...defaultSchemaContext ,
199203 schema : makeSchema ( 'field2' ) , // <<< New schema with a new field name
200- } ) ;
201- } ) ;
204+ } ) ,
205+ ) ;
202206 rerender (
203207 < DocExplorerStore >
204208 < DocExplorer />
0 commit comments