[Feature] Make component testing possible for React, Vue etc.

[nand1234]

guys, any plans to implement component testing for vue and react js applications.

---

Edit: From the maintainers.

A beta just launched, which supports Vue, React, and Svelte, see here: https://playwright.dev/docs/test-components

[aslushnikov]

@nand1234 good question! While we are here - could you please elaborate what exactly do you expect from a "component testing" in a perfect world?

[nand1234]

Typically component tests are run using a Node.js testing framework like jest or mocha. Components we want to test are rendered in a virtualized browser called jsdom.

With component testing , you can achieve the same goal: test a component in isolation. Instead of having components render inside a terminal, renders components in a real browser. Since the components you are testing are visible in the browser, this makes it easier to test and debug when a test fails.

this also, allows developers to test components in isolation.

[mxschmitt]

Would you like to do something like this?

(this is non-functional code, just an idea)

import YourComponent from './YourComponent'

it("should show hello after clicking the button", async ({ page, renderReactComponent }) => {
  await renderReactComponent(<YourComponent foo={123} />)
  await page.click("button")
  await page.waitForSelector("text=hello")
})

Blocked by #7121

[nand1234]

@mxschmitt brother you got it exactly what i envisioned.

[neviaumi]

Can I have some timeline on this feature?

Or where I can get ideas on how can contributing to remove the blocker?

[visortelle]

As I see, initially there is should be a way to bundle modules and upload them to the browser page.

Two days ago I implemented a script for my personal project that uses webpack and context.addInitScript(..) under the hood to achieve it.

How it looks now:

TestButton.tsx

TestButton.spec.ts

Run tests

Test results

Now it works well for my pet project.

If Playwright maintainers don't have any better vision on how to implement the component testing now and proposed API looks ok, then I can improve an API, fix few minor issues and make it a public library.

Source: https://github.com/visortelle/playwright-module-loader

Implementation for other bundlers like Rollup or Parcel is also possible.

Maybe it has sense to me to look into Playwright test runner internals to find a way for normal imports support for better IDE integration.

Boilerplate code for React and other frameworks can be reduced by wrapping it in a helper function.

What do you think?

Ping @aslushnikov, @mxschmitt.

[visortelle]

I updated README, added tests and published my lib for component testing to npmjs.

Here is how React component test looks now:

link

[itpropro]

Please consider implementing component testing capabilities into playwright. The natural competitor to playwright is Cypress and they are pushing into component testing, which is the argument I hear most often when people try to decide which one to use.

[neviaumi]

Would it more easily to achieve that if i already transpile my project code to ESM module that able to directly running on browser ?

Recently i migrated my project to snowpack + web-test-runner, it great for able to run test and see running result in actual browser.

and i realise the blocked issues here mostly related to transpiler config like Babel, TS ...etc.

if i already transpiled then feel like i don't need care about that ?

[tjoskar]

I created another proof of concept here: https://github.com/tjoskar/playwright-react for mounting React components with Playwright. It is really small and simple, but it seems to be working for my projects.

[denis-domanskii]

@aslushnikov I propose to move it to P2. Component tests became more and more popular, as they much (x100) faster than e2e, but still have high confidence level (with a correct tests approach).

Current React component tests framework React Testing Library uses JSDOM "browser" under the hood, which has a good implementation of actual web standards, but not so relevant as Chrome.

Run ultra-fast component tests in a real-browser environment will be a great feature! As mentioned above, Cypress framework already did it. But we all know fundamental Cypress restrictions, therefore getting the same functionality in Playwright will be a huge step forward to the fast and confident testing.

[jgoux]

Seems like it's not blocked anymore! #7121 (comment) 🎊

[hklsiteimprove]

Hi - this seems like an awesome addition to playwright - is there anything we can do to move it forward, as we would love to have the functionality for our test project.

[thernstig]

Would the scope of testing Web Components (lit more specifically) be possible to do in the same way? Maybe this is already possible and I'm not thinking straight today.

[pavelfeldman]

I looked into component testing with Playwright and filed a bug with the ideas / proposed approach. It is somewhat manual, yet powerful. Would be curious what you all think! See #12799 for details.

[lorainegarutti]

Hello maintainers!
Right now we're migrating from Jest runner for Playwright runner regarding e2e tests.
We also would like to migrate from Next.js runner for Playwright runner to run Happo tests (visual regression) - using this integration.
BUT we really want to have a way to mount component (as Cypress have) to stub data in order to build more stable tests.

My question is: do you have any idea what is missing for us to leverage this idea and make it happen?
We might offer some help if needed!

🥲 💚

[jhanink]

✅ Playwright ❤️
✅ Component Testing in v1.22.0 ❤️
🚫 No CT support for Angular 💔

Hey Microsoft - Please support component testing for Angular (from Google). Thanks!

reference: https://github.com/microsoft/playwright/releases/tag/v1.22.0

[itpropro]

Great to have component testing ready now for the major languages! This issue can be closed I think, thanks for listening 👍

[CosminGramada]

@pavelfeldman
Is adding Angular to the list of already supported frameworks for component testing on the roadmap?

[paoramati]

Is there any roadmap for supporting importing functions? I'm currently unsure how to use any lib functions, and end up duplicating mocks within tests.

[mrmckeb]

It would be great to get a clear roadmap for this feature - as we'd like to use it more heavily, but know that it's still in early development.

In the meantime, following the feature-components label may help people understand what has been requested/etc.
feature-components

[yjaaidi]

We (jscutlery), just released Angular support here: https://github.com/jscutlery/devkit/tree/main/packages/playwright-ct-angular
but you'll have to follow the Versatile Angular Style: standalone, inject(), inline templates & styles.

[sand4rt]

@thernstig created a package for lit and web components. See: #14241 (comment)

[sand4rt]

@jhanink @CosminGramada also created a package for Angular component testing: https://github.com/sand4rt/playwright-ct-angular. It has an identical API to Playwright's API.

[GermanJablo]

@nand1234 and @denis-domanskii have already mentioned the possibility of testing the component in a real browser.

I agree with them 100%, but I would like to add that it would also be great to be able to run them in a simulated browser like jsdom.

Since on occasions when so much confidence is not required, the tests could be executed much faster. Changing the execution of a test from a simulated browser to a real one and vice versa would be trivial if they shared the same API, and we wouldn't have to have testing library for some tests, and playwright for others.

I have opened an issue about this here: #27424

[dmitriybo]

It would be great if it were possible to select browsers for a specific test. For example, in cases where it is not necessary to test in all browsers defined in playwright-ct.config.ts. It is also currently not possible to run component tests via vitest. I hope they work on this too.