Testing

Test a component that reads translations without loading real locale files. provideMockTranslations stands in for the whole translation store.

@mmstack/translatenpm

#Echo the keys

With no configuration, provideMockTranslations() makes every t() call return its key in dot notation. That is usually what you want in a unit test: you assert that the right key was rendered, not that a particular English string came back, so a copy change never breaks the spec.

import { provideMockTranslations } from '@mmstack/translate';

TestBed.configureTestingModule({
  providers: [provideMockTranslations()],
});

// in the component, t('quote.pageTitle') now returns 'quote.pageTitle'
expect(el.textContent).toContain('quote.pageTitle');

#Return real strings

When a test needs actual output, pass translations keyed by namespace. Add formatValues: true to run the ICU formatting over your parameters, so plural and select messages resolve the way they do at runtime.

import { provideMockTranslations } from '@mmstack/translate';

TestBed.configureTestingModule({
  providers: [
    provideMockTranslations({
      formatValues: true,
      translations: {
        quote: {
          pageTitle: 'Famous Quotes',
          count: '{n, plural, one {# quote} other {# quotes}}',
        },
      },
    }),
  ],
});

Either way, no namespace loaders run and no locale files are fetched. The mock replaces the store, so a component under test reads translations synchronously.