vue with vue-testing-librray example

[nvh95]

Features

• Add vue-testing-librray example to work with jest-preview Add example for vue #39
  • Support file transform
  • Supoprt import css transform

Future work

• Support scoped css (vue's syntax)

How to test

cd jest-preview

npm install

npm run build:watch // Build code for code transformation

cd examples/vue-testing-library // Navigate to Vue Example

npm install // Install dependency for the example

npm run jest-preview // Open Jest Preview Server 

npm run test // You should see the UI updated every time you hit "Save" 

Snapshot

[nvh95]

• jest-preview supports transforming files (e.g: images) and css files out of the box.
• Scoped CSS does not work yet. To investigate and support.
  • To read https://github.com/vuejs/vue-jest/ to check if we can have more insight. Their docs mention to supported CSS https://github.com/vuejs/vue-jest/#supported-style-languages

Real App UI:

UI after run preview.debug():

It looks better than I expect.

[netlify]

✅ Deploy Preview for jest-preview-library ready!

Name	Link
🔨 Latest commit	c59b9d6
🔍 Latest deploy log	https://app.netlify.com/sites/jest-preview-library/deploys/62b1ea01933fe6000825853a
😎 Deploy Preview	https://deploy-preview-42--jest-preview-library.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 settings.

[nvh95]

We are going to write our own vue code transformation later. For now, let get this PR merged.