在Jest中存根I18next useTranslation钩子不会触发toHaveBeenCalled

如何解决在Jest中存根I18next useTranslation钩子不会触发toHaveBeenCalled

我试图对翻译进行存根/间谍，而不仅仅是模拟它，而且即使在这种最基本的情况下，我似乎也无法触发它。

/**
 * ComponentName.jsx
 */

import { useTranslation } from "react-i18next";

export default function ComponentName() {
  const { t } = useTranslation();

  return <div>t(`index:path`)</div>
}

/**
 * ComponentName.test.jsx
 */

import { shallow } from "enzyme";
import ComponentName from "./ComponentName";
import { useTranslation } from "react-i18next";
jest.mock("react-i18next",() => ({
  useTranslation: () => ({ t: jest.fn(key => key) })
}));

it("calls the translation function",() => {
  const wrapper = shallow(<ComponentName />);

  expect(useTranslation().t).toHaveBeenCalled();
});

当我在console.log(t)中放一个ComponentName.jsx file时，它正确显示它是一个模拟函数。 如果我将t()放在ComponentName.test.jsx文件中，它将通过。

是否有一种方法可以存根，以便最终使用toHaveBeenCalledWith对其进行标记？还是我被降级为在组件上进行contains("index:path")？

---

编辑：所以，当我更新@felixmosh的答案

/**
 * ComponentName.test.jsx
 */


import { mount } from 'enzyme';
import { I18nextProvider } from 'react-i18next';

describe('<SomeComponent />',() => {
  it('dispatches SORT_TABLE',() => {
    const i18nextMock = {
      t: jest.fn(key => key),};
    const enzymeWrapper = mount(
      <I18nextProvider i18n={i18nextMock}>
        <SomeComponent />
      </I18nextProvider>
    );

    expect(i18nextmock.t).toHaveBeenCalled()
  });
});

/**
 * ComponentName.jsx
 */

import { useTranslation } from "react-i18next";

export default function ComponentName() {
  const { t } = useTranslation();

  return <div>t(`index:path`)</div>
}

这是同样的问题。如果t是"a string"而不是jest.fn()，则当我在t中使用console.log ComponentName.jsx进行控制台时，我正确地得到了"a string"。将t记录为jest.fn(key => key)，我正确地得到了一个函数。

但是当我打电话时，我听不懂。

是否有可能与发送给I18nextProvider的实例不同？

解决方法

您应该在代码中改进的2件事：

1. useTransaltion是一个需要context的钩子，请确保使用i18nextProvider包装组件。
2. 实际上，您将嵌套组件切换shallow与mount。
3. 无需模拟任何内容，i18next具有对测试的内置支持。 为了启用它，在为{strong>测试配置lng时，请使用cimode作为i18next。

// i18nForTests.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  lng: 'cimode',// ----- ^
  // have a common namespace used around the full app
  ns: ['translations'],defaultNS: 'translations',interpolation: {
    escapeValue: false,// not needed for react!!
  },resources: { en: { translations: {} } },});

export default i18n;

// SomeComponent.test.js
import { mount } from 'enzyme';
import { I18nextProvider } from 'react-i18next';
import i18n from '../i18nForTests';

describe('<SomeComponent />',() => {
  it('dispatches SORT_TABLE',() => {
    const enzymeWrapper = mount(
        <I18nextProvider i18n={i18n}>
          <SomeComponent />
        </I18nextProvider>
    );
    enzymeWrapper.find('.sort').simulate('click');

    expect(enzymeWrapper.find('#some-text').text()).toEqual('MY_TRANS_KEY');
  });
});

编辑：带有模拟的I18next的版本

// i18nextMock.js
export const i18nextMock = {
  t: jest.fn(),// Do the same for other i18next fields
};

// SomeComponent.test.js
import { mount } from 'enzyme';
import { I18nextProvider } from 'react-i18next';
import i18nextMock from '../i18nextMock';

describe('<SomeComponent />',() => {
    const enzymeWrapper = mount(
        <I18nextProvider i18n={i18nextMock}>
          <SomeComponent />
        </I18nextProvider>
    );
    enzymeWrapper.find('.sort').simulate('click');

    expect(enzymeWrapper.find('#some-text').text()).toEqual('MY_TRANS_KEY');
  });
});