Riki
Riki10mo ago

Convex-test and React-Native

Given react-native compatibility with vitest is experimental and convex-test recommends to use vitest, has someone been able to use convex-test with React-Native? Eventually by using jest?
10 Replies
ballingt
ballingt10mo ago
Since convex-test only touches server-side code, I bet using vitest just works; it never imports client react-native code.
sshader
sshader10mo ago
convex-test should also work with jest (or any other JS unit test framework) if you want to use the same test framework everywhere
Riki
RikiOP10mo ago
Sorry, I have struggled using both approaches and those are usually problems that I hate to deal with related to bundler/esm/commonjs. Setting a jest test for convex on a blank rn app gives the following:
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

SyntaxError: Cannot use import statement outside a module
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

SyntaxError: Cannot use import statement outside a module
No description
Riki
RikiOP10mo ago
My intuition is that react-native being bundled by metro somehow has a "configuration mismatch" with the convex-test package
Riki
RikiOP10mo ago
And with Vitest, it looks like the imports are completely wrong. It tries to find "emails" relative to the node-modules/convex-test folder because api.d.ts generated by convex has the import type * from "../email.js"
No description
No description
Michal Srb
Michal Srb10mo ago
@Riki can you try to downgrade convex-test to the previous version and see if it resolves the vitest issue?
Riki
RikiOP10mo ago
Oh nice this works! I can confirm tests (and imports under the hood) are working correctly with convex-test: 0.0.12 Many thanks to the team for your help 🙏
Riki
RikiOP10mo ago
One last thing tough, sorry to bother, but it looks like the vitest code coverage tool isn't reporting at all convex source files (with TypeScript). Would you know how to fix this please? I assume this is related to the fact that convex "generates" files
No description
Michal Srb
Michal Srb10mo ago
Ah, this is another impact of us using dynamic imports to perform the api.foo.bar calls. Will see what we can do about it.
Riki
RikiOP10mo ago
Alright 👌 At least the most important issue I had with running tests is fixed. Thanks again @Michal Srb

Did you find this page helpful?