React-i18next: Trying to create Enzyme Test with Translate

[Weirdtopia]

I'm currently trying to get Translate to work with Enzyme Testing but i get a response of
**

'undefined is not an object (evaluating '_this.il8n.options')
Translate(Test)@webpack:///~/react-i18next/dist/commonjs/translate.js:66:0 <- tests/test-bundler.js:168038:32'

**

! I'm very new to Enzyme Testing and React !

import React, { Component } from 'react' import { translate } from 'react-i18next' class Test extends Component { render () { return ( <div> TEST </div> ) } }

I'm using Translate HOC
export default translate(['common'])(Test)

ENZYME TESTING
I tried to bypass the HOC by creating my own

import React from 'react'
import { shallow, mount } from 'enzyme'
import Test from 'routes/components/test/test'
import { I18nextProvider } from 'react-i18next'
import il8n from 'i18next'

// i18next

describe('TEST ', () => {
  let _props, _spies, _wrapper
  beforeEach(() => {
    _spies = {}


    let il8nObj = il8n.init()
    il8nObj.options.wait = false
    _props = {
      il8n : il8nObj,
      i18nLoadedAt: null
    }
    _wrapper = shallow(
      <Test {..._props} />
    )
  })
  it('Is it a <div>', () => {
    expect(_wrapper.is('div')).to.equal(true)
  })
})

i also tried to use the I18nextProvider as the parent element of Test
_wrapper = shallow( <I18nextProvider> <Test {..._props} /> </I18nextProvider> ).dive()
but i get the same result when i dive() to get the Test component

Thanks

[jamuhl]

do you want to test your component or the hoc? best option is to export your pure component without the wrapping it with the hoc for tests https://github.com/i18next/react-i18next/issues/233#issuecomment-282683522

if you like to test with hoc have a look at our tests: https://github.com/i18next/react-i18next/blob/master/test/translate.render.spec.js

[jamuhl]

worked out? closing for now...feel free to reopen if needing more help

[oliviertassinari]

Same issue as @Weirdtopia. I want to test the component and the hoc at the same time.
I had to add i18n and ns properties to get the translate() higher-order Component not complaining.

Now, I'm facing the t(key) call to fail with the following error. I haven't found a solution yet:

TypeError: _this5.options.overloadTranslationOptionHandler is not a function
at fixedT (node_modules/i18next/dist/commonjs/i18next.js:336:34)

[jamuhl]

is i18n an initialised i18next instance?

[oliviertassinari]

is i18n an initialised i18next instance?

@jamuhl It wasn't. I was looking into it. The call to t() is working now. I also had to use the shallow API, the mount API of enzyme is making the node instance to crash.
it start with at I18n.onI18nChanged (/app/node_modules/react-i18next/dist/commonjs/I18n.js:149:12)

[jamuhl]

ok...i see...not sure if i can be of any help here - without code ;)

[oliviertassinari]

Isn't it deadcode?
https://github.com/i18next/react-i18next/blob/c221cbb8b3d201f63c1830ce2782b2d5264852e6/src/I18n.js#L104

[jamuhl]

why...it's what sets new loaded date and triggers a rerender on various changes: https://github.com/i18next/react-i18next/blob/c221cbb8b3d201f63c1830ce2782b2d5264852e6/src/I18n.js#L57

[oliviertassinari]

i see...not sure if i can be of any help here

@jamuhl You could add warnings when the instance isn't initialize, you could add a documentation section around how using enzyme with react-i18next. It won't solve my issues, but will help future users trying out the library.
I don't want to be rude, but I have found a lake of refinement around the edge case. For anything from simple-medium complexity, to advanced, there is no way to get along without looking at the source code. I know a pretty large chunk of the internal of the i18n, react-i18n, i18next-express-middleware libraries now 😅.
I wish I could have saved this effort. It makes me wondering if I wouldn't have start from scratch, using your work as inspiration. Anyway, thanks for sharing your work :), It's definitely a step forward in the ecosystem!

triggers a rerender

Exactly, you are storing a dead date object. Maybe you can use the forceUpdate() API of React instead?

[jamuhl]

@oliviertassinari agree on this. And i think i never put down a pull request improving i18next or the documentation. I'm one person supporting some of the most used i18next modules in my free time that's the current situation. I work on locize.com - as soon that grows enough to "buy me more time" for working on i18next i can look into improving such things - until then i depend fully on the help of the community.

Let's make a sample: how should i do a documentation or sample here for electron...i just don't use electron myself (had never the need) and honestly got no time to also look into that in detail.

So covering this topics from your side would help others a lot. But don't expect me to go deeper into electron use case during my weekends ;)

[oliviertassinari]

@jamuhl I 💯 understand. From my experience, it's really hard to cover the edge cases. Let's hope we can find someone in the community with spare time to improve the situation :). Keep the good work ✊ .