reactjs - 用 Jest 模拟 material-ui 选择组件

Question

我创建了一个 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" });

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

Answer 1

绝对有可能。我刚刚成功破解了它。

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

你只需要将它放在描述之上即可。