web-dev-qa-db-fra.com

Comment puis-je me moquer de réagir-i18next et i18n.js en blague?

package.json

"moduleNameMapper": {
  "i18next": "<rootDir>/__mocks__/i18nextMock.js"
}

i18n.js

import i18n from 'i18next'
import XHR from 'i18next-xhr-backend'
// import Cache from 'i18next-localstorage-cache'
import LanguageDetector from 'i18next-browser-languagedetector'

i18n
  .use(XHR)
  // .use(Cache)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en',
    // wait: true, // globally set to wait for loaded translations in translate hoc
    lowerCaseLng: true,
    load: 'languageOnly',
    // have a common namespace used around the full app
    ns: ['common'],
    defaultNS: 'common',
    debug: true,

    // cache: {
    //   enabled: true
    // },

    interpolation: {
      escapeValue: false, // not needed for react!!
      formatSeparator: ',',
      format: function (value, format, lng) {
        if (format === 'uppercase') return value.toUpperCase()
        return value
      }
    }
  })

export default i18n

i18nextMock.js

/* global jest */
const i18next = jest.genMockFromModule('react-i18next')
i18next.t = (i) => i
i18next.translate = (c) => (k) => k

module.exports = i18next

Pour une raison quelconque, les tests unitaires jest n'obtiennent pas de composant.

Voici un test unitaire:

import React from 'react'
import { Provider } from 'react-redux'
import { MemoryRouter } from 'react-router-dom'
import { mount } from 'enzyme'

import { storeFake } from 'Base/core/storeFake'
import Container from '../container'

describe('MyContainer (Container) ', () => {
  let Component;

  beforeEach(() => {
    const store = storeFake({})

    const wrapper = mount(
      <MemoryRouter>
        <Provider store={store}>
          <Container />
        </Provider>
      </MemoryRouter>
    )

    Component = wrapper.find(Container)
  });

  it('should render', () => {
    // Component is undefined here
    expect(Component.length).toBeTruthy()
  })
})
reactjsjestjsi18nextreact-i18next
8
chovy

avez-vous déjà jeté un coup d'œil aux tests dans le dépôt rea-i18next lui-même? https://github.com/i18next/react-i18next/blob/master/test/trans.render.spec.js

De plus, il existe une petite introduction au test sur https://react.i18next.com/misc/testing.html

4
jamuhl

Vous n'avez pas besoin de vous moquer de la fonction t, seule la translate est requise. Pour le second, votre utilisation des paramètres prête à confusion, vous devez également renvoyer un composant.

J'ai pu le faire fonctionner sur mon projet. Voici mon fichier fictif et ma configuration Jest

Configuration Jest

"moduleNameMapper": {
    "react-i18next": "<rootDir>/__mocks__/reacti18nextMock.js"
}

Le code source à simuler react-i18next

/* global jest */
import React from 'react'

const react_i18next = jest.genMockFromModule('react-i18next')

const translate = () => Component => props => <Component t={() => ''} {...props} />

react_i18next.translate = translate

module.exports = react_i18next
1
Atemu

J'ai utilisé Artemus answer dans mes tests de plaisanterie, mais j'ai fini avec la ligne suivante dans la maquette:

module.exports = {t: key => key};

Aussi modifié jest config aussi puisque j'importe 't' de 'i18next':

"moduleNameMapper": {
    "i18next": "<rootDir>/__mocks__/reacti18nextMock.js"
}
1
Joe Wong