Question

我正在使用react-native-localization库，并使用here中的这段代码进行了一些修改。它确实可以满足我的需要，但是编写单元测试时遇到了问题，因为除非附加了单元测试，否则它无法部署。

基本上，我想至少测试一下该语言是否可以更改，并通过下面的虚拟组件显示来进行处理：

Translations.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")
  });


});

该测试未能说出预期的德语，但得到了“ en”。它始终返回挂钩中语言词典中的第一个。我想念什么？

单元测试反应本地定位钩子

0 个答案: