Adds MSW + testing utilities example #11763

alessbell · 2024-04-05T20:21:26Z

Closes #11709. Configures initial integration tests with MSW.

changeset-bot · 2024-04-05T20:21:30Z

⚠️ No Changeset found

Latest commit: 9435317

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-04-05T20:22:51Z

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	38.61 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	46.49 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	44.04 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	34.16 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	32.04 KB (0%)
import { ApolloProvider } from "dist/react/index.js"	1.24 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production)	1.22 KB (0%)
import { useQuery } from "dist/react/index.js"	5.27 KB (0%)
import { useQuery } from "dist/react/index.js" (production)	4.35 KB (0%)
import { useLazyQuery } from "dist/react/index.js"	5.51 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production)	4.58 KB (0%)
import { useMutation } from "dist/react/index.js"	3.51 KB (0%)
import { useMutation } from "dist/react/index.js" (production)	2.73 KB (0%)
import { useSubscription } from "dist/react/index.js"	3.19 KB (0%)
import { useSubscription } from "dist/react/index.js" (production)	2.38 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js"	5.44 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" (production)	4.11 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js"	4.92 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.58 KB (0%)
import { useLoadableQuery } from "dist/react/index.js"	5.03 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" (production)	3.69 KB (0%)
import { useReadQuery } from "dist/react/index.js"	3.32 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production)	3.26 KB (0%)
import { useFragment } from "dist/react/index.js"	2.29 KB (0%)
import { useFragment } from "dist/react/index.js" (production)	2.24 KB (0%)

netlify · 2024-04-05T20:26:32Z

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	`9435317`
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/661e95b479043500086aacc4
😎 Deploy Preview	https://deploy-preview-11763--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.

integration-tests/vite-jest-msw/tests/jest-msw/apollo-client.test.tsx

integration-tests/vite-jest-msw/tests/mocks/handlers.ts

…ql/apollo-client into issue-11709-example-with-msw

alessbell · 2024-04-10T14:12:50Z

integration-tests/vite-jest-msw/package.json

+    "test": "jest"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.10.0-rc.0",


Will wait to merge this until the next RC is published and I can update the version here along with the new fn names

integration-tests/vite-jest-msw/playwright.config.ts

phryneas · 2024-04-11T09:46:16Z

integration-tests/vite-jest-msw/tsconfig.node.json

+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true


Suggested change

"moduleResolution": "bundler",

"allowSyntheticDefaultImports": true

"moduleResolution": "bundler",

"noEmit": true,

"allowSyntheticDefaultImports": true

Otherwise, running tsc might result in stray files.

Should I update all the tsconfig.node.json in integration tests?

Edit: updated 2a69c5a

Looks like that caused tsc to error with Referenced project '/home/circleci/project/integration-tests/vite-jest-msw/tsconfig.node.json' may not disable emit.

phryneas · 2024-04-11T09:47:44Z

integration-tests/vite-jest-msw/tsconfig.json

+    "noFallthroughCasesInSwitch": true
+  },
+  "files": ["@types/graphql.d.ts"],
+  "include": ["src", "./tests/setupTests.js"],


Currently, no tsconfig seems to be including the tests folder, so everything in there will fall back to some kinda-random defaults. Is that intentional?

Including tests there was causing some weird failure mode either in my editor or CI (but not both)... I forget what that was :/

phryneas · 2024-04-11T09:57:04Z

integration-tests/vite-jest-msw/tests/jest-msw/apollo-client.test.tsx

+beforeEach(() => {
+  // since all our tests now use our "real" production Apollo Client instance,
+  // we need to reset the client cache before each test
+  return client.cache.reset();
+});


I have to admit, I'm still not 100% sold on "having only one client".
I am 100% sold on "using the real client", but I wouldn't have only one of them.
(Sorry for bringing this up so late, but I'm only really realizing through reviewing these PRs, we mostly discussed other parts of the testing setup.)

My suggestion would be to establish a pattern of a makeClient() function (maybe also a makeClient({fetch?}) function?) so that every test could use a "real" production client, but no two tests use the same - even if you reset the cache here, the QueryManager is not reset - and it could still have pending queries, and those would be deduplicate into the next test.

For comparison, see https://redux.js.org/usage/writing-tests#setting-up-a-test-environment which suggests a setupStore function that automatically creates a new store in renderWithProviders.

That's a great call out. I'll come back and make this change once the next RC is out since I'll have to update this PR then anyways, and will incorporate that guidance into the docs I'm writing 👍

Edit: I'll actually come back around to this in a separate PR

alessbell added 2 commits April 3, 2024 18:00

wip

7c2c9ed

feat: set up integration tests with msw

3ef06a3

alessbell added the 🔬 testing-utilities label Apr 5, 2024

alessbell commented Apr 5, 2024

View reviewed changes

integration-tests/vite-jest-msw/tests/jest-msw/apollo-client.test.tsx Show resolved Hide resolved

chore: update integration test cci matrix

b74d76e

alessbell commented Apr 5, 2024

View reviewed changes

integration-tests/vite-jest-msw/tests/mocks/handlers.ts Show resolved Hide resolved

chore: pin msw version

3b6550e

alessbell marked this pull request as ready for review April 10, 2024 13:23

alessbell requested review from phryneas and jerelmiller April 10, 2024 13:23

alessbell added 4 commits April 10, 2024 09:26

Merge branch 'release-3.10' into issue-11709-example-with-msw

e93195a

chore: fix jest matchers

463b0f1

Merge branch 'issue-11709-example-with-msw' of github.com:apollograph…

fc49167

…ql/apollo-client into issue-11709-example-with-msw

chore: remove types from tsconfig

e29f1ea

alessbell commented Apr 10, 2024

View reviewed changes

alessbell linked an issue Apr 10, 2024 that may be closed by this pull request

[Testing utilities] Example with MSW #11709

Open

phryneas reviewed Apr 11, 2024

View reviewed changes

alessbell added 6 commits April 11, 2024 10:56

chore: remove unused file

2a69c5a

chore: add noEmit: true to tsconfig.node.json

23220ac

chore: revert previous commit

98f9a7d

Merge branch 'release-3.10' into issue-11709-example-with-msw

39398ba

chore: use latest RC

084bc1a

Merge branch 'release-3.10' into issue-11709-example-with-msw

9435317

alessbell requested a review from phryneas April 16, 2024 15:20

Base automatically changed from release-3.10 to main April 24, 2024 15:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds MSW + testing utilities example #11763

Adds MSW + testing utilities example #11763

alessbell commented Apr 5, 2024 •

edited

changeset-bot bot commented Apr 5, 2024 •

edited

github-actions bot commented Apr 5, 2024 •

edited

netlify bot commented Apr 5, 2024 •

edited

alessbell Apr 10, 2024

phryneas Apr 11, 2024 •

edited

alessbell Apr 11, 2024 •

edited

alessbell Apr 12, 2024

phryneas Apr 11, 2024

alessbell Apr 11, 2024

phryneas Apr 11, 2024

alessbell Apr 11, 2024 •

edited

		"moduleResolution": "bundler",
		"allowSyntheticDefaultImports": true

Adds MSW + testing utilities example #11763

Are you sure you want to change the base?

Adds MSW + testing utilities example #11763

Conversation

alessbell commented Apr 5, 2024 • edited

changeset-bot bot commented Apr 5, 2024 • edited

⚠️ No Changeset found

github-actions bot commented Apr 5, 2024 • edited

size-limit report 📦

netlify bot commented Apr 5, 2024 • edited

✅ Deploy Preview for apollo-client-docs ready!

alessbell Apr 10, 2024

Choose a reason for hiding this comment

phryneas Apr 11, 2024 • edited

Choose a reason for hiding this comment

alessbell Apr 11, 2024 • edited

Choose a reason for hiding this comment

alessbell Apr 12, 2024

Choose a reason for hiding this comment

phryneas Apr 11, 2024

Choose a reason for hiding this comment

alessbell Apr 11, 2024

Choose a reason for hiding this comment

phryneas Apr 11, 2024

Choose a reason for hiding this comment

alessbell Apr 11, 2024 • edited

Choose a reason for hiding this comment

alessbell commented Apr 5, 2024 •

edited

changeset-bot bot commented Apr 5, 2024 •

edited

github-actions bot commented Apr 5, 2024 •

edited

netlify bot commented Apr 5, 2024 •

edited

phryneas Apr 11, 2024 •

edited

alessbell Apr 11, 2024 •

edited

alessbell Apr 11, 2024 •

edited