reactjs - 带有 JSX 道具的组件在 ezyme 浅包装上失败

Question

我正在尝试从采用JSX propSelect的 material-UI 中测试组件。input

我收到以下错误Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s。

删除input线通过了测试，但这不是目的。

一般信息：

• 我在反应 16 上使用酶
• 这是尝试使用浅 eznyme 方法和酶到 json 的组件的浅快照
• 这仅在测试时失败，实施方式基于此示例https://codesandbox.io/s/qicub?file=/demo.js第 70 行

零件：

const SelectControl = ({
  classes,
  customClass,
  options,
  controlValue,
  setControlValue,
}: Props) => (
  <FormControl className={customClass}>
    <Select
      value={controlValue}
      onChange={(event) => setControlValue(event.target.value)}
      input={<SelectInput />}
  >
      {!!placeHolder && (
        <MenuItem value="" disabled className={classes.dropdownItem}>
          <Typography variant="subtitle1">{placeHolder}</Typography>
        </MenuItem>
      )}
      {options.map(({ value, description }) => (
        <MenuItem value={value} key={value} className={classes.dropdownItem}>
          <Typography variant="subtitle1">{description}</Typography>
        </MenuItem>
      ))}
    </Select>
  </FormControl>
);

测试：

test('renders correctly WITHOUT the optional props', () => {
    // WHEN
    const tree = shallowSnapshot(<SelectControl {...commonProps} />);

    // THEN
    expect(tree).toMatchSnapshot();
  });

浅快照实现：

const shallowSnapshot = (Component) =>
  toJson(shallow(Component), {
    mode: 'shallow',
  });

标签： reactjsunit-testingmaterial-uienzyme