reactjs - 在 Jest 中 stub I18next useTranslation 钩子(Hook)不会触发 toHaveBeenCalled

Question

我正在尝试 stub /监视翻译，而不仅仅是 mock 它，即使在这种最基本的情况下，我似乎也无法触发它。

/**
 * 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文件，它通过。
有没有办法 stub 这个，以便我最终可以用 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() , 当我 console.log t在 ComponentName.jsx , 我正确得到 "a string" ，当我 console.log t如 jest.fn(key => key) ，我正确地得到了一个函数。
但是当我调用它时，我不明白。
是否有可能发送到 I18nextProvider 的实例不是同一个实例？

Answer 1

2 你应该在代码中改进的地方:

useTransaltion是一个需要 context 的钩子(Hook), 确保你用 i18nextProvider 包裹你的组件.

事实上，您将拥有嵌套组件开关 shallow与 mount .

不需要 mock 任何东西，i18next具有内置的测试支持。
为了启用它，请使用 cimode 如 lng配置您的 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 />', () => {
  it('dispatches SORT_TABLE', () => {
    const enzymeWrapper = mount(
        <I18nextProvider i18n={i18nextMock}>
          <SomeComponent />
        </I18nextProvider>
    );
    enzymeWrapper.find('.sort').simulate('click');

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