# Helping with translations - Tues-Fri 5th-8th Jan, 2021

### Translations

We have a Spanish speaking client going live, which has meant a big scramble to get the app and site localised and translated into `es_US`.

C+ was ready, but other React apps were not. As people have still been off after Christmas, and newer devs working on translating some of the web React apps using the i18n techniques I did first in Connect+, it was a busier than expected week!

One of the newer devs struggled updating React tests for components that either now used the `useTranslation` hook (and thus required the test to now include the i18n provider), or had to add new GraphQL queries to the component (such as a query to fetch user data to know what locale that user is in).

I had to help unblock this newer dev by setting up a reusable `MockedProvider` for their tests:

const mockedResponses: MockedResponse[] = [
    userMeQuery,
    translationsQueryMock,
    // ... add more mocks here that you want to always apply
]

/** Use this in all component tests that require i18n or Apollo queries */
export const MockedProvider: React.FC<MockedProviderProps> = ({ mocks = [], ...props }) => (
    <ApolloMockedProvider mocks={[...mockedResponses, ...mocks]} {...props}>
        <I18nProvider>{children}</I18nProvider>
    </ApolloMockedProvider>
)

And then show them how to properly refactor a tests to check the translation strings are applying.

### Flipper

For the longest time Flipper was not working on C+ iOS. It turns out this was because of a version mismatch between the Flipper client I had installed, and the version listed in the `Podfile`:

https://github.com/facebook/flipper/issues/1534
https://fbflipper.com/docs/getting-started/react-native-android/

###### tags: `programmingjournal` `2021` `translationlocalisation` `flipper` `mockedprovider`