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

您只需要将其放在描述上方即可。

用玩笑嘲笑material-ui select组件

1 个答案: