React Functional 组件上的 jest.mock - render 没有返回任何内容

Question

I use clean Create React App instance with React Testing library

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

Then I create simple Functional Component

./Chleb.js:

import React from 'react';

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

export default Chleb;

In default App.js:

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

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

export default App;

then, in the 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();
  });
});

What yields:

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

I think that either Jest or RTL is not supporting arrow functions?

That's really strange, but when I convert Chleb.js to old React Class component, it works correctly. It also works, when I provide manual fn mock implementation in the jest.mock('...', fn) .

Is it required to provide manual mock implementation for React Functional components, or is this some kind of bug?

Answer 1

try setting resetMocks as false in jest config