ci: add component test (#15071)

Makefile

@@ -349,8 +349,8 @@ component-test-watch: ##@ Watch tests and re-run no changes to cljs files
 component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
-component-test: ##@test Run tests once in NodeJS
+component-test: ##@test Run component tests once in NodeJS
-	# Here we create the gyp bindings for nodejs
+	yarn install
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js
 

ci/Jenkinsfile.tests

@@ -68,6 +68,14 @@ pipeline {
         }
       }
     }
+    stage('Component Tests') {
+      steps {
+        sh """#!/bin/bash
+          set -eo pipefail
+          make component-test 2>&1 | tee -a ${LOG_FILE}
+        """
+      }
+    }
     stage('Upload') {
       steps {
         script {

doc/testing.md

@@ -18,8 +18,6 @@ Also test watcher can be launched. It will re-run the entire test suite when any
 
 Developers can also manually change the shadow-cljs option `:ns-regex` to control which namespaces the test runner should pick. 
 
-
-
 ## Testing with REPL
 
 The most convenient way to develop and run test locally is using REPL:
@@ -52,3 +50,19 @@ In the video below, you can see two buffers side-by-side. On the left the source
 Here I'm showing a terminal-only experience using Tmux (left pane Emacs, right pane the output coming from running the make target).
 
 [2022-12-19 13-17.webm](https://user-images.githubusercontent.com/46027/208471199-1909c446-c82d-42a0-9350-0c15ca562713.webm)
+
+## Component tests
+
+To run tests:
+
+```
+   make component-test
+```
+
+Also test watcher can be launched. It will re-run the entire test suite when any file is modified
+
+```
+   make component-test-watch
+```
+
+Check [component tests doc](./component-tests-overview.md) for more.

package.json

@@ -19,7 +19,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@react-native-async-storage/async-storage": "^1.17.9",
     "@react-native-community/audio-toolkit": "git+https://github.com/tbenr/react-native-audio-toolkit.git#refs/tags/v2.0.3-status-v6",
-    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.0-status",
+    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.1-status",
     "@react-native-community/cameraroll": "git+https://github.com/status-im/react-native-cameraroll.git#refs/tags/v4.0.4-status.0",
     "@react-native-community/clipboard": "^1.2.2",
     "@react-native-community/hooks": "^2.5.1",

test/jest/jest.config.js

@@ -1,26 +1,23 @@
 module.exports = {
-    "preset": "react-native",
+    preset: 'react-native',
-    "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"
+    setupFilesAfterEnv: [
-        , "../test/jest/jestSetup.js"
+        '@testing-library/jest-native/extend-expect',
+        '../test/jest/jestSetup.js',
     ],
-    "setupFiles": [
+    setupFiles: [],
-    ],
+    testPathIgnorePatterns: [],
-    "testPathIgnorePatterns": [
+    moduleNameMapper: {
-    ],
+        '^[@./a-zA-Z0-9$_-]+\\.(png|jpg|jpeg|gif)$':
-    "moduleNameMapper": {
+            '<rootDir>/../node_modules/react-native/Libraries/Image/RelativeImageStub',
-        '^[@./a-zA-Z0-9$_-]+\\.(png|jpg|jpeg|gif)$': '<rootDir>/../node_modules/react-native/Libraries/Image/RelativeImageStub'
-      },
-    "testTimeout": 60000,
-    "transformIgnorePatterns": [
-        "/node_modules/(?!(@react-native|react-native-haptic-feedback|react-native-redash|react-native-image-crop-picker|@react-native-community|react-native-linear-gradient|react-native-background-timer|react-native|rn-emoji-keyboard|react-native-languages|react-native-shake|react-native-reanimated|react-native-redash|react-native-permissions|@react-native-community/blur)/).*/"
-    ],
-    "globals": {
-        "__TEST__": true
     },
-    "testEnvironment": "node",
+    testTimeout: 60000,
-    rootDir: "../../component-spec",
+    transformIgnorePatterns: [
-    testMatch: [
+        '/node_modules/(?!(@react-native|react-native-haptic-feedback|react-native-redash|react-native-image-crop-picker|@react-native-community|react-native-linear-gradient|react-native-background-timer|react-native|rn-emoji-keyboard|react-native-languages|react-native-shake|react-native-reanimated|react-native-redash|react-native-permissions|@react-native-community/blur)/).*/',
-        "**/*__tests__*",
+    ],
-         "**/*.component_spec.js"
+    globals: {
-    ]
+        __TEST__: true,
-}
+    },
+    testEnvironment: 'node',
+    rootDir: '../../component-spec',
+    testMatch: ['**/*__tests__*', '**/*.component_spec.js'],
+};

test/jest/jestSetup.js

@@ -1,5 +1,5 @@
 const WebSocket = require('ws');
-const { NativeModules } = require('react-native');
+const {NativeModules} = require('react-native');
 
 require('@react-native-async-storage/async-storage/jest/async-storage-mock');
 require('react-native-gesture-handler/jestSetup');
@@ -8,12 +8,11 @@ require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests();
 jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
 
 jest.mock('react-native-navigation', () => ({
-    getNavigationConstants:
+    getNavigationConstants: () => ({constants: []}),
-        () => ({ constants: [] }),
+    Navigation: {constants: async () => {}},
-    Navigation: { constants: async () => { } }
 }));
 
-jest.mock("react-native-background-timer", () => ({}))
+jest.mock('react-native-background-timer', () => ({}));
 
 jest.mock('react-native-languages', () => ({
     RNLanguages: {
@@ -22,7 +21,7 @@ jest.mock('react-native-languages', () => ({
     },
     default: {
         language: 'en',
-        locale: 'en'
+        locale: 'en',
     },
 }));
 
@@ -57,16 +56,16 @@ jest.mock('@react-native-community/audio-toolkit', () => ({
         SEEKING: 3,
         PLAYING: 4,
         RECORDING: 4,
-        PAUSED: 5
+        PAUSED: 5,
-    }
+    },
 }));
 
 NativeModules.ReactLocalization = {
     language: 'en',
-    locale: 'en'
+    locale: 'en',
 };
 global.navigator = {
     userAgent: 'node',
-}
+};
 
-global.WebSocket = WebSocket
+global.WebSocket = WebSocket;

yarn.lock

@@ -1786,9 +1786,9 @@
     eventemitter3 "^1.2.0"
     lodash "^4.17.15"
 
-"@react-native-community/blur@git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.0-status":
+"@react-native-community/blur@git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.1-status":
   version "4.3.0"
-  resolved "git+https://github.com/status-im/react-native-blur#1bb58aa0d1dd2176cbf8c20feab23bd9919b1f51"
+  resolved "git+https://github.com/status-im/react-native-blur#7317898ee7c824d2d5501aec72a509baced2b253"
 
 "@react-native-community/cameraroll@git+https://github.com/status-im/react-native-cameraroll.git#refs/tags/v4.0.4-status.0":
   version "4.0.4"