Cross-platform Picker component with real i18n in tests

README.md

@@ -50,6 +50,8 @@ const HomeScreen = () => {
 
 In the example above, you can see how the library also provides support for date formatting and internationalisation using [date-fns](https://date-fns.org/) package. You can define date's format in the JSON file and pass the date object to the `t` function.
 
+`useTranslation` is available in all components, including Jest tests where it behaves as normal but defaults to the "`cimode`" language code. In Jest, `t` simply returns the (relatively stable) key and language-specific JSON translations are not loaded.
+
 ## Routing
 
 Polaris uses [React Navigation](https://reactnavigation.org/) in Native (Android and iOS), and [React Router DOM](https://reactrouter.com/web/guides/quick-start) in Web. This allows all platforms to be given fully-featured, robust platform-appropriate routing without comprimises.

cypress/integration/i18n.spec.js

@@ -10,7 +10,7 @@ describe('Internationalisation support', () => {
     cy.contains(translationEN.home.settingsButton).click();
 
     // Find the language drop-down and select the Italian language
-    cy.get('#languageSelector').select('it');
+    cy.get('[testID=language-selector]').select('it');
 
     // Check if the Italian title for the Settings page is displayed
     cy.contains(translationIT.settings.title);

jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
     '\\.json': '<rootDir>/jest.jsonTransform.js'
   },
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native|expo-camera|react-native-adapter|react-clone-referenced-element|expo(nent)?|@expo(nent)?/.*|react-native-vector-icons|react-native-vector-icons/.*|react-navigation|react-navigation-redux-helpers|@react-navigation/.*|unimodules-permissions-interface|@expo/vector-icons/.*|@unimodules|@unimodules/.*|jest-expo/.*|sentry-expo|native-base))'
+    'node_modules/(?!((jest-)?react-native|expo-camera|react-native-adapter|react-clone-referenced-element|expo(nent)?|@expo(nent)?/.*|react-native-vector-icons|react-native-vector-icons/.*|react-navigation|react-navigation-redux-helpers|@react-navigation/.*|unimodules-permissions-interface|@expo/vector-icons/.*|@unimodules|@unimodules/.*|jest-expo/.*|sentry-expo|native-base|@react-native-community/picker/js/.+\\.jsx?))'
   ],
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/cypress/'],
   setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js', './jest.setup.js'],

jest.setup.js

@@ -1,8 +1,20 @@
+// Stop jest using .ios in web tests until https://github.com/nearform/polaris/issues/42 is done
+jest.mock('components/atoms/picker-sheet', () => jest.requireActual('components/atoms/picker-sheet/index.jsx'));
+
 jest.mock('services/i18n/common', () => ({
   i18nextConfiguration: {},
-  supportedLocales: {}
+  supportedLocales: {
+    en: {
+      name: 'English'
+    },
+    it: {
+      name: 'Italiano'
+    }
+  }
 }));
 
+require('services/i18n/for-tests'); // activates react-i18n with test config
+
 jest.mock('expo-localization', () => ({
   locale: 'en-US'
 }));