用玩笑模拟material-ui选择组件

Posted 2023-02-22

【中文标题】用玩笑模拟material-ui选择组件

【英文标题】：Mocking of material-ui select component with jest

【发布时间】：2019-09-20 16:23:17

【问题描述】：

我创建了一个 React 组件，我正在尝试使用 React Testing Library 进行测试。在我的组件中，我有以下选择组件及其更改处理程序

Component.jsx

<SingleSelect
  name="filter"
  label="Status"
  value=this.state.weatherStatus
  options=this.state.weatherStatusOptions
  onChange=this.handleFilterChange
  testId="status"
/>

onChange handleFilterChange函数

handleFilterChange = (event) => 
  this.setState( weatherStatus: event.value );

传递值this.state.weatherStatus 的示例是 id: 1, text: "cool weather" 为此，我尝试编写如下样机。

jest.mock('@material-ui/core/Select', () => props => (
  <div>
    <input
      onChange=(e) => props.onChange( target:  value: e.target.value )
      value=props.value
      data-testid=props['data-testid']
    />
    props.children
  </div>
));

fireEvent.change(getByTestId('select'),  target:  value:  id: 1, text: "cool"   );
expect(getByTestId('select').value).toEqual( id: 1, text: "cool" );

但它根本不起作用。有什么建议吗？

【问题讨论】：

我很确定 react-test-library 不适用于 Material-UI。我一直试图让 fireEvents 工作好几天，但它没有发生。

您可以添加更多数据吗？你在测试中呈现什么？ SingleSelect 长什么样子？你得到什么错误？

【参考方案1】：

这绝对是可能的。我只是设法破解它。

jest.mock('@material-ui/core/Select', () => (...rest)=> 
   return(  
     <div>
       <input
         data-testid='mock-component'
       />
   </div>
   )
 );

你只需要把它放在描述上面。