Usage with React Native Web?

[vicky-carbon]

What is the framework/ technology you want to integrate Jest Preview to?

React Native Web.

Useful links

Styling

Do you want to add this example by your own?

I need help integrating jest-preview to my project that uses react-native-web and Next.js. I followed the example for Next.js with babel but the styles aren't working (RNW did not inject the CSS rules at runtime).

[antoniel]

I've been interested in using Jest Preview with React Native for some time now, and I've been exploring different ways to make it work. I did try using react-native-web, but I ran into some issues related to the jsdom environment and the fact that the React Native version of the testing library expects the node environment. While this may not be an issue for you if you're using a Next.js app, jsdom could be a problem for developers who want to use Jest Preview exclusively with a React Native jsdom environment.

I've been working on a solution that involves transforming React Native JSX into HTML. This would enable developers to visualize their components in Jest Preview more easily and would eliminate the need for the jsdom environment altogether. I'm still working on some of the details of this solution, but I believe it could be a valuable addition to the project

[antoniel]

I have an idea for how this transformation could be used in practice. I envision that the react-native-to-html package (WIP) could be integrated into the Jest Preview interface as a replacement for the current implementation of the preview function in /src/preview.ts.

With this implementation, the debug function in Jest Preview would accept a parameter that replaces the use of document.documentElement.outerHTML. For example, in a React Native project, developers could use the toJSON function from react-test-renderer to generate a JSON representation of a component, and then pass that JSON to the debug function to generate the corresponding HTML output.

Here's an example of how this could work in practice:

import { render } from '@testing-library/react-native';
import { toHtml } from 'react-native-to-html';

const { toJSON } = render(...);
const html = toHtml(toJSON());
preview.debug(html);

[nvh95]

Hi @vicky-carbon @antoniel. I am not familiar with react-native and react-native-web for now. So another maintainer @ntt261298 and I will explore it a little bit more and get back to you guys. In the meantime, if you guys have a repo which uses react-native and react-native-web for us to play with, it would save us a ton of time.

Thanks.

[antoniel]

Yo @nvh95, I'll be happy to help creating the repo. I should be able to have it set up by tomorrow

[antoniel]

@nvh95 take a look on https://github.com/antoniel/react-native-to-jest-preview/tree/main/examples/react-native