status-react/test/jest/jest.config.js

72 lines
2.0 KiB
JavaScript
Raw Normal View History

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
const transformIgnorePatterns = () => {
const libs = [
'@react-native',
'@react-native-community',
'@react-native-community/blur',
'react-native',
'react-native-background-timer',
'react-native-gifted-charts',
'react-native-haptic-feedback',
'react-native-hole-view',
'react-native-image-crop-picker',
'react-native-languages',
'react-native-linear-gradient',
'react-native-permissions',
'react-native-reanimated',
'react-native-redash',
'react-native-redash',
'react-native-shake',
'react-native-static-safe-area-insets',
'rn-emoji-keyboard',
].join('|');
return [`/node_modules/(?!(${libs})/).*/`];
};
const shouldUseSilentReporter = () => {
return process.env.JEST_USE_SILENT_REPORTER === 'true';
};
const reporters = () => {
let reporters = [];
if (shouldUseSilentReporter()) {
reporters.push(['jest-silent-reporter', { useDots: true }]);
} else {
reporters.push('default');
}
return reporters;
};
module.exports = {
preset: 'react-native',
Introduce malli library (#17867) This commit is the foundational step to start using malli (https://github.com/metosin/malli) in this project. Take in consideration we will only be able to realize malli's full power in future iterations. For those without context: the mobile team watched a presentation about malli and went through a light RFC to put everyone on the same page, among other discussions here and there in PRs. To keep things relatively short: 1. Unit, integration and component tests will short-circuit (fail) when inputs/outputs don't conform to their respective function schemas (CI should fail too). 2. Failed schema checks will not block the app from initializing, nor throw an exception that would trigger the LogBox. Exceptions are only thrown in the scope of automated tests. 3. There's zero performance impact in production code because we only instrument. Instrumentation is removed from the compiled code due to the usage of "^boolean js.goog/DEBUG". 4. We shouldn't expect any meaningful slowdown during development. **What are we instrumenting in this PR?** Per our team's agreement, we're only instrumenting the bare minimum to showcase 2 examples. - Instrument a utility function utils.money/format-amount using the macro approach. - Instrument a quo component quo.components.counter.step.view/view using the functional approach. Both approaches are useful, the functional approach is powerful and allow us to instrument anonymous functions, like the ones we pass to subscriptions or event handlers, or the higher-order function quo.theme/with-theme. The macro approach is perfect for functions already defined with defn. **I evaluated the schema or function in the REPL but nothing changes** - If you evaluate the source function, you need to evaluate schema/=> or schema/instrument as well. - Remember to *var quote* when using schema/instrument. - You must call "(status-im2.setup.schema/setup!)" after any var is re-instrumented. It's advisable to add a keybinding in your editor to send this expression automatically to the CLJS REPL, or add the call at the end of the namespace you are working on (similar to how some devs add "(run-tests)" at the end of test namespaces). **Where should schemas be defined?** For the moment, we should focus on instrumenting quo components, so define each function schema in the same namespace as the component's public "view" var. To be specific: - A schema used only to instrument a single function and not used elsewhere, like a quo component schema, wouldn't benefit from being defined in a separate namespace because that would force the developer to constantly open two files instead of one to check function signatures. - A common schema reused across the repo, like ":schema.common/theme" should be registered in the global registry "schema.registry" so that consumers can just refer to it by keyword, as if it was a built-in malli schema. - A common schema describing status-go entities like message, notification, community, etc can be stored either in the respective "src/status_im2/contexts/*" or registered globally, or even somewhere else. This is yet to be defined, but since I chose not to include schemas for them, we can postpone this guideline.
2023-11-18 14:04:48 +00:00
setupFilesAfterEnv: [
'@testing-library/jest-native/extend-expect',
'../component-spec/status_im.setup.schema_preload.js',
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
'../component-spec/test_helpers.component_tests_preload.js',
Introduce malli library (#17867) This commit is the foundational step to start using malli (https://github.com/metosin/malli) in this project. Take in consideration we will only be able to realize malli's full power in future iterations. For those without context: the mobile team watched a presentation about malli and went through a light RFC to put everyone on the same page, among other discussions here and there in PRs. To keep things relatively short: 1. Unit, integration and component tests will short-circuit (fail) when inputs/outputs don't conform to their respective function schemas (CI should fail too). 2. Failed schema checks will not block the app from initializing, nor throw an exception that would trigger the LogBox. Exceptions are only thrown in the scope of automated tests. 3. There's zero performance impact in production code because we only instrument. Instrumentation is removed from the compiled code due to the usage of "^boolean js.goog/DEBUG". 4. We shouldn't expect any meaningful slowdown during development. **What are we instrumenting in this PR?** Per our team's agreement, we're only instrumenting the bare minimum to showcase 2 examples. - Instrument a utility function utils.money/format-amount using the macro approach. - Instrument a quo component quo.components.counter.step.view/view using the functional approach. Both approaches are useful, the functional approach is powerful and allow us to instrument anonymous functions, like the ones we pass to subscriptions or event handlers, or the higher-order function quo.theme/with-theme. The macro approach is perfect for functions already defined with defn. **I evaluated the schema or function in the REPL but nothing changes** - If you evaluate the source function, you need to evaluate schema/=> or schema/instrument as well. - Remember to *var quote* when using schema/instrument. - You must call "(status-im2.setup.schema/setup!)" after any var is re-instrumented. It's advisable to add a keybinding in your editor to send this expression automatically to the CLJS REPL, or add the call at the end of the namespace you are working on (similar to how some devs add "(run-tests)" at the end of test namespaces). **Where should schemas be defined?** For the moment, we should focus on instrumenting quo components, so define each function schema in the same namespace as the component's public "view" var. To be specific: - A schema used only to instrument a single function and not used elsewhere, like a quo component schema, wouldn't benefit from being defined in a separate namespace because that would force the developer to constantly open two files instead of one to check function signatures. - A common schema reused across the repo, like ":schema.common/theme" should be registered in the global registry "schema.registry" so that consumers can just refer to it by keyword, as if it was a built-in malli schema. - A common schema describing status-go entities like message, notification, community, etc can be stored either in the respective "src/status_im2/contexts/*" or registered globally, or even somewhere else. This is yet to be defined, but since I chose not to include schemas for them, we can postpone this guideline.
2023-11-18 14:04:48 +00:00
'../test/jest/jestSetup.js',
],
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
reporters: reporters(),
setupFiles: [],
testPathIgnorePatterns: [],
moduleNameMapper: {
'^[@./a-zA-Z0-9$_-]+\\.(png|jpg|jpeg|gif)$':
'<rootDir>/../node_modules/react-native/Libraries/Image/RelativeImageStub',
},
testTimeout: 60000,
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
transformIgnorePatterns: transformIgnorePatterns(),
// This is a workaround after upgrading to Jest 29.7.0, otherwise we get:
//
// SyntaxError: node_modules/@react-native/js-polyfills/error-guard.js:
// Missing semicolon. (14:4)
//
transform: {
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { configFile: './babel.config.js' }],
},
globals: {
__TEST__: true,
},
testEnvironment: 'node',
rootDir: '../../component-spec',
testMatch: ['**/*__tests__*', '**/*.component_spec.js'],
2023-02-21 05:42:33 +00:00
};