NextJS with i18n support testing

[rdagostino]

I'm working Next 13, next-i18next and Cypress 11 and developing an application that responds to API requests and displays different components/content based on the locale defined in our environment variables that are set during our pipeline build.

The locale is set at application start

module.exports = {
  i18n: {
    defaultLocale: 'en-US',
    locales: ['en-US', 'en-GB'],
    localeDetection: false,
    domains: [
      {
        domain: getDomain(),
        defaultLocale: process.env.DEFAULT_LOCALE,
        http: process.env.NODE_ENV === 'development',
      },
    ],
  },
};

Based on the locale set we define a configuration for feature flags that we enable/disable accordingly. The features are utilized in two ways:

1. Through getStaticProps|getServerSideProps in which we get the flag values and pass them through to their respective React components. We take this approach to avoid flashing in the application when accessing pages directly.
2. A custom hook which will access the flags when needed

Then when using Cypress, I want to test the differences in displays based on that locale. However, I'm unable to find a solution to do this.

I've reached out on the Cypress discord and was given some direction to look at mocking props

A small reproducible repo for this issue -> https://github.com/rdagostino/cypress-i18n

Any ideas or suggestions around this is greatly appreciated.