Question

我正在为我的项目使用material-ui选择组件。我正在为组件编写测试，但是在测试组件的onChange时遇到问题：这是我组件的代码：

import React from "react";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import FormHelperText from "@material-ui/core/FormHelperText";


const DeliSelect = ({ label, value, onChange, options, errorMessage }) => {
  const inputElement = (
    <FormControl>
      <InputLabel>{label}</InputLabel>
      <Select value={value} onChange={onChange}>
        {options === undefined
          ? null
          : options.map(option => (
              <MenuItem value={option.value} key={option.value}>
                {option.displayValue}
              </MenuItem>
            ))}
      </Select>
      <FormHelperText style={{ color: "red" }}>{errorMessage}</FormHelperText>
    </FormControl>
  );

  return inputElement;
};

export default DeliSelect;

这是测试代码的一部分：

import React from "react";
import { shallow, mount } from "enzyme";

import DeliSelect from "./DeliSelect";
import Select from "@material-ui/core/Select";

const callback = jest.fn();

describe("<DeliSelect />", () => {
  it("Testing if value is successfully passed in", () => {
    const props = {
      value: "test value"
    };
    const wrapper = mount(<DeliSelect {...props} />).find(Select);
    expect(wrapper.props().value).toEqual(props.value);
  });

  it("Testing if options is successfully passed in", () => {
    const props = {
      options: [
        { value: "value in option1", displayValue: "display in option1" },
        { value: "value in option2", displayValue: "display in option2" }
      ]
    };
    const wrapper = mount(<DeliSelect {...props} />).find(Select);
    props.options.map((__, index) => {
      expect(wrapper.props().children[index].props.value).toEqual(
        props.options[index].value
      );
      expect(wrapper.props().children[index].props.children).toEqual(
        props.options[index].displayValue
      );
    });
  });

  it("Testing if callback function works successfully", () => {
    const props = {
      onChange: callback,
      value: "test value"
    };
    const wrapper = mount(<DeliSelect {...props} />).find(Select);
    wrapper.simulate("change", "test value");
    expect(callback).toHaveBeenCalledWith("test value");
  });          ***//this assertion doesn't work***
});

我也尝试这种方式：

 it("Testing if callback function works successfully", () => {
        const props = {
          onChange: callback,
          value: "test value"
        };
        const wrapper = mount(<DeliSelect {...props} />).find(Select);
        wrapper.simulate("change", { target: {value: "test value"} });
        expect(callback).toHaveBeenCalledWith("test value");
      });       
    });

它们都抛出相同的错误：

expected mock function to have been called with ["test value"], But it was not called

如果我尝试wrapper.props().onChange('test value);确实可以，但是我无法模拟它。

任何帮助将不胜感激。

Answer 1

您不应该测试props.onChange？

expect（props.onChange）.toHaveBeenCalledWith（“测试值”）

无法测试material-ui选择组件的事件，引发错误：未调用函数

1 个答案: