<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.27.1</li>
<li>Operating System: Windows</li>
<li>Node.js version: 16.17.0, 18.8.0</li>
<li>Browser: All</li>
<li>Extra: Vite, Vue 3</li>
</ul>
<p dir="auto"><code class="notranslate">playwright test -c playwright-ct.config.ts</code></p>
<p dir="auto">When creating <code class="notranslate">ref</code> with some mock data in '*.spec.tsx' test file and passing it to the tested component in <code class="notranslate">mount</code>, initial render works.<br>
However, upon updating the <code class="notranslate">ref</code> value with a new value, the component doesn't automatically rerender.</p>
<p dir="auto">This is, for example, working in Cypress component testing (mentioning it since I just migrated to Playwright).</p>
<p dir="auto">I understand one can use Playwright's <code class="notranslate">await component.rerender({ props: { *somepropname*: *someref.value* }})</code></p>
<p dir="auto">But that has a few significant drawbacks:</p>
<ul dir="auto">
<li>It is not type safe, so upon refactoring component prop names, changing types etc., I will realize at best only after running the test. With reactivity, everything would be beautifully type safe and automatic.</li>
<li>It doesn't really allow you to test deep reactivity (list item property changes etc.). Only shallowRef at best. You can force the rerender, yes, but that destroys the purpose of deep reactivity testing.</li>
</ul>
<p dir="auto">I admit that reactivity testing is not always useful, but I have some use for it in my more complex components.<br>
More importantly, the type safety is just really really nice to have.<br>
It is also part of a reason why I use tsx tests instead of ts tests; because only <code class="notranslate">mount(&lt;ItemList items={...} /&gt;))</code> is type safe while also forcing you to provide values for all required props and warning you when providing values for non-existent props.</p>
<p dir="auto"><strong>Full repro project. Steps to reproduce:</strong></p>
<ul dir="auto">
<li>Download <a href="https://github.com/microsoft/playwright/files/9878311/repro-project.zip">repro-project.zip</a></li>
<li>Install <em>Volar</em> extension (official Vue 3 support extension)</li>
<li>Enable Take Over mode for workspace (guide is in <em>README.md</em> if needed)</li>
<li><code class="notranslate">npm install</code></li>
<li><code class="notranslate">npm run dev</code> to see a glorious ItemList.vue component drawing ten items</li>
<li>Check the 'ItemList.vue' component code</li>
<li>Check the 'ItemList.spec.tsx' test code</li>
<li>Try running the test from previous bullet. The test fails. There are a few exaplanatory comments in the test file with additional info.</li>
</ul>
<p dir="auto"><strong>Minor additional issue also demonstrated in the repro project</strong>:<br>
<code class="notranslate">interface MountResult</code> from <code class="notranslate">@playwright/experimental-ct-vue</code> is not exported.<br>
This is a little annoying since I can only pass the component reference as <code class="notranslate">Locator</code> from <code class="notranslate">beforeEach</code> where I'm mounting the actual component.<br>
Then, in the aforementioned test file I have to do this <code class="notranslate">await (component as any).rerender(...)</code>.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v^1.35.1]</li>
<li>Operating System: [macOS 13.3.1]</li>
</ul>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>Set up sandbox project following the <a href="https://playwright.dev/docs/getting-started-vscode" rel="nofollow">https://playwright.dev/docs/getting-started-vscode</a></li>
<li>Observe VS Code interactive window: "Testing/Testing Explorer"</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">All tests were found:</p>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/19588441/251129451-3263fe4b-5c95-4075-84ea-5255237f289f.png"><img width="250" alt="image" src="https://user-images.githubusercontent.com/19588441/251129451-3263fe4b-5c95-4075-84ea-5255237f289f.png" style="max-width: 100%;"></a>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">Neither test case was found:</p>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/19588441/251129290-b2441e24-5e51-439e-a225-351a4ab1cd53.png"><img width="432" alt="image" src="https://user-images.githubusercontent.com/19588441/251129290-b2441e24-5e51-439e-a225-351a4ab1cd53.png" style="max-width: 100%;"></a>