React Functional 組件上的 jest.mock - render 沒有返回任何內容

Question

我使用干凈的 Create React App 實例和 React Testing 庫

$ npx create-react-app test-app
...
$ npm install --save @testing-library/react @testing-library/jest-dom

然后我創建簡單的功能組件

./Chleb.js:

import React from 'react';

const Chleb = () => <div>chleb</div>;

export default Chleb;

在默認的 App.js 中：

import React from 'react';
import Chleb from "./Chleb";

function App() {
  return (
    <div className="App">
      <Chleb />
    </div>
  );
}

export default App;

然后，在 App.test.js 中：

import React from 'react';
import { render  } from '@testing-library/react';
import App from './App';

jest.mock('./Chleb');

describe('<App /> tests', () => {
  it('Should render the component correctly', () => {
    const {container} = render(<App/>);
    expect(container).toMatchSnapshot();
  });
});

產生什么：

Error: Chleb(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

我認為 Jest 或 RTL 不支持箭頭功能？

這真的很奇怪，但是當我將 Chleb.js 轉換為舊的 React Class 組件時，它可以正常工作。 當我在jest.mock('...', fn)中提供手動fn模擬實現時，它也有效。

是否需要為 React Functional 組件提供手動模擬實現，或者這是某種錯誤？

Answer 1

嘗試在玩笑配置中將 resetMocks 設置為 false