Не удается прочитать свойство 'value' при моделировании отправки формы

Question

Я пытаюсь сделать полный тест покрытия Стамбула с шуткой.На данный момент у меня есть почти все протестированные компоненты, но есть функция handleSubmit, где я делаю отправку, получающую данные о событиях формы, и когда я запускаю тест, он сообщает мне

TypeError: Cannot read property 'value' of undefined

      10 |             payload: {
      11 |                 name: name.value,
    > 12 |                 item: item.value, 
         |                            ^
      13 |                 status: status.value  }
      14 |         })
      15 |     }

Я загружаю mockstore, смонтированвсе компоненты, все они протестированы, но отправить все равно не удается.Моя тестовая функция проста:

it('testing submit', () => {
const form = component.find(`[data-test="submit"]`).first()
form.simulate('submit')
... and continues expecting some existences, but there aren't problems there

Я уже пробовал это: Форма отправки имитатора фермента, Не могу прочитать свойство 'value' из неопределенного

И попыталсяанализировать значения событий в действии имитации ...

Полный код модуля ...

class Filters extends Component {
    handleSubmit = event => {
        event.preventDefault()
        const {name, items, status} = event.target;
        this.props.dispatch({
            type: 'SEARCH_PLAYER',
            payload: {
                name: name.value,
                item: item.value, 
                status: status.value  }
        })
    }


    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit} data-test="submit">
                    <div className="form-group col-md-12 text-center"> ...

Еще одна по-настоящему сумасшедшая вещь заключается в том, что мой тест распознает "event.target.name"..value ", а не предметы и статус.На самом деле, если я удаляю предметы и статус из отправки, тест проходит успешно.

Answer 1

То, как вы выбрали обработку значений, немного странно.Вместо этого обрабатывайте значения через state следующим образом: Контролируемые компоненты

Затем вы можете проверить, что this.props.dispatch() был вызван с правильными значениями.

Примечание: избегайтеиспользуя атрибуты data, когда они не нужны, поскольку они начнут засорять ваш DOM лишними атрибутами.У вас есть множество вариантов find element, element.className, className, ... и т. Д. .

Рабочий пример :https://codesandbox.io/s/5j4474rkk (вы можете запустить тест, определенный ниже, нажав на вкладку Tests в левом нижнем углу экрана.

компоненты / Form / Form.js

import React, { Component } from "react";
import PropTypes from "prop-types";

export default class Form extends Component {
  state = {
    test: ""
  };

  static propTypes = {
    dispatch: PropTypes.func.isRequired
  };

  handleChange = ({ target: { name, value } }) => {
    this.setState({ [name]: value });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.dispatch({
      type: "SEARCH_PLAYER",
      payload: {
        test: this.state.test
      }
    });
  };

  render = () => (
    <form onSubmit={this.handleSubmit} className="form-container">
      <h1>Form Testing</h1>
      <input
        className="uk-input input"
        type="text"
        name="test"
        placeholder="Type something..."
        onChange={this.handleChange}
        value={this.state.test}
      />
      <button type="submit" className="uk-button uk-button-primary submit">
        Submit
      </button>
    </form>
  );
}

компоненты / Форма / __ тесты __ / Form.js (shallowWrap и checkProps - это пользовательские функции, которые можно найти в test/utils/index.js)

import React from "react";
import { shallowWrap, checkProps } from "../../../test/utils";
import Form from "../Form";

const dispatch = jest.fn();

const initialProps = {
  dispatch
};

const initialState = {
  test: ""
};

const wrapper = shallowWrap(<Form {...initialProps} />, initialState);
describe("Form", () => {
  it("renders without errors", () => {
    const formComponent = wrapper.find(".form-container");
    expect(formComponent).toHaveLength(1);
  });

  it("does not throw PropType warnings", () => {
    checkProps(Form, initialProps);
  });

  it("submits correct values to dispatch", () => {
    const name = "test";
    const value = "Hello World!";
    const finalValues = {
      type: "SEARCH_PLAYER",
      payload: {
        [name]: value
      }
    };

    wrapper.find("input").simulate("change", { target: { name, value } }); // simulates an input onChange event with supplied: name (event.target.name) and value (event.target.value)

    wrapper
      .find(".form-container")
      .simulate("submit", { preventDefault: () => null }); // simulates a form submission that has a mocked preventDefault (event.preventDefault()) to avoid errors about it being undefined upon form submission

    expect(dispatch).toBeCalledWith(finalValues); // expect dispatch to be called with the values defined above
  });
});

Answer 2

Похоже, вы используете item в строке 12, но извлекаете items из event.target.