react-native example

[pvinis]

Clear and concise description of the problem

i see there are many examples, it would be nice to have one about react-native, so we can start using vitest too.

Suggested solution

someone that knows how to set things up, to set up an example and add it next to the other examples in the repo.

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sheremet-va]

react-native is not supported at the moment, and/or requires a lot of manual setup that can be easily broken by an update.

I had a working example, but need time to make it into something more realistic to use

[pvinis]

i guess it this? love this btw haha https://github.com/sheremet-va/rn/blob/master/vitest.config.js#L13. anyway, thank you. i look forward to vitest being usable in RN :)

[stavalfi]

I think that all the examples should have a lock file so we can see the versions of the packages that you used when you created the example. for example, the nextjs example is broken. and it have deps with "latest" version. We can't do nothing with this..

Also, the types (typescript) of vitest is broken as well in vitest.config.ts. you can see https://github.com/vitest-dev/vitest/issues/1331 for reproduction.

[mgcrea]

Really interested in this, any news on this front? Would be great to have an up-to-date example!

[SalahAdDin]

It seems there is no progress on this concern and there is nothing planned for it.

Sad.

[sheremet-va]

There is a new working prototype here: https://github.com/sheremet-va/vitest-react-native

I published it as vitest-react-native package, you can test it by adding a plugin to your vitest configuration:

import reactNative from 'vitest-react-native'
// this is needed for react jsx support
import react from "@vitejs/plugin-react";
import { defineConfig } from 'vitest/config'

export default defineConfig({
  plugins: [reactNative(), react()]
})

This is pretty much a work in progress. There should be quite a few possible issues since I only tested Text/View components. For example, I don't know how to resolve different files for different platforms (like requiring ./Utilities/Platform). Right now I just manually replace them on generated code (https://github.com/sheremet-va/vitest-react-native/blob/master/packages/vitest-react-native/setup.js#L18). If there are any errors, you are welcome to open an issue in https://github.com/sheremet-va/vitest-react-native or fix it yourself by providing a PR.

When the package is stable, we can add it to Vitest examples.

[SalahAdDin]

There is a new working prototype here: https://github.com/sheremet-va/vitest-react-native

I published it as vitest-react-native package, you can test it by adding a plugin to your vitest configuration:

import reactNative from 'vitest-react-native'
// this is needed for react jsx support
import react from "@vitejs/plugin-react";
import { defineConfig } from 'vitest/config'

export default defineConfig({
  plugins: [reactNative(), react()]
})

This is pretty much a work in progress. There should be quite a few possible issues since I only tested Text/View components. For example, I don't know how to resolve different files for different platforms (like requiring ./Utilities/Platform). Right now I just manually replace them on generated code (https://github.com/sheremet-va/vitest-react-native/blob/master/packages/vitest-react-native/setup.js#L18). If there are any errors, you are welcome to open an issue in https://github.com/sheremet-va/vitest-react-native or fix it yourself by providing a PR.

When the package is stable, we can add it to Vitest examples.

Very good progress man, it would be amazing if you get support from the community, I'm pretty sure this is very hard work.