模拟 React 组件中使用的 class 函数

Question

我正在尝试模拟一个在我的 React 组件中调用的函数。这是一个示例，其中包含函数 getContent()。我如何在测试中设置自己的 return 值？

Component.test.tsx :

describe('TEST', () => {
 it('test', () => {
  ...
  expect.assertions(1);
  renderer = render(<MyComponent></MyComponent>)
  expect(renderer.toContain('myValue')) 
  }
)}

MyComponent.tsx :

export const MyComponent = (props) => {
 const externalClass = new classFromAnotherFile()
 const content = externalClass.getContent()
  return (
    <View>
     content={content}
    </View>
}

AnotherFile.tsx

export class classFromAnotherFile {
 constructor(...){}
 getContent(): string { ... }
}

Answer 1

随便找解决方案，文档里的所有解决方案，最后一个是好的：

const getContentMock = jest
  .spyOn(YourClass.prototype, 'getContent')
  .mockImplementation(() => {
    console.log('mocked function');
  });

模拟 React 组件中使用的 class 函数

Mock a class function used inside a React component

reactjs

jestjs

react-native

react-tsx

ts-jest