反应酶修饰浅渲染功能成分内部

Question

import {useTranslation} from 'react-i18next';
// ...

const MyComponent: React.FC<IProps> = (props: IProps) => {

  const {t, ready} = useTranslation('my-translation-namespace');
  // ...

  return (
    <React.Fragment>
      {ready &&
        <div className="my-component">some more content...</div>
      }
    </React.Fragment>)
};
export default MyComponent;

describe('MyComponent', () => {

  let component: ShallowWrapper;

  it('should be displayed', () => {
    component = shallow(<MyComponent/>);

    // HERE I WOULD LIKE TO SET: component.ready = true

    expect(component.find('.my-component').length).toBe(1);
  });
});

知道如何在我的测试中将ready属性更改为true吗？

Answer 1

这可以通过使用JEST模拟react-i18next模块来实现。

js prettyprint-override">const mockT = jest.fn((a) => a)
const mockReady = true
jest.mock('react-i18next', () => 
  jest.fn().mockImplementation(() => ({
    useTranslation: () => ({ t: mockT, ready: mockReady })
  }))
);

如果您正在使用ES模块，请参阅文档或本文；如果您正在使用其他选项，请参阅本答案。

编辑：如果传递一个普通对象，则使用模块工厂作为jest.mock的第二个参数。