ReactJs: TypeError: 无法读取未定义的jest酶的属性 "name"。

问题描述 投票:0回答:1

你好,我正试图为我的一个react组件编写单元测试,但我一直得到相同的错误TypeError.Cannot读取未定义的属性'name'。Cannot read property 'name' of undefined. 我把我的状态作为 defaultValue 并用 ''. 我所有的测试与 shallow 都失败了。

这是我的文件。

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

  React.useEffect(() => {
    dispatch(getProfileDataAction());
  }, [dispatch]);

  const profileReducer = useSelector(
    (state) => state.profileReducer.profileData,
  );
  const [name, setNewName] = React.useState('');
  const [phone, setNewPhone] = React.useState('');


  const handleNewName = (event) => {
    setNewName({ [event.target.name]: event.target.value });
  };

  const handlenewPhone = (event) => {
    setNewPhone({ [event.target.name]: event.target.value });
  };

  const handleProfileSubmit = (event) => {
    event.preventDefault();
    dispatch(editProfileAction(name, phone));
  };

  return (
        <EditProfile
            onNameChange={handleNewName}
            onPhoneChange={handlenewPhone}
            onProfileSubmit={handleProfileSubmit}
            profileState={profileReducer}
        />
  );
};

export default EditProfileContainer;

我是这样使用 profileState 支持。

const EditProfile = ({
  onNameChange, onPhoneChange, onProfileSubmit, profileState,
}) => (
        <>
            <p className='account-title'>ACCOUNT DETAILS</p>

            <Card className='registery-card mb-5'>
                <Card.Body>
                    <Form className='password-form' onSubmit={onProfileSubmit}>
                        <Form.Group controlId='formBasicProfile'>
                            <Form.Label className='password-label'>
                                Name
                            </Form.Label>
                            <Form.Control
                                size='sm'
                                type='text'
                                placeholder='Enter Name'
                                name='name'
                                defaultValue={'' || profileState.name}
                                pattern={`${pattern}`}
                                title='First name or Last name must contain at least three characters'
                                className='password-text-field'
                                onChange={onNameChange}
                            />
                        </Form.Group>
                        <Form.Group controlId='formBasicProfilePhone'>
                            <Form.Label className='password-label'>
                                {' '}
                                Phone
                            </Form.Label>
                            <Form.Control
                                size='sm'
                                type='number'
                                placeholder='New Phone number'
                                defaultValue={'' || profileState.phone}

                                name='phone'
                                className='password-text-field'
                                onChange={onPhoneChange}
                            />
                        </Form.Group>
                        <Button
                            variant='primary'
                            type='submit'
                            className='register-btn d-inline float-right mt-3'
                            onSubmit={onProfileSubmit}
                        >
                            Save
                        </Button>
                    </Form>
                </Card.Body>
            </Card>
        </>
);

export default EditProfile;

这是错误的

 TypeError: Cannot read property 'name' of undefined

      23 |                                 placeholder='Enter Name'
      24 |                                 name='name'
    > 25 |                                 defaultValue={'' || profileState.name}
         |                                                                  ^
      26 |                                 pattern={`${pattern}`}
      27 |                                 title='First name or Last name must contain at least three characters'
      28 |                                 className='password-text-field'

reactjs react-redux react-hooks
1个回答
0
投票

profileState 对象是 undefined因此,试图访问其 name prop会抛出一个错误。你可以显式地检查它是否存在,也可以为 profileState或者使用类似于可选链的东西。profileState?.name

© www.soinside.com 2019 - 2024. All rights reserved.