react-intl#IntlProvider JavaScript Examples

fetch(messagesPath)
.then(response => response.json())
.then(response => {
  ReactDOM.render(
    <React.StrictMode>
      <IntlProvider messages={response} locale={language} defaultLocale={language}>
        <ReactBreakpoints breakpoints={breakpoints}>
          <App />
        </ReactBreakpoints>
      </IntlProvider>
    </React.StrictMode>,
    document.getElementById('root')
  );
})

App = (props) => {
  const [theme, changeTheme] = useState(themes.purple);
  const { locale } = props;

  useEffect(() => {
    Object.keys(theme).map((key) => {
      const value = theme[key];
      return document.documentElement.style.setProperty(key, value);
    });
    return;
  });

  const navBar =
    useLoggedIn() === true ? (
      <MyNavBar data-testid="theNavBar" brandName="ViaDe_en1b"></MyNavBar>
    ) : null;

  return (
    <IntlProvider key={locale} locale={locale} messages={locales[props.locale]}>
      <ThemeContext.Provider value={{ theme, changeTheme }}>
        <div data-testid="theApp" className="App">
          <Routing navBar={navBar} />
          <Footer></Footer>
        </div>
      </ThemeContext.Provider>
    </IntlProvider>
  );
}

render() {
    const {language} = this.context;
    const _language = !language || language === 'vi' ? 'vi' : 'en';
    const {messages, children} = this.props;

    return (
      <IntlProvider
        locale={_language}
        key={_language}
        messages={messages[_language]}
        textComponent={Text}>
        {React.Children.only(children)}
      </IntlProvider>
    );
  }

LanguageWrapper = ({ children }) => {
  const dispatch = useDispatch();

  let { locale } = useSelector(
    (state) => ({
      locale: state.preferences.locale,
    }),
    shallowEqual
  );

  if (!locale) {
    locale = availableLocales.includes(browserLocale) ? browserLocale : 'en';
    dispatch(setUserLocale(locale));
  }

  return (
    <IntlProvider
      locale={locale}
      defaultLocale="en"
      messages={messages[locale]}
    >
      {children}
    </IntlProvider>
  );
}

render = Component => {
  ReactDOM.render(
    <IntlProvider locale={locale} messages={translations[locale]} defaultLocale='en'>
      <AppContainer>
        <Component />
      </AppContainer>
    </IntlProvider>,
    roolEl
  );
}

describe('<ExperimentRunsList />', () => {
  it('Expect to not log errors in console', () => {
    const spy = jest.spyOn(global.console, 'error');
    const dispatch = jest.fn();
    render(
      <IntlProvider locale={DEFAULT_LOCALE}>
        <ExperimentRunsList dispatch={dispatch} />
      </IntlProvider>,
    );
    expect(spy).not.toHaveBeenCalled();
  });

  it('Expect to have additional unit tests specified', () => {
    expect(true).toEqual(false);
  });

  /**
   * Unskip this test to use it
   *
   * @see {@link https://jestjs.io/docs/en/api#testskipname-fn}
   */
  it.skip('Should render and match the snapshot', () => {
    const {
      container: { firstChild },
    } = render(
      <IntlProvider locale={DEFAULT_LOCALE}>
        <ExperimentRunsList />
      </IntlProvider>,
    );
    expect(firstChild).toMatchSnapshot();
  });
});

describe('<HospitalCard />', () => {
  let hospitalCard
  beforeEach(() => {
    const store = mockStore({})
    hospitalCard = render(<Provider store={store}><IntlProvider locale='en' messages={messagesEn}><HospitalCard hospitalNeeds ={hospitalNeeds} key={hospitalNeeds.id}></HospitalCard></IntlProvider></Provider>)
  })

  it('Should not show Form Makers dialog', () => {
    expect(hospitalCard.queryByText('Submit')).toBeFalsy()
  })

  it('Should show Form Makers dialog', () => {
    fireEvent.click(hospitalCard.getByText('Contact'))
    expect(hospitalCard.getByText('Submit')).toBeTruthy()
  })
})

function initImageBrowser(element, settings) {
    const {
        onSelectCallback,
        locale,
        onToggleCallback,
    } = settings;

    const i18nData = (locale !== null ? addLanguage(locale) : i18nDefault);

    ReactDOM.render(
        <IntlProvider {...i18nData}>
            <ImageBrowserContainer
                onSelect={onSelectCallback}
                locale={locale}
                onToggle={onToggleCallback}
            />
        </IntlProvider>,
        element
    );
}

ReactDOM.render(
  <IntlProvider
    locale={activeLocale}
    defaultLocale="en"
    messages={activeMessages}
  >
    <App
      style={{ flex: "1", display: "flex", positon: "relative", width: "100%" }}
    />
  </IntlProvider>,
  document.getElementById("root")
);

describe('<Footer />', () => {
  let store;

  beforeAll(() => {
    store = configureStore({}, browserHistory);
  });

  it('should render and match the snapshot', () => {
    const renderedComponent = renderer
      .create(
        <Provider store={store}>
          <IntlProvider locale="en">
            <Footer />
          </IntlProvider>
        </Provider>,
      )
      .toJSON();

    expect(renderedComponent).toMatchSnapshot();
  });
});

Localization = ({ children, settings: { locale } }) => {
  const currentLocale = locales[locale]
  return (
    <ConfigProvider locale={currentLocale.localeAntd}>
      <IntlProvider locale={currentLocale.locale} messages={currentLocale.messages}>
        {children}
      </IntlProvider>
    </ConfigProvider>
  )
}

describe('<ChannelItem />', () => {
  let store;

  beforeAll(() => {
    store = configureStore({}, browserHistory);
  });

  it('should render a <button> tag', () => {
    const { container } = render(
      <Router>
        <Provider store={store}>
          <IntlProvider locale={DEFAULT_LOCALE}>
            <ChannelItem />
          </IntlProvider>
        </Provider>
      </Router>,
    );
    expect(container.querySelector('button')).not.toBeNull();
  });

  it('should have a class attribute', () => {
    const { container } = render(
      <Router>
        <Provider store={store}>
          <IntlProvider locale={DEFAULT_LOCALE}>
            <ChannelItem />
          </IntlProvider>
        </Provider>
      </Router>,
    );
    expect(container.querySelector('button').hasAttribute('class')).toBe(true);
  });
});

App = () => {
	return (
		<Provider store={store}>
			<IntlProvider locale="pt">
				<Prevent />
				<div className="container">
					<ConfigContainer />
					<StatusContainer />
				</div>
			</IntlProvider>
		</Provider>
	)
}

LocaleProvider = (props) => {
  const { children, locale, setLocale } = props;

  const myLocale = localeInfos[locale]
    ? localeInfos[locale]
    : localeInfos[LOCAL_ZH_CN];

  return (
    <LocalContext.Provider value={{ locale, setLocale }}>
      <IntlProvider locale={myLocale.appLocale} messages={myLocale.appMessages}>
        <ConfigProvider locale={myLocale.nextLocale}>
          {React.Children.only(children)}
        </ConfigProvider>
      </IntlProvider>
    </LocalContext.Provider>
  );
}

export function mountWithIntl(node) {
    return mount(node, {
        wrappingComponent: IntlProvider,
        wrappingComponentProps: {
            locale,
            defaultLocale,
        },
    });
}

function renderComponent(postId) {
  render(
    <IntlProvider locale="en">
      <AppProvider store={store}>
        <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
          <DiscussionContent />
          <Route
            path="*"
            render={({ location }) => {
              testLocation = location;
              return null;
            }}
          />
        </MemoryRouter>
      </AppProvider>
    </IntlProvider>,
  );
}

export function SpanishIntlProvider(props: Props) {
  // Not ideal that these side effect functions (polyfillIntl, addLocaleData)
  // are happening directly in the render, since render will be executed many
  // times. Hesitant to change that behavior right now without understanding
  // intl/react-intl more deeply.
  polyfillIntl(props.userLanguage);

  let intlMessages;
  if (props.userLanguage === 'es') {
    intlMessages = spanishMessages;
    addLocaleData(localDataEs);
  }

  const locale = LanguageToLocale[props.userLanguage];
  return (
    <IntlProvider defaultLocale="en-US" locale={locale} messages={intlMessages}>
      <IntlProviderNewContextAdapter>{props.children}</IntlProviderNewContextAdapter>
    </IntlProvider>
  );
}

describe('<BankCards />', () => {
  it('should render a BankCards', () => {
    const { container } = render(
      <IntlProvider locale={DEFAULT_LOCALE}>
        <BankCards />
      </IntlProvider>,
    );
    expect(container.firstChild).toMatchSnapshot();
  });
});