status-react/test/jest/jestSetup.js

122 lines
2.8 KiB
JavaScript
Raw Permalink Normal View History

const WebSocket = require('ws');
const { NativeModules } = require('react-native');
mockAsyncStorage = require('@react-native-async-storage/async-storage/jest/async-storage-mock');
require('react-native-gesture-handler/jestSetup');
require('react-native-reanimated/src/reanimated2/jestUtils').setUpTests();
jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
Fix component tests, upgrade Jest & friends, and a few other goodies (#18276) Fix all component tests after the latest RN upgrade. Fixes https://github.com/status-im/status-mobile/issues/18157 Closes https://github.com/status-im/status-mobile/pull/18235 Dependency changes - Upgraded Jest: from 26.6.3 to latest 29.7.0. - Upgraded @testing-library/jest-native: from 5.3.0 to latest 5.4.3 - Upgraded @testing-library/react-native: from 11.5.4 to 12.4.2 - Removed explicit dependency on jest-circus, this is now the default test runner. - Removed explicit dependency on jest-environment-node. This is handled by the package manager. - Added jest-silent-reporter at version 0.5.0. ### Why component tests were failing? Many tests were failing because we were using RN Testing Library (RNTL) in an unreliable fashion. With the recent library upgrades, the unreliability was excerbated. Other times, the tests were incorrectly arranging data. ### with-redefs does not work with async code Generally speaking, with-redefs should not be used with async code, assume the worst. The scope of the macro will cease to exist by the time the async code runs. In many tests we were using with-redefs, then calling render, but for some components that use use-effect, JS timers, animations, etc it's unreliable and were the reason for failures. It's easy to reproduce too: ```clojure (defn foo [] :foo) (foo) ;; => :foo (with-redefs [foo (constantly :bar)] (foo)) ;; => :bar (js/setTimeout (fn [] (tap> [:calling-foo (foo)])) 100) ;; Taps [:calling-foo :foo] ;; As you would expect, when running without with-redefs, it prints :foo. ;; So far so good, but whatch what happens with async code: (with-redefs [foo (constantly :bar)] (js/setTimeout (fn [] (tap> [:calling-foo (foo)])) 100)) ;; Taps [:calling-foo :foo] ;; ====> PROBLEM: Taps :foo, not :bar as one might expect ``` ### Not waiting on wait-for When test-helpers.component/wait-for is used, subsequent assertions/etc should be done after the promise returned by wait-for is resolved. But remember to not perform side-effects inside the wait-for callback (check out the docs https://callstack.github.io/react-native-testing-library/docs/api#waitfor). Most, if not all of our usages of wait-for were not waiting. #### Improvement 1 - Silence Jest on demand If you need to re-run component tests frequently, you may want to reduce the output verbosity. By passing JEST_USE_SILENT_REPORTER=true to make component-test or make component-test-watch you will see a lot less noise and be able to focus on what really matters to you. #### Improvement 2 - Selectively focus/disable tests Because of our need to first compile CLJS to JS before running tests via Jest, we couldn't easily skip or focus on specific tests. From this commit onwards, we should never again have to change the list of requires in files core_spec.cljs. Commenting out required namespaces gives a bad DX because it causes constant rebasing issues. #### Improvement 3 - Translations now work as in prod code (but only English) Translations performed by *-by-translation-text can be done now without any workaround under the hood. The query functions are now linted just like i18n/label, which means static translation keywords must be qualified with :t/, which is good for consistency.
2023-12-26 14:58:23 +00:00
jest.mock('react-native-fs', () => ({
default: {},
}));
jest.mock('react-native-share', () => ({
default: {},
Fix component tests, upgrade Jest & friends, and a few other goodies (#18276) Fix all component tests after the latest RN upgrade. Fixes https://github.com/status-im/status-mobile/issues/18157 Closes https://github.com/status-im/status-mobile/pull/18235 Dependency changes - Upgraded Jest: from 26.6.3 to latest 29.7.0. - Upgraded @testing-library/jest-native: from 5.3.0 to latest 5.4.3 - Upgraded @testing-library/react-native: from 11.5.4 to 12.4.2 - Removed explicit dependency on jest-circus, this is now the default test runner. - Removed explicit dependency on jest-environment-node. This is handled by the package manager. - Added jest-silent-reporter at version 0.5.0. ### Why component tests were failing? Many tests were failing because we were using RN Testing Library (RNTL) in an unreliable fashion. With the recent library upgrades, the unreliability was excerbated. Other times, the tests were incorrectly arranging data. ### with-redefs does not work with async code Generally speaking, with-redefs should not be used with async code, assume the worst. The scope of the macro will cease to exist by the time the async code runs. In many tests we were using with-redefs, then calling render, but for some components that use use-effect, JS timers, animations, etc it's unreliable and were the reason for failures. It's easy to reproduce too: ```clojure (defn foo [] :foo) (foo) ;; => :foo (with-redefs [foo (constantly :bar)] (foo)) ;; => :bar (js/setTimeout (fn [] (tap> [:calling-foo (foo)])) 100) ;; Taps [:calling-foo :foo] ;; As you would expect, when running without with-redefs, it prints :foo. ;; So far so good, but whatch what happens with async code: (with-redefs [foo (constantly :bar)] (js/setTimeout (fn [] (tap> [:calling-foo (foo)])) 100)) ;; Taps [:calling-foo :foo] ;; ====> PROBLEM: Taps :foo, not :bar as one might expect ``` ### Not waiting on wait-for When test-helpers.component/wait-for is used, subsequent assertions/etc should be done after the promise returned by wait-for is resolved. But remember to not perform side-effects inside the wait-for callback (check out the docs https://callstack.github.io/react-native-testing-library/docs/api#waitfor). Most, if not all of our usages of wait-for were not waiting. #### Improvement 1 - Silence Jest on demand If you need to re-run component tests frequently, you may want to reduce the output verbosity. By passing JEST_USE_SILENT_REPORTER=true to make component-test or make component-test-watch you will see a lot less noise and be able to focus on what really matters to you. #### Improvement 2 - Selectively focus/disable tests Because of our need to first compile CLJS to JS before running tests via Jest, we couldn't easily skip or focus on specific tests. From this commit onwards, we should never again have to change the list of requires in files core_spec.cljs. Commenting out required namespaces gives a bad DX because it causes constant rebasing issues. #### Improvement 3 - Translations now work as in prod code (but only English) Translations performed by *-by-translation-text can be done now without any workaround under the hood. The query functions are now linted just like i18n/label, which means static translation keywords must be qualified with :t/, which is good for consistency.
2023-12-26 14:58:23 +00:00
}));
jest.mock('react-native-navigation', () => ({
getNavigationConstants: () => ({ constants: [] }),
Navigation: {
constants: async () => ({
statusBarHeight: 10,
topBarHeight: 10,
bottomTabsHeight: 10,
}),
},
}));
2023-02-21 05:42:33 +00:00
jest.mock('react-native-background-timer', () => ({}));
jest.mock('react-native-static-safe-area-insets', () => ({
default: {
safeAreaInsetsTop: 0,
safeAreaInsetsBottom: 0,
},
}));
jest.mock('react-native-permissions', () => require('react-native-permissions/mock'));
jest.mock('@react-native-clipboard/clipboard', () => ({
getString: jest.fn().mockResolvedValue('mockString'),
getImagePNG: jest.fn(),
getImageJPG: jest.fn(),
setImage: jest.fn(),
setString: jest.fn(),
hasString: jest.fn().mockResolvedValue(true),
hasImage: jest.fn().mockResolvedValue(true),
hasURL: jest.fn().mockResolvedValue(true),
addListener: jest.fn(),
removeAllListeners: jest.fn(),
getEnforcing: jest.fn(),
useClipboard: jest.fn(() => ['mockString', jest.fn()]),
}));
jest.mock('@react-native-community/audio-toolkit', () => ({
Recorder: jest.fn().mockImplementation(() => ({
prepare: jest.fn(),
record: jest.fn(),
toggleRecord: jest.fn(),
pause: jest.fn(),
stop: jest.fn(),
on: jest.fn(),
})),
Player: jest.fn().mockImplementation(() => ({
prepare: jest.fn(),
playPause: jest.fn(),
play: jest.fn(),
pause: jest.fn(),
stop: jest.fn(),
seek: jest.fn(),
on: jest.fn(),
})),
MediaStates: {
DESTROYED: -2,
ERROR: -1,
IDLE: 0,
PREPARING: 1,
PREPARED: 2,
SEEKING: 3,
PLAYING: 4,
RECORDING: 4,
PAUSED: 5,
},
PlaybackCategories: {
Playback: 1,
Ambient: 2,
SoloAmbient: 3,
},
}));
jest.mock('i18n-js', () => ({
...jest.requireActual('i18n-js'),
t: (label) => `tx:${label}`,
}));
jest.mock('react-native-blob-util', () => ({
default: {
config: jest.fn().mockReturnValue({
fetch: jest.fn(),
}),
},
}));
jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
2023-11-01 13:04:21 +00:00
jest.mock('react-native-static-safe-area-insets', () => ({
default: {
safeAreaInsetsTop: 0,
safeAreaInsetsBottom: 0,
},
}));
NativeModules.ReactLocalization = {
language: 'en',
locale: 'en',
};
global.navigator = {
userAgent: 'node',
2023-02-21 05:42:33 +00:00
};
2023-02-21 05:42:33 +00:00
global.WebSocket = WebSocket;