Я использую библиотеку Reaction-native-Localization и использую этот фрагмент кода из здесь с небольшими изменениями. Он работает для моих нужд, но у меня возникают проблемы при написании модульных тестов, поскольку его нельзя развернуть, если к нему не прикреплен модульный тест.
По сути, я хочу по крайней мере проверить, что язык можно изменить и приблизиться это с фиктивным компонентом, показанным ниже:
Переводы. js
import AsyncStorage from '@react-native-community/async-storage'; // 1
import React, {createContext, useState} from 'react';
import LocalizedStrings from 'react-native-localization'; // 2
import * as RNLocalize from 'react-native-localize'; // 3
import en from '../localization/en.json';
import ru from '../localization/ru.json';
const DEFAULT_LANGUAGE = 'en';
const APP_LANGUAGE = 'appLanguage';
const languages = {en, ru};
const translations = new LocalizedStrings(languages); // 4
export const LocalizationContext = createContext({ // 5
translations,
setAppLanguage: () => {}, // 6
appLanguage: DEFAULT_LANGUAGE, // 7
initializeAppLanguage: () => {}, // 8
});
export const LocalizationProvider = ({children}) => { // 9
const [appLanguage, setAppLanguage] = useState(DEFAULT_LANGUAGE);
// 11
const setLanguage = language => {
translations.setLanguage(language);
setAppLanguage(language);
AsyncStorage.setItem(APP_LANGUAGE, language);
};
// 12
const initializeAppLanguage = async () => {
const currentLanguage = await AsyncStorage.getItem(APP_LANGUAGE);
if (currentLanguage) {
setLanguage(currentLanguage);
} else {
let localeCode = DEFAULT_LANGUAGE;
const supportedLocaleCodes = translations.getAvailableLanguages();
const phoneLocaleCodes = RNLocalize.getLocales().map(
locale => locale.languageCode,
);
phoneLocaleCodes.some(code => {
if (supportedLocaleCodes.includes(code)) {
localeCode = code;
return true;
}
});
setLanguage(localeCode);
}
};
return (
<LocalizationContext.Provider
value={{
translations,
setAppLanguage: setLanguage, // 10
appLanguage,
initializeAppLanguage,
}}>
{children}
</LocalizationContext.Provider>
);
};
Translations.test. js
import 'react-native';
import React, {useContext} from 'react';
import {View, Text} from 'react-native';
import {renderHook, act} from '@testing-library/react-hooks';
import {LocalizationProvider, LocalizationContext} from '../localization';
import renderer from 'react-test-renderer';
describe('Localizaion', () => {
const DummyComponent: () => React$Node = () => {
return (
<>
<View>
<LocalizationProvider>
<Text>Dummy</Text>
</LocalizationProvider>
</View>
</>
);
};
renderer.create(<DummyComponent />);
const {result} = renderHook(() => useContext(LocalizationContext));
const definition = result.current;
// definition.initializeAppLanguage()
test('should change language', () => {
act(() => {
definition.setAppLanguage('german');
});
expect(definition.translations.getLanguage()).toBe("german")
});
});
Тест не пройден, говоря ожидаемый немецкий но получил "ан". Он всегда возвращает то, что находится первым в словаре языков в хуке. Чего мне не хватает?