start testing with React 19 #11883

phryneas · 2024-06-10T10:44:25Z

Excluding the HOC/Render Props tests, which I just disabled for React 19, we only have ~~three~~ ~~two~~ ~~one~~ no failing tests with React 19.

I'd call that a win :)

changeset-bot · 2024-06-10T10:44:28Z

⚠️ No Changeset found

Latest commit: bcce10c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-06-10T10:45:46Z

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	38.69 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	47.47 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	45.04 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	34.2 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	32.05 KB (0%)
import { ApolloProvider } from "dist/react/index.js"	1.23 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production)	1.22 KB (0%)
import { useQuery } from "dist/react/index.js"	5.29 KB (0%)
import { useQuery } from "dist/react/index.js" (production)	4.37 KB (0%)
import { useLazyQuery } from "dist/react/index.js"	5.57 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production)	4.64 KB (0%)
import { useMutation } from "dist/react/index.js"	3.54 KB (0%)
import { useMutation } from "dist/react/index.js" (production)	2.77 KB (0%)
import { useSubscription } from "dist/react/index.js"	3.21 KB (0%)
import { useSubscription } from "dist/react/index.js" (production)	2.4 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js"	5.44 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" (production)	4.1 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js"	4.96 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.61 KB (0%)
import { useLoadableQuery } from "dist/react/index.js"	5.07 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" (production)	3.72 KB (0%)
import { useReadQuery } from "dist/react/index.js"	3.33 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production)	3.27 KB (0%)
import { useFragment } from "dist/react/index.js"	2.29 KB (0%)
import { useFragment } from "dist/react/index.js" (production)	2.23 KB (0%)

netlify · 2024-06-10T10:50:15Z

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	`c765bd9`
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/6666d90b62d82b000898ea8f
😎 Deploy Preview	https://deploy-preview-11883--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-06-10T10:55:48Z

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	`c97f4c6`
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/6666da384db2cb000841c14f
😎 Deploy Preview	https://deploy-preview-11883--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

src/react/hooks/__tests__/useQuery.test.tsx

src/react/hooks/__tests__/useReactiveVar.test.tsx

src/react/hooks/__tests__/useSuspenseQuery.test.tsx

netlify · 2024-06-10T11:46:10Z

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	`654f82c`
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/6666e60b6c3c1300092439c5
😎 Deploy Preview	https://deploy-preview-11883--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-06-10T11:51:49Z

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	`bcce10c`
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/666812e01bd2d40008c8004f
😎 Deploy Preview	https://deploy-preview-11883--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

phryneas · 2024-06-10T13:11:51Z

Down to one failed test - it seems that for some reason use is a lot slower in React 19 than our React 18 polyfill.

This test takes about 5 seconds longer in React 19 with use vs React 19 with __use:

apollo-client/src/react/hooks/__tests__/useSuspenseQuery.test.tsx

Lines 9519 to 9615 in 8e3edd4

    
             it("works with useDeferredValue", async () => { 
        
               const user = userEvent.setup(); 
        
               interface Variables { 
        
                 query: string; 
        
               } 
        
               interface Data { 
        
                 search: { query: string }; 
        
               } 
        
               const QUERY: TypedDocumentNode<Data, Variables> = gql` 
        
                 query SearchQuery($query: String!) { 
        
                   search(query: $query) { 
        
                     query 
        
                   } 
        
                 } 
        
               `; 
        
               const link = new ApolloLink(({ variables }) => { 
        
                 return new Observable((observer) => { 
        
                   setTimeout(() => { 
        
                     observer.next({ 
        
                       data: { search: { query: variables.query } }, 
        
                     }); 
        
                     observer.complete(); 
        
                   }, 10); 
        
                 }); 
        
               }); 
        
               const client = new ApolloClient({ 
        
                 link, 
        
                 cache: new InMemoryCache(), 
        
               }); 
        
               function App() { 
        
                 const [query, setValue] = React.useState(""); 
        
                 const deferredQuery = React.useDeferredValue(query); 
        
                 return ( 
        
                   <ApolloProvider client={client}> 
        
                     <label htmlFor="searchInput">Search</label> 
        
                     <input 
        
                       id="searchInput" 
        
                       type="text" 
        
                       value={query} 
        
                       onChange={(e) => setValue(e.target.value)} 
        
                     /> 
        
                     <Suspense fallback={<SuspenseFallback />}> 
        
                       <Results query={deferredQuery} /> 
        
                     </Suspense> 
        
                   </ApolloProvider> 
        
                 ); 
        
               } 
        
               function SuspenseFallback() { 
        
                 return <p>Loading</p>; 
        
               } 
        
               function Results({ query }: { query: string }) { 
        
                 const { data } = useSuspenseQuery(QUERY, { variables: { query } }); 
        
                 return <div data-testid="result">{data.search.query}</div>; 
        
               } 
        
               render(<App />); 
        
               const input = screen.getByLabelText("Search"); 
        
               expect(screen.getByText("Loading")).toBeInTheDocument(); 
        
               expect(await screen.findByTestId("result")).toBeInTheDocument(); 
        
               await act(() => user.type(input, "ab")); 
        
               await waitFor(() => { 
        
                 expect(screen.getByTestId("result")).toHaveTextContent("ab"); 
        
               }); 
        
               await act(() => user.type(input, "c")); 
        
               // useDeferredValue will try rerendering the component with the new value 
        
               // in the background. If it suspends with the new value, React will show the 
        
               // stale UI until the component is done suspending. 
        
               // 
        
               // Here we should not see the suspense fallback while the component suspends 
        
               // until the search finishes loading. Seeing the suspense fallback is an 
        
               // indication that we are suspending the component too late in the process. 
        
               expect(screen.queryByText("Loading")).not.toBeInTheDocument(); 
        
               expect(screen.getByTestId("result")).toHaveTextContent("ab"); 
        
               // Eventually we should see the updated text content once its done 
        
               // suspending. 
        
               await waitFor(() => { 
        
                 expect(screen.getByTestId("result")).toHaveTextContent("abc"); 
        
               }); 
        
             }, 10000);

src/react/hooks/__tests__/useQuery.test.tsx

jerelmiller · 2024-06-10T16:03:57Z

src/react/hooks/__tests__/useLoadableQuery.test.tsx

@@ -4594,6 +4596,8 @@ it('does not suspend deferred queries with partial data in the cache and using a
 });

 it("throws when calling loadQuery on first render", async () => {
+  // We don't provide this functionality with React 19 anymore since it requires internals access
+  if (IS_REACT_19) return;


Out of curiosity, are you planning to add any more logic here for this, or will that be a separate PR?

Separate PR - this one is purely about getting the tests to run, doesn't touch any shipped code and doesn't even have a changeset.

jerelmiller

Awesome to see minimal changes for this. Thanks for going ahead with this :)

src/react/hooks/__tests__/useQuery.test.tsx

start testing with React 19

c765bd9

phryneas added 2 commits June 10, 2024 12:46

circleci foo

58ed30f

massaging CI

c97f4c6

massaging CI

067a59c

phryneas added 2 commits June 10, 2024 13:39

clean up

654f82c

clean up more

623a727

phryneas commented Jun 10, 2024

View reviewed changes

src/react/hooks/__tests__/useQuery.test.tsx Outdated Show resolved Hide resolved

phryneas commented Jun 10, 2024

View reviewed changes

src/react/hooks/__tests__/useReactiveVar.test.tsx Outdated Show resolved Hide resolved

phryneas commented Jun 10, 2024

View reviewed changes

src/react/hooks/__tests__/useSuspenseQuery.test.tsx Outdated Show resolved Hide resolved

phryneas added 3 commits June 10, 2024 14:10

this isn't even failing 🎉

ba52499

run the test until a moment before it fails

460f4c0

"fix a test" by increasing timeout

8e3edd4

phryneas added 2 commits June 10, 2024 15:47

prolong timeout

0cb5f2c

fix last test

1f318dd

phryneas commented Jun 10, 2024

View reviewed changes

src/react/hooks/__tests__/useQuery.test.tsx Show resolved Hide resolved

phryneas marked this pull request as ready for review June 10, 2024 14:36

phryneas requested review from alessbell and jerelmiller June 10, 2024 14:36

jerelmiller reviewed Jun 10, 2024

View reviewed changes

jerelmiller approved these changes Jun 10, 2024

View reviewed changes

src/react/hooks/__tests__/useQuery.test.tsx Show resolved Hide resolved

github-actions bot added the auto-cleanup 🤖 label Jun 10, 2024

phryneas and others added 2 commits June 11, 2024 10:54

Update src/react/hooks/__tests__/useQuery.test.tsx

800de82

Clean up Prettier, Size-limit, and Api-Extractor

310636c

Merge branch 'main' into pr/test-react19

bcce10c

phryneas merged commit 6ca5ef4 into main Jun 11, 2024
42 checks passed

phryneas deleted the pr/test-react19 branch June 11, 2024 09:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

start testing with React 19 #11883

start testing with React 19 #11883

phryneas commented Jun 10, 2024 •

edited

Loading

changeset-bot bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

netlify bot commented Jun 10, 2024

netlify bot commented Jun 10, 2024

netlify bot commented Jun 10, 2024

netlify bot commented Jun 10, 2024 •

edited

Loading

phryneas commented Jun 10, 2024

jerelmiller Jun 10, 2024

phryneas Jun 11, 2024

jerelmiller left a comment

start testing with React 19 #11883

start testing with React 19 #11883

Conversation

phryneas commented Jun 10, 2024 • edited Loading

changeset-bot bot commented Jun 10, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Jun 10, 2024 • edited Loading

size-limit report 📦

netlify bot commented Jun 10, 2024

✅ Deploy Preview for apollo-client-docs ready!

netlify bot commented Jun 10, 2024

✅ Deploy Preview for apollo-client-docs ready!

netlify bot commented Jun 10, 2024

✅ Deploy Preview for apollo-client-docs ready!

netlify bot commented Jun 10, 2024 • edited Loading

✅ Deploy Preview for apollo-client-docs ready!

phryneas commented Jun 10, 2024

jerelmiller Jun 10, 2024

Choose a reason for hiding this comment

phryneas Jun 11, 2024

Choose a reason for hiding this comment

jerelmiller left a comment

Choose a reason for hiding this comment

phryneas commented Jun 10, 2024 •

edited

Loading

changeset-bot bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

netlify bot commented Jun 10, 2024 •

edited

Loading