docs: add testing documentation for Playwright #823
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| applications in a browser. | ||
|
|
||
| We can use Playwright to create **integration tests** for our `UploadThing` | ||
| funcionality, independently of the frontend framework we are using. |
There was a problem hiding this comment.
| funcionality, independently of the frontend framework we are using. | |
| functionality, independently of the frontend framework we are using. |
| We can use Playwright to create **integration tests** for our `UploadThing` | ||
| funcionality, independently of the frontend framework we are using. | ||
|
|
||
| <Callout type="info"> |
There was a problem hiding this comment.
Not sure that we necessarily have to go to this level of explanation. I'm ok to leave it in, but cc @t3dotgg
| test("should upload a file successfully", async ({ page }) => { | ||
| // Mock the API endpoint, so we don't actually upload a file | ||
| // This is a Next.js API route, but you can replace it with your own | ||
| await page.route( |
There was a problem hiding this comment.
This feels like the wrong place to be mocking, since the api code is also provided by uploadthing.
might make more sense to be mocking the API calls to uploadthing.com/api that the server code does, but even still I am having difficulty understanding what you are trying to do here.
There was a problem hiding this comment.
Makes sense to me, specially if the example is suppose to be FE framework agnostic
There was a problem hiding this comment.
You may want to take a look at how we are doing our mocks with MSW for some inspiration there.
There was a problem hiding this comment.
Hey there,
It result that it's pretty complicated to mock the uploadthing endpoints because of the nature of Next.js. Explanation:
- Next.js is fullstack framework.
- Playwright is a E2E testing tool.
- Playwright can only mocks the network requests that are made in the client side.
- The Uploadthing library for Next.js approach is to create a Next.js api routes where internally is the logic and rules in order to actually fetch de files to the Uploadthing APIs.
- The Uploadthing internal implementation is executed in the server side, not exposed to the client.
Therefore, I was not able to mock the real Uploadthing endpoints 😞
So probably having the example mocking the Next.js API route is the only way, so far.
What I have seen is a combination of Mock Service Worker with Playwright, but it looks more complex than I would like to see when working with testing.
What are your thoughts?
|
IMO, integration testing of dependencies like this is not a great practice. The effort to "make it work" doesn't seem worthwhile relative to the potential safety and peace of mind after implementing. If you've gotten actual value from including tests like this with your usage of UploadThing, let me know and I'll reconsider |
Ref: #822
Initial testing example documentation using Playwright.