无法使用浅层和酶来测试onChange模拟方法

Question

我无法解决onChange测试，也处理过onClick的问题，但以某种方式成功解决了它。我遵循了Enzyme和Jest的文档，但没有用，遵循了Pluralsight上的2门课程，但结果是相同的，在这里阅读了许多文章和解决方案，但没有通过。我已经发现有关.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');
    });
})

Answer 1

您的组件不会调用props.mockOnChange或props.handleChange等。它只是从事件中获取新值，将其存储在其状态中，并将其呈现为适当输入的值。因此，我们需要验证此行为：

it('', () => {
    let wrapper = shallow(<Contact {...props} />)
    let event = {
        preventDefault: jest.fn(),
        name: 'fullName',
        target: {
            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();