Невозможно протестировать метод имитации onChange с мелким и с ферментом - PullRequest
Новая
       6

Невозможно протестировать метод имитации onChange с мелким и с ферментом

1 голос
/ 12 января 2020

Я не могу справиться с тестированием onChange, также имел дело с проблемами с onClick, но каким-то образом мне удалось справиться с этим.
Я следовал документам Enzyme и Jest, и это не сработало, прошел 2 курса на Pluralsight, и все же результат был тем же, прочитайте много статей и решение здесь, но все же это не пройдет. Я узнал об устаревании функции.simulate () и попробовал props.onChange.

Я буду рад любой помощи.

Это компонент, который я хотел бы проверить: 

    const [details, setdetails] = useState(
        {
            fullName: '',
            email: '',
            phone: ''
        }
    )
    const [errors, setErrors] = useState({});
    const [isValid, setValid] = useState(false);

    const handleChange = event => {
        let { name, value } = event.target;
        console.log(value, name, event.target);
        event.preventDefault();
        setdetails(prevDetails => ({
            ...prevDetails,
            [name]: value
        }));

    }
   return (
        <div className="contact" id="contact">
            <div className="logo"></div>
            <div className="contact-title">
                <h6>PLEASE LEAVE YOUR DETAILS BELOW AND WE’LL CONTACT YOU</h6>
            </div>
            <div className="fields">
                <form>
                    <div className="input-field">
                       <label>Full Name:</label>
                       <input name="fullName" placeholder="Full Name" onChange={handleChange}
                   />
                       <div className="text-danger">{errors.fullName}</div>
                  </div>
                  <div className="input-field">
                    <label>Email:</label>
                    <input name="email" placeholder="Email" onChange={handleChange} 
                  />
                    <div className="text-danger">{errors.email}</div></div>
                 <div className="input-field">
                     <label>Phone:</label> 
                     <input name="phone" placeholder="Phone Number" onChange={handleChange} 
                 />
                     <div className="text-danger">{errors.phone}</div>
                </div>
                <div>
                        <button type="submmit" 
                          className="btn-dark button"
                          onClick={handleClick}
                        >Submit</button>
                </div>
             </form>
            </div>
        </div>
    )

Попытки тестирования: 

describe('', () => {
    it('', () => {
        let mockOnChange = jest.fn();
        const props = {
            mockOnChange: mockOnChange
        }
        let wrapper = shallow(<Contact {...props} />)
        console.log(wrapper.debug());
        let event = {
            preventDefault: () => { },
            name: 'fullName',
            target: {
                value: 'test'
            }

        }
        wrapper.find('input').at(0).props().onChange({ event })
        expect(mockOnChange).toHaveBeenCalledWith('test');
    })
    it('second assertion', () => {
        let mockOnChange = jest.fn();
        let name = 'fullName';
        let value = 'test';
        let wrapper = shallow(<Contact onChange={mockOnChange} />)
        console.warn(mockOnChange);
        wrapper.instance().onChange({ target: { name, value } });
        expect(mockOnChange).toHaveBeenCalled('test');
    })
    it('', () => {
        let handleChange = jest.fn();
        let mockName = 'fullName';
        let mockValue = 'test';
        let wrapper;
        wrapper = shallow(<Contact onChange={handleChange} />);
        wrapper.find('input').at(0).simulate('change', {
            preventDefault: () => { },
            target: {
                name: mockName,
                value: mockValue
            }
        })
        expect(handleChange).toHaveBeenCalledWith("test");

    })
})


describe("simulate onchange input fileds", () => {
    let wrapper;
    let mockOnChange;
    beforeEach(() => {
        mockOnChange = jest.fn();
        const props = {
            mockOnChange: mockOnChange
        }
        wrapper = shallow(<Contact {...props} />);
    });
    it('first assertion', () => {

        wrapper.find('input').at(0).simulate('change', {
            preventDefault: () => { },
            target: { value: 'test' }
        })
        expect(mockOnChange).toBeCalledWith("test");
    })

    it('should call onChange prop', () => {
        const event = {
            preventDefault: () => { },
            target: {
                name: 'fullName',
                value: 'test'
            }
        };
        const component = shallow(<Contact onChange={mockOnChange} />);
        component.find('input').at(0).props().onChange('change', event);
        expect(mockOnChange).toBeCalledWith('test');
    });
})

1 Ответ

1 голос
/ 13 января 2020

Ваш компонент не вызывает props.mockOnChange или props.handleChange или что-то подобное. Он просто берет новое значение из события, сохраняет его в своем состоянии и отображает как значение для соответствующего ввода.

Также в настоящее время ваш компонент вообще не использует details для рендеринга. Я ожидаю, что это выглядит как 

<input 
  name="fullName" 
  placeholder="Full Name" 
  onChange={handleChange}
  value={details.fullName}
/>

И тогда мы сможем проверить это поведение (также обратите внимание на структуру event, в вашем коде вы устанавливаете свойство name снаружи target подобъект): 

it('', () => {
    let wrapper = shallow(<Contact {...props} />)
    let event = {
        preventDefault: jest.fn(),
        target: {
            name: 'fullName',
            value: 'test'
        }

    }
    wrapper.find('input[name="fullName"]').simulate('change', event)
    expect(wrapper.find('input[name="fullName"]').prop('value')).toBe('test');
    expect(wrapper.find('input[name="email"]').prop('value')).toBe('');
    expect(event.preventDefault).toHaveBeenCalled();
...