Make a fully functional app from snapshot

[nvh95]

Is your feature request related to a problem? Please describe.
This feature request is motivated by #62. When jest preview couldn't show an Image component from NextJS in Jest Preview. The reason is that Image Component requires javascript to be loaded.
So the question is. Can we make Jest Preview shows a fully functional app on browser?

Describe the solution you'd like
Instead of just a static HTML page, Jest Preview can serve a fully functional/ interactive SPA in the browser

Describe how should jest-preview implements this feature
Have no idea. This is a very hard problem. Need to understand how Jest process javascript, bundling (if they do?) (might be to see the Jest cached in cache folder?)

Describe alternatives you've considered

• Can we modify next.config.js to

// next.config.js
module.exports = {
  reactStrictMode: true,
+  images: {
+   loader: "custom",
+ },

Reference: vercel/next.js#19065

Image

[nvh95]

Idea:
Take a Vite project as an example: Can we start/ build the app to have some bundled .js files? Then inject it directly into the HTML snapshot?

This way, users can still see the HTML immediately after debug() triggered. They can integrate with the app since we add

    <script type="module" src="/src/index.tsx"></script>

We need to modify Preview Server in cli/server/previewServer.js to have Vite serve the index.html file in .cache, instead of connect

Simple explanation:

We will have a Vite app, but not the fixed index.html, we have a dynamic HTML file, generated by preview.debug()

How about other frameworks?
I frankly don't know. But I can see the feasibility to make it work with Vite. Let's try this!!!!!!!

[nvh95]

Vite supports creating a server of our own. I see the light at the end of the road!!
https://vitejs.dev/guide/api-javascript.html#createserver

[nvh95]

Note that in #122, we are trying to unify CSS Modules's class names to be the same in Windows and Linux in Jest Preview. However. It is not the default behavior when we process the CSS modules in development mode. We need to revisit #122 when implement #84

[nvh95]

To achieve this, we need to

• Hydrate the markup
• Inject the script

One useful resource:
https://github.com/jsdom/jsdom#executing-scripts