React-i18next: Using hooks breaks jest tests

[DavidCasillasRivero]

Describe the bug
Using hooks as in the provided example https://github.com/i18next/react-i18next/tree/master/example/react-hooks breaks jest tests with: Jest encountered an unexpected token

Details:

    /home/azureuser/Downloads/react-i18next-master/example/react-hooks/node_modules/react-i18next/hooks.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export {

Occurs in react-i18next version

    "name": "react-i18next",
    "version": "8.3.8"

To Reproduce

Clone the repo and run tests in the hooks example:

1.cd example/react-hooks
2.npm test

Expected behaviour
Tests can be run using hooks.

The error description thrown provides a solution, including in Jest configuration an exception to allow the offending file to be processed by babel.

To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.

The problem is that using create-react-app the transformIgnorePatterns option is not everridable.

Context

I'm starting a new long term project from scratch and want to start using hooks from the begining. Is there any workaround so I can write tests using hooks, while next version with full support for hooks is available?

[jamuhl]

not yet had time to look into testing using jest -> that's a point still open to the upcoming v10 release: https://github.com/i18next/react-i18next/issues/591

So it would be awesome if you look into this and share your solution

[DavidCasillasRivero]

I'm sorry I would love to help but I'm not much confident with the module system and build process in javascript.

The problem points to a file not being compiled by babel so Jest finds an unexpected export token. I have reviewed the build system and seems everything is compiling as far as I can tell. If I can find any workaround I will post.

[isaachinman]

I've seen (what I think is) this issue before in professional projects.

Simple solution is to just require babel-register.

@jamuhl I'm very busy at the moment but I can look into this if no one else has time.

[jamuhl]

@isaachinman i will look into this in future - future means on my way to add tests for the hooks version here...

i love to see early adoption - but it's like it is ... not yet ready for primetime

[DevanB]

Has anyone else had time to look into this? I've tried a few times, but don't have the knowledge to understand the issue.

[lvl99]

I'm getting the same error as OP because when I import the file into my code like so:

import { withTranslation, Trans } from "react-i18next/hooks";

... it references the non-transpiled ES hooks file here: https://github.com/i18next/react-i18next/blob/master/hooks.js

I'm using create-react-app which doesn't transpile files in the node_modules folder.

[lvl99]

I've referenced a compiled version of the hooks file instead:

  import { withTranslation, Trans } from "react-i18next/dist/commonjs/hooks";

Might pay to update the documentation to consider the CRA aspect.

[jamuhl]

@lvl99 currently /react-i18next/hooks.js uses the dist/es files -> when going on production with the hooks version we will do the same as for current version setting the entry points in package.json

  "main": "dist/commonjs/index.js",
  "jsnext:main": "dist/es/index.js",
  "module": "dist/es/index.js",

[DevanB]

@lvl99 Thanks for the insight into this! I've successfully gotten it working, with tests passing.

I do see a console warning in my tests, but seems to only be a warning and not stoping compilation or breaking anything seemingly:

console.warn node_modules/react-i18next/dist/commonjs/hooks/utils.js:17
  react-i18next:: You will need pass in an i18next instance by using i18nextReactModule

[lvl99]

@DevanB I think currently the hooks mode is not suitable for use within CRA, as possibly mentioned by @jamuhl in his reply to my message.

I get the same error as you mention above and there's no way for me to test the ES version unless I create an app outside of CRA (or eject, which I don't want to do just yet).

[jamuhl]

@lvl99 @DevanB https://github.com/i18next/react-i18next/tree/master/example/react-hooks is a CRA - the problem currently is only testing which should be gone by time of release

be aware hooks are not yet in react.js - so it's ok to play with them - but do not yet build on it with production in mind

[lvl99]

Thanks @jamuhl, thought that might be the case. As it happens I'm currently attempting to assess the react-i18next package to replace react-intl and testing was a big hassle with react-intl, since when mounting elements for snapshot testing with enzyme would embed the whole dictionary.

[panjiesw]

Just got hit by this today :sweat_smile:

Another alternative of temporary jest test using the hooks variant is jest manual mock.

// src/__mocks__/react-i18next/hooks.js
const mocked = require('react-i18next/dist/commonjs/hooks');
module.exports = mocked;

This way, you can still use react-i18next/hooks in your code, but in tests jest will "mock" it by returning the commonjs module version

[jamuhl]

should be solved by installing npm i react-i18next@next or npm i [email protected]

[helixbass]

@jamuhl when I tried installing react-i18next@next (looks like it installed [email protected]) I still got Jest encountered an unexpected token errors, eg:

.../node_modules/react-i18next/hooks.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export {
                                                                                         ^^^^^^

SyntaxError: Unexpected token export

> 1 | import {useTranslation} from 'react-i18next/hooks'
...

Then if I enabled transpiling node_modules/react-i18next using transformIgnorePatterns (I'm in an ejected CRA), I got failures:

Cannot find module './dist/es/hooks' from 'hooks.js'

[panjiesw]

@helixbass I think you don't need to import react-i18next/hooks anymore. Version 10.0.0 will come with hooks by default so all features which came in react-i18next/hooks is available in react-i18next now.

[helixbass]

@panjiesw ah thanks, looks like everything is working when I updated my imports to just use react-i18next 👍

@DevanB I was also seeing those console warnings when running tests, you can avoid them by initializing i18next in the test environment. Eg if you have a module i18n-init.js which calls i18n.use(initReactI18next).init(...), just import that i18n-init module in your tests (individually or just once using Jest's eg setupFiles)

[jamuhl]

guess we could close this now...if still some issues arise - feel free to open a new issue