使用 Jest 模拟 React 组件时出现 TypeScript 错误 TS2339

Question

I am mocking a React component using Jest, but TypeScript is not recognizing the mocked methods and giving a TS2339 error.

Here's my test:

jest.mock('./features/News/News');

describe('<App />', () => {
  it('should render the News page on default route', () => {
    // The following line is giving an error:
    // TS2339: Property 'mockImplementation' does not exist on type '() => Element'.
    News.mockImplementation(() => <div>NewsPageMock</div>);

    render(
      <MemoryRouter>
        <App />
      </MemoryRouter>
    );

    expect(screen.getByText('NewsPageMock')).toBeInTheDocument();
  });
});

• I can use @ts-ignore to ignore the error, but that's a hack.
• I understand that ts-jest provides a mocked() function to workaround this. However this is a create-react-app which uses babel, so don't want to introduce ts-jest.

Any other way to make TypeScript happy?

Answer 1

I came up with a better hack than @ts-ignore . Here it is:

(News as jest.Mock).mockImplementation(() => <div>NewsPageMock</div>);

This is good enough for me, but happy to consider other answers.