fix: test cases, avoid null on destructure

Author: gjulivan

packages/pluggableWidgets/barcode-scanner-web/src/components/BarcodeScanner.tsx

@@ -69,14 +69,17 @@ export function BarcodeScanner({
 }: BarcodeScannerProps): ReactElement | null {
     const [errorMessage, setError] = useCustomErrorMessage();
     const canvasMiddleRef = useRef<HTMLDivElement>(null);
-    const { ref: videoRef, useBrowserAPI } = useReader({
+    const reader = useReader({
         onSuccess: onDetect,
         onError: setError,
         useCrop: showMask,
         barcodeFormats,
         useAllFormats,
         canvasMiddleRef
     });
+
+    const { ref: videoRef, useBrowserAPI } = reader ?? {};
+
     const supportsCameraAccess = typeof navigator?.mediaDevices?.getUserMedia === "function";
     const onCanPlay = useCallback((event: SyntheticEvent<HTMLVideoElement>) => {
         if (event.currentTarget.paused) {

packages/pluggableWidgets/barcode-scanner-web/src/components/__tests__/__snapshots__/BarcodeScanner.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Barcode scanner does not show the overlay when the user opts out of it 1`] = `
 <DocumentFragment>
   <div
-    class="mx-barcode-scanner"
+    class="mx-barcode-scanner mx-zxing-detector"
     style="width: 100%; height: 100%;"
   >
     <div
@@ -20,7 +20,7 @@ exports[`Barcode scanner does not show the overlay when the user opts out of it
 exports[`Barcode scanner renders video and overlay correctly 1`] = `
 <DocumentFragment>
   <div
-    class="mx-barcode-scanner"
+    class="mx-barcode-scanner mx-zxing-detector"
     style="width: 100%; height: 100%;"
   >
     <div