testing application components with jest fails

Good day, we are using this amazing library in our app, a bare expo app and we faced 2 challenges. specifically with jest.

1. the main key in package.json points to the esmodule build and not the commonjs build as expected
2. after loading the commonjs build, tests fail with this message: Native RNSkia Module cannot be found when testing a component that uses any of react-native-skia exports

[salzhrani]

My solution which I can share is to mock views and methods exposed and bypass everything and return plain views for views and noop function for everything else

import { View } from 'react-native';
import { createElement } from 'react';

const PlainView = ({ children, ...props }: any) =>
  createElement(View, props, children);
const noop = () => null;

jest.mock('@shopify/react-native-skia', () => {
  const mock: { [key: string]: any } = {
    // other props can be added which
    // aren't handled properly
    // by the handler
    Canvas: PlainView,
  };
  const handler = {
    get(_: any, prop: string, __: any) {
      // first look for the prop in the mock
      if (prop in mock) {
        return mock[prop];
      }
      // class case? return a view
      if (prop[0] === prop[0].toUpperCase()) {
        return PlainView;
      }
      // probably a method
      return noop;
    },
  };
  return new Proxy(mock, handler);
});

if you think it is useful I can make a PR

[chrfalch]

Hi @flo-sch, super awesome findings and write-up, we really appreciate this! Would be super happy if you could help with creating Mocks for the library. Maybe we could collaborate and find a solution for the NativeSetup issue you’re seeing - I would imagine that we could create some kind of Platform test for this - the same goes for the global object issue. We already have Platform switches for Native / Web in the code!