mrousavy / react-native-vision-camera

📸 A powerful, high-performance React Native Camera library.
https://react-native-vision-camera.com
MIT License
7.51k stars 1.09k forks source link

💭 How to run a simple rendering test using jest ? #2680

Closed HND-dev closed 6 months ago

HND-dev commented 7 months ago

Question

Hello everyone, I apologize in advance for my English and the fact that I could possibly ask a question that may seem simple to most of you. My question is: how do I launch a rendering test with jest using the VisionCamera library?

Im trying to run a simple test like this:

/**
 * @format
 */

import 'react-native';
import React from 'react';
import App from '../App';

// Note: import explicitly to use the types shipped with jest.
import {it} from '@jest/globals';
import {jest} from '@jest/globals';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});

And in my App component, I render another component that uses Camera of VisonCamera :

...
import {VisionCamera} from '../vision-camera/vision-camera';

import {
  useCameraDevice,
  useCameraPermission,
  useCodeScanner,
} from 'react-native-vision-camera';

const ScanPage = () => { // this component is after imported and used in my  App component 
  const navigation = useNavigation<StackNavigationProp<any>>();
  const {hasPermission, requestPermission} = useCameraPermission();
  const codeScanner = useCodeScanner({
    codeTypes: ['qr', 'ean-13'],
    onCodeScanned: codes => {
      console.log(`Scanned ${codes.length} codes!`);
      for (const code of codes) {
        console.log(code.value);
      }
    },
  });
  const device = useCameraDevice('back');

  if (device == null)
    return (
      <View style={styles.camera}>
        <Text> No device found</Text>
      </View>
    );
  return (
    <VisionCamera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      codeScanner={codeScanner}
    />
  );
};

Now when i run my test i'm getting this error :

export RN_SRC_EXT=e2e.js &&  npm run test                                                                                                                                                                                      ─╯

> MyTestApp@0.0.1 test
> jest

 FAIL  __tests__/App.test.tsx
  ● Test suite failed to run

    system/camera-module-not-found: Failed to initialize VisionCamera: The native Camera Module (`NativeModules.CameraView`) could not be found.
    * Make sure react-native-vision-camera is correctly autolinked (run `npx react-native config` to verify)
    * Make sure you ran `pod install` in the ios/ directory.
    * Make sure you rebuilt the app.

      1 | // vision-camera.js
      2 |
    > 3 | import { Camera, sortDevices } from 'react-native-vision-camera'
        | ^
      4 |
      5 | export const VisionCamera = Camera
      6 |

      at Object.<anonymous> (node_modules/react-native-vision-camera/src/NativeCameraModule.ts:41:9)
      at Object.require (node_modules/react-native-vision-camera/src/Camera.tsx:7:1)
      at Object.require (node_modules/react-native-vision-camera/src/index.ts:1:1)
      at Object.require (vision-camera/vision-camera.js:3:1)
      at Object.<anonymous> (Pages/ScanPage.tsx:11:1)
      at Object.<anonymous> (App.tsx:19:1)
      at Object.<anonymous> (__tests__/App.test.tsx:7:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.708 s
Ran all test suites.

I'm running this on Kubuntu 22.04

What I tried

I tried to follow the instructions Mocking Guide of VisonCamera but nothing worked for me.

VisionCamera Version

3.9.1

Additional information

mrousavy commented 7 months ago

I have no idea to be honest. I never tried to do test rendering here, but please let me know once you find out.

ydlooming commented 4 months ago

Why is this closed? I am struggling to find a solution