开玩笑：Material-UI：自动完成的 `getOptionLabel` 方法返回未定义而不是 {} 的字符串

Question

我正在使用 react-testing 库和 jest。我正在尝试从包含 mui 组件的组件测试用户事件。

当我运行以下：

FilterBar.test.js

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MuiThemeProvider } from '@material-ui/core';
import FilterBar from '../../components/FilterBar';
import theme from '../../styles/theme';

FilterBar.test.js:
test('test filter function', () => {
  render(
    <MuiThemeProvider theme={theme}>
      <FilterBar />
    </MuiThemeProvider>
  );
  userEvent.click(screen.getByLabelText('fabButton'));
  screen.debug();
});

我收到这个错误（见图）

这是给出问题的 mui 组件（自动完成）：

FilterDialog.test.js

  <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <List>
              <ListItem>
                <Autocomplete
                  value={tempLocationState}
                  id="combo-box-states"
                  options={stateList}
                  getOptionLabel={(option) => option.state}
                  getOptionSelected={(option) => option.state}
                  style={{ width: 230 }}
                  // eslint-disable-next-line react/jsx-props-no-spreading
                  renderInput={(params) => <TextField {...params} label="State" />}
                  onChange={(event, state) => {
                    setTempLocationState(state);
                  }}
                />
              </ListItem>

当我删除它时（见注释行）

   <Autocomplete
                  // value={tempLocationState}
                  id="combo-box-states"
                  options={stateList}

测试通过，但我希望显示默认值。我还注意到，虽然删除此行时它通过了，但此对话框中的数据实际上在 screen.debug.

中未定义

见下图：

Answer 1

我在模拟我的 childComponent 后通过传递必要的道具解决了这个问题

const mockFilterDialog = jest.fn();
jest.mock('../../components/FilterBar/FilterDialog', () => (props) => {
  mockFilterDialog(props);
  return <mock-FilterDialog />;
});

test('test filter function', () => {
  render(
    <MuiThemeProvider theme={theme}>
      <FilterBar open locationState="Nigeria" />
    </MuiThemeProvider>
  );
  userEvent.click(screen.getByLabelText('fabButton'));
  expect(mockFilterDialog).toHaveBeenCalledWith(
    expect.objectContaining({
      open: true,
      locationState: 'Nigeria',
    })
  );
});
screen.debug();

开玩笑：Material-UI：自动完成的 `getOptionLabel` 方法返回未定义而不是 {} 的字符串

Jest: Material-UI: The `getOptionLabel` method of Autocomplete returned undefined instead of a string for {}

autocomplete

jestjs

material-ui

react-testing-library