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