Skip to content

[Translator] Importing translator.js with UX React breaks Jest when translating a fetch response #2622

Open
@dukeofgaming

Description

@dukeofgaming

After importing trans from translator.js, when using a fetch mock my Jest tests for my React component explode:


  ● Given a logged out user › When user inputs non-existing email › Then should display an error message

    TypeError: Cannot read properties of undefined (reading 'translations')

      247 |         locale = getLocale();
      248 |     }
    > 249 |     if (typeof message.translations === 'undefined') {
          |                        ^
      250 |         return message.id;
      251 |     }
      252 |     const localesFallbacks = getLocaleFallbacks();

      at translations (vendor/symfony/ux-translator/assets/dist/translator_controller.js:249:24)
      at _callee$ (assets/react/components/Login/OTPLogin.jsx:80:52)
      at call (assets/react/components/Login/OTPLogin.jsx:2:1)
      at Generator.tryCatch (assets/react/components/Login/OTPLogin.jsx:2:1)
      at Generator._invoke [as next] (assets/react/components/Login/OTPLogin.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.jsx:2:1)

  ● Given a logged out user › When user inputs non-existing email › Then should display an error message

    expect(element).toHaveTextContent()

    Expected element to have text content:
      Email not found
    Received:

      172 |             );
      173 |
    > 174 |             expect(alertBox).toHaveTextContent('Email not found');
          |                              ^
      175 |             
      176 |
      177 |         });

      at toHaveTextContent (assets/react/components/Login/OTPLogin.test.jsx:174:30)
      at call (assets/react/components/Login/OTPLogin.test.jsx:2:1)
      at Generator.tryCatch (assets/react/components/Login/OTPLogin.test.jsx:2:1)
      at Generator._invoke [as next] (assets/react/components/Login/OTPLogin.test.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.test.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.test.jsx:2:1)

  ● Given a logged out user › When user inputs existing email but email fails to send › Then should display a failure message

    TypeError: Cannot read properties of undefined (reading 'translations')

      247 |         locale = getLocale();
      248 |     }
    > 249 |     if (typeof message.translations === 'undefined') {
          |                        ^
      250 |         return message.id;
      251 |     }
      252 |     const localesFallbacks = getLocaleFallbacks();

      at translations (vendor/symfony/ux-translator/assets/dist/translator_controller.js:249:24)
      at _callee$ (assets/react/components/Login/OTPLogin.jsx:80:52)
      at call (assets/react/components/Login/OTPLogin.jsx:2:1)
      at Generator.tryCatch (assets/react/components/Login/OTPLogin.jsx:2:1)
      at Generator._invoke [as next] (assets/react/components/Login/OTPLogin.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.jsx:2:1)

  ● Given a logged out user › When user inputs existing email but email fails to send › Then should display a failure message

    expect(element).toHaveTextContent()

    Expected element to have text content:
      Email could not be sent
    Received:

      213 |             );
      214 |
    > 215 |             expect(alertBox).toHaveTextContent('Email could not be sent');
          |                              ^
      216 |         });
      217 |     });
      218 |     describe('When user inputs existing email and email is sent', () => {

      at toHaveTextContent (assets/react/components/Login/OTPLogin.test.jsx:215:30)
      at call (assets/react/components/Login/OTPLogin.test.jsx:2:1)
      at Generator.tryCatch (assets/react/components/Login/OTPLogin.test.jsx:2:1)
      at Generator._invoke [as next] (assets/react/components/Login/OTPLogin.test.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.test.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.test.jsx:2:1)

  ● Given user is logged in › When the component loads › Then should display user was logged in and logout button

    TypeError: Cannot read properties of undefined (reading 'translations')

      247 |         locale = getLocale();
      248 |     }
    > 249 |     if (typeof message.translations === 'undefined') {
          |                        ^
      250 |         return message.id;
      251 |     }
      252 |     const localesFallbacks = getLocaleFallbacks();

      at translations (vendor/symfony/ux-translator/assets/dist/translator_controller.js:249:24)
      at _callee$ (assets/react/components/Login/OTPLogin.jsx:80:52)
      at call (assets/react/components/Login/OTPLogin.jsx:2:1)
      at Generator.tryCatch (assets/react/components/Login/OTPLogin.jsx:2:1)
      at Generator._invoke [as next] (assets/react/components/Login/OTPLogin.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.jsx:2:1)
      at asyncGeneratorStep (assets/react/components/Login/OTPLogin.jsx:2:1)

(node:13092) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
C:\wamp64\www\CXPMod\vendor\symfony\ux-translator\assets\dist\translator_controller.js:223
  if (typeof message.translations === 'undefined') {
                     ^

TypeError: Cannot read properties of undefined (reading 'translations')
    at trans (C:\wamp64\www\CXPMod\vendor\symfony\ux-translator\assets\dist\translator_controller.js:223:22)
    at _callee$ (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:120:69)
    at tryCatch (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:54:1062)
    at Generator.<anonymous> (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:54:3008)
    at Generator.next (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:54:1699)
    at asyncGeneratorStep (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:55:70)
    at _next (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:56:163)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)

Node.js v23.5.0
(node:1616) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
C:\wamp64\www\CXPMod\vendor\symfony\ux-translator\assets\dist\translator_controller.js:223
  if (typeof message.translations === 'undefined') {
                     ^

TypeError: Cannot read properties of undefined (reading 'translations')
    at trans (C:\wamp64\www\CXPMod\vendor\symfony\ux-translator\assets\dist\translator_controller.js:223:22)
    at _callee$ (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:120:69)
    at tryCatch (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:54:1062)
    at Generator.<anonymous> (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:54:3008)
    at Generator.next (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:54:1699)
    at asyncGeneratorStep (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:55:70)
    at _next (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:56:163)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)

Node.js v23.5.0
(node:19048) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
C:\wamp64\www\CXPMod\vendor\symfony\ux-translator\assets\dist\translator_controller.js:223
  if (typeof message.translations === 'undefined') {
                     ^

TypeError: Cannot read properties of undefined (reading 'translations')
    at trans (C:\wamp64\www\CXPMod\vendor\symfony\ux-translator\assets\dist\translator_controller.js:223:22)
    at _callee$ (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:120:69)
    at tryCatch (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:54:1062)
    at Generator.<anonymous> (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:54:3008)
    at Generator.next (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:54:1699)
    at asyncGeneratorStep (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:55:70)
    at _next (C:\wamp64\www\CXPMod\assets\react\components\Login\OTPLogin.jsx:56:163)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)

Node.js v23.5.0
 FAIL  assets/react/controllers/Hello.test.jsx
  ● Test suite failed to run

    Jest worker encountered 4 child process exceptions, exceeding retry limit

      at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:181:21)

Test Suites: 3 failed, 3 total
Tests:       4 failed, 12 passed, 16 total
Snapshots:   0 total
Time:        8.793 s
Ran all test suites related to changed files.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions