Expo Web Broken after integrating Cavy

[YahyaBagia]

Just implemented Cavy into my expo project that runs on Android, iOS and Web (managed workflow). Test cases are working properly on Android and iOS but the app now fails to run on Web (non testing mode). It shows the following error :

/node_modules/cavy/src/Tester.js 127:6
Module parse failed: Unexpected token (127:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
render() {
|     return (
>       <TesterContext.Provider key={this.state.key} value={this.testHookStore}>
|         {Children.only(this.props.children)}
|       </TesterContext.Provider>

A couple of google search suggests creating / modifying webpack.config.js or .babelrc. My project doesn't have any of them. It's fine that cavy doesn't yet support testing on Web. I just want my app to be running on Web as usual.

[AbigailMcP]

Hey there @YahyaBagia ! Sorry it's taken me a while to respond - are you still having issues?

I don't really have any experience with Expo web, so I might not be the best person to help! But it sounds like you need to get webpack to transpile your node_modules, using something like @expo/webpack-config : https://github.com/expo/expo-cli/tree/master/packages/webpack-config#include-modules.

Let me know how you get on!

[YahyaBagia]

Thank you @AbigailMcP for replying. For the time being I've excluded cavy from my Expo project. Please consider making cavy work out of the box with Expo web (if possible). Thank you for the great E2E testing library.

[mwarger]

@AbigailMcP I managed to get this working (for expo for web) after adding cavy to the list of modules that you mentioned in the custom webpack config. Transpiling as above handles the JSX in the Tester file (which was causing the above error). However, the index.js is using module.exports and I believe this is what might be causing the error. I was able to get it working in my project by changing the index.js file and just exporting the object rather than using module.exports.

I'm trying to see how I could automate this by modifying the webpack or babel config... if anyone has any thoughts, it would be appreciated. I'm not very familiar with this.

[YahyaBagia]

@mwarger, can you share a demo project where you successfully implemented Cavy in an Expo project that works for Web as well? It would be a great help for anyone who is looking for this.

[mwarger]

Yes, i will get an example put up.

Also, the simpler way to do this might just be to change the index.js export and see if that doesn't happen to break anything. If that's the case then this library should work for web just by adding a transpilation step. I'm also wanting to look and see how other libraries that are web compatible allow for both to co-exist by building the appropriate output. React-Native-Paper comes to mind...

I'm going to pull the cavy-tester example and play with it.

[AbigailMcP]

Hi @mwarger - thanks so much for sharing your success! 🎉

Did you manage to make any headway with a working demo in the Cavy Tester? I'd really love to get this documented / your demo included somewhere in the codebase as an example :)

Thanks!

[mwarger]

I haven't yet - I had other priorities. Thanks for the ping though, I'll look at doing this again soon.

[denniske]

@YahyaBagia
As a workaround you can create a dummy tester component for web tester.web.tsx which does not import cavy.

I use it in my project:
https://github.com/denniske/aoe2companion/tree/master/app/src/view/testing

tester.tsx

import {Tester, TestHookStore, useCavy} from "cavy";
import ExampleSpec from "../../ci/exampleSpec";
import React from "react";

export { useCavy };

const testHookStore = new TestHookStore();

export function ConditionalTester({children}: any) {
  return (
      <Tester clearAsyncStorage={false} waitTime={1000} specs={[ExampleSpec]} store={testHookStore}>
          {children}
      </Tester>
  );
}

tester.web.tsx

export function useCavy() { }

export function ConditionalTester({children}: any) {
    return children;
}