Невозможно проверить событие выбора материала-интерфейса, выдается ошибка: функция не вызывается - PullRequest
Новая
       27

Невозможно проверить событие выбора материала-интерфейса, выдается ошибка: функция не вызывается

0 голосов
/ 29 января 2019

Я использую компонент выбора материала для своего проекта.Я пишу тест для компонента, но у меня есть проблема с тестированием 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);, но яне могу имитировать.

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 29 января 2019

Вы не должны тестировать props.onChange?

Ожидайте (props.onChange) .toHaveBeenCalledWith ("test value")

...