Question

我使用带有 React 测试库的干净的 Create React App 实例

df2 = df.loc[df['date_1'] <= df['date_2'], 'date_1'].to_frame('date_3')

然后我创建简单的功能组件

./Chleb.js:

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

在默认的 App.js 中：

import React from 'react';

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

export default Chleb;

然后，在 App.test.js 中：

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

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

export default App;

产生什么：

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

我认为 Jest 或 RTL 不支持箭头函数？

这真的很奇怪，但是当我将 Chleb.js 转换为旧的 React Class 组件时，它可以正常工作。当我在 Error: Chleb(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. 中提供手动 fn 模拟实现时，它也有效。

是否需要为 React Functional 组件提供手动模拟实现，或者这是某种错误？

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

0 个答案: