Блог

Ниже приведен мой компонент.

 import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { postJobAction } from './redux/postJobActions';

const PostJobComponent = () => {
  const dispatch = useDispatch();

  const onPostJobSubmit = (event) => {
    event.preventDefault();
    const title = event.target.title.value;
    const location = event.target.location.value; // Here is the error.

    dispatch(postJobAction({
      title,
      location,
    }));
  };

  return (
    <div className='post-job'>
      <form onSubmit={onPostJobSubmit}>
        <div>
          <label>Job Title</label>
          <input
            type='text'
            name='title'
            defaultValue=''
            className='job__title'
            placeholder='e.g. Frontend Developer, Project Manager etc.'
          />
        </div>
        <div>
          <label>Job Location</label>
          <input
            type='text'
            name='location'
            defaultValue=''
            className='job__location'
            placeholder='e.g. Berlin, Germany.'
          />
        </div>
        <div>
          <button>Save</button>
        </div>
      </form>
    </div>
  );
};

export default PostJobComponent;

 

Вот тестовый пример.

 it('should submit job post form on save button click', () => {
        const onPostJobSubmit = jest.fn();
        const instance = wrapper.instance();
        wrapper.find('form').simulate('submit');
        expect(onPostJobSubmit).toHaveBeenCalled();
    });
 

Когда я запускаю тест, я получаю ошибку ниже.

     TypeError: Cannot read property 'value' of undefined

      22 |     const title = event.target.title.value;
    > 23 |     const location = event.target.location.value;
 

Чего мне не хватает и как это исправить?

Как отмечается в .simulate документации

Как отмечено в подписи функции выше, передача фиктивного события необязательна. Имейте в виду, что если код, который вы тестируете, использует событие для чего-то вроде вызова event.preventDefault() или доступа к любому из его свойств, вы должны предоставить объекту фиктивного события свойства, необходимые вашему коду.

попробуйте добавить макет объекта события, как это:

 it('should submit job post form on save button click', () => {
    const onPostJobSubmit = jest.fn();
    const instance = wrapper.instance();
    wrapper.find('form').simulate('submit', {
      target: {
        title: {
          value: 'some value',
        },
        location: {
          value: 'some value'
        }
      }
    });
    expect(onPostJobSubmit).toHaveBeenCalled();
});