存根 I18下一个使用开玩笑中的翻译钩子不会触发 toHaveBeenCall

Question

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

/**
* 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();
});

当我在ComponentName.jsx file中放置一个console.log(t)时，它正确地显示它是一个模拟函数。 如果我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()，当我控制台时.logt在ComponentName.jsx中，我正确地得到"a string"，当我控制台时.logt作为jest.fn(key => key)，我正确地得到一个函数。

但是当我打电话时，我不明白。

是否有可能它不是发送到 I18nextProvider 的同一实例？

Answer 1

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

1. useTransaltion是一个需要context的钩子，请确保用i18nextProvider包裹组件。
2. 事实上，您将有嵌套组件与mountshallow交换。
不需要
3. 嘲笑任何东西，i18next内置了对测试的支持。 为了启用它，在为测试配置i18next时，请使用cimode作为lng。

// 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');
});
});

编辑：带有模拟I18的版本下一个

// 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');
});
});