使用 Jest 模擬 React 組件時出現 TypeScript 錯誤 TS2339

Question

我是 mocking 一個使用 Jest 的 React 組件，但 TypeScript 無法識別模擬方法並給出 TS2339 錯誤。

這是我的測試：

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

• 我可以使用@ts-ignore來忽略錯誤，但這是一個 hack。
• 我知道 ts-jest 提供了一個mocked() function 來解決這個問題。 然而這是一個使用 babel 的 create-react-app，所以不想引入 ts-jest。

還有其他方法可以讓 TypeScript 開心嗎？

Answer 1

我想出了一個比@ts-ignore更好的技巧。 這里是：

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

這對我來說已經足夠了，但很高興考慮其他答案。