A simple, autogenerated integration test fails for a component using a translation in ember-intl 6.1.2

[Gaurav0]

• I am on the latest ember-intl version
• I have searched the issues of this repo and believe that this is not a duplicate

Environment

• Ember Version: 4.12
• Ember CLI Version: 4.12
• Ember Intl Version: 6.1.2
• Browser(s): Chrome
• Node Version: 16

Steps to Reproduce

1. Create a new repo
2. cd <repo-name>
3. ember install ember-intl@6.1.2
4. ember generate my-component
5. Edit translations/en-us.yaml to include a simple translation: hello: Hello World!
6. Edit my-component.hbs to include the translation {{t 'hello'}}
7. Include my-component in application.hbs <MyComponent />
8. Run npm test

Reproduction

https://github.com/Gaurav0/bug-ember-intl-int-test

Output

[test:ember] not ok 1 Chrome 117.0 - [73 ms] - Integration | Component | my-component: it renders
[test:ember]     ---
[test:ember]         stack: >
[test:ember]             Error: Assertion Failed: You attempted to update `_locale` on `<IntlService:ember101>`, but it had already been used previously in the same computation.  Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.
[test:ember]             
[test:ember]             `_locale` was first used:
[test:ember]             
[test:ember]             - While rendering:
[test:ember]               -top-level
[test:ember]                 application
[test:ember]                   index
[test:ember]                     my-component
[test:ember]             
[test:ember]             Stack trace for the update:
[test:ember]                 at dirtyTagFor (http://localhost:7357/assets/vendor.js:40327:37)
[test:ember]                 at setter (http://localhost:7357/assets/vendor.js:40545:7)
[test:ember]                 at IntlService.set [as _locale] (http://localhost:7357/assets/vendor.js:9495:7)
[test:ember]                 at set locale [as locale] (http://localhost:7357/assets/vendor.js:78656:22)
[test:ember]                 at IntlService.setLocale (http://localhost:7357/assets/vendor.js:78851:19)
[test:ember]                 at new IntlService (http://localhost:7357/assets/vendor.js:78711:12)
[test:ember]                 at IntlService.create (http://localhost:7357/assets/vendor.js:18422:20)
[test:ember]         message: >
[test:ember]             global failure: Error: Assertion Failed: You attempted to update `_locale` on `<IntlService:ember101>`, but it had already been used previously in the same computation.  Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.
[test:ember]             
[test:ember]             `_locale` was first used:
[test:ember]             
[test:ember]             - While rendering:
[test:ember]               -top-level
[test:ember]                 application
[test:ember]                   index
[test:ember]                     my-component
[test:ember]             
[test:ember]             Stack trace for the update:
[test:ember]         negative: >
[test:ember]             false
[test:ember]         browser log: |
[test:ember]             {"type":"error","text":"\n\nError occurred:\n\n- While rendering:\n  -top-level\n    application\n      index\n        my-component\n\n"}
[test:ember]             {"type":"error","text":"\n\nError occurred:\n\n\n\n"}
[test:ember]             {"type":"warn","text":"Attempted to rerender, but the Ember application has had an unrecoverable error occur during render. You should reload the application after fixing the cause of the error."}
[test:ember]     ...

[kdagnan]

I am also experiencing this error on Ember 3.28 (development mode & tests) with Ember-intl 6.1.2. It seems to occur when using a template helper if the service hasn't been injected anywhere else yet. Injecting @service intl into my application route seemed to fix it, but doesn't help tests. Lots of failing tests.

This is a very similar error to what you'd receive from updating a @Tracked variable (used in the template) in a constructor() of a glimmer component.

[ijlee2]

To confirm, did you follow the migration guide in https://ember-intl.github.io/ember-intl/docs/guide/migration-5-0-to-6-1#missing-setupintl-results-in-a-runtime-error?

[Gaurav0]

@ijlee2 Nope. I would not expect to need to follow a migration / upgrading guide when creating an app for the first time with the latest version. This probably needs to be in the README.

[ijlee2]

For this addon, I don't think the README is a good place, as there is a dedicated documentation site. https://ember-intl.github.io/ember-intl/versions/v6.1.2/docs/guide/testing shows the syntax for rendering tests. I'll go ahead with closing the issue.

[kdagnan]

If anyone wants to avoid having to add this hook to every test, this instance-initializer worked for me to solve tests. Might be slightly slower than choosing specific tests to add the setupIntl(hooks) but way easier and don't need to always remember to do this when writing new tests:

export default {
  initialize: function (application) {
    const env = application.resolveRegistration('config:environment');
    const intl = application.lookup('service:intl');
   
    if(env === 'test'){
      intl.setLocale('en-us');
    }
  }
};

[ijlee2]

@kdagnan I recommend customizing setupRenderingTest() instead of an instance initializer. The best way is to call setupIntl() only when needed, to make the dependencies of a test clear and to avoid deprecated patterns such as an implicit service injection.

https://github.com/ember-cli/ember-cli/blob/v5.4.0/blueprints/app/files/tests/helpers/index.ts#L27-L35