Question

我正在使用玩笑和酶测试材质UI TextField。在文本字段上模拟更改事件后，该值不会更新。在无状态组件中进行测试时，我是否缺少某些东西？

textfield.spec.js

it("on input change should call onChange function passed through props",()=>{
    const handleChange = jest.fn();
    let props = {
        label: 'Test Label',
        type: 'text',
        name: 'email',
        value: "Hello World",
        index: 0,
        input: {},
        defaultValue:'default',
        meta: {
            touched: true,
            error: 'error'
        },
        onChange:handleChange,
    }
    const wrapper = mount(<Textfield {...props}/>);
    wrapper.find('input').simulate('change',{target:{name:'email',value:"hello"}});
    wrapper.update();
    expect(handleChange).toHaveBeenCalled();     
    expect(wrapper.find('input').prop('value')).toBe("hello")
  })

Textfield.js

import React from 'react';
import TextField from '@material-ui/core/TextField';
import './style.scss';
const Textfield = (props) => {
  const {label,value,onChange,className,name,id,onKeyDown,multiline,index,error,inputProps,errorMsg,isDisabled} = props;
  return (
    <TextField
      error={error}
      id={id}
      label={error ? "Incorrect Field" : label}
      variant="filled"
      value={value}
      onChange={onChange}
      classname={className}
      name={name}
      onKeyDown={onKeyDown}
      multiline={multiline}
      helperText={error && "Incorrect Field."}
      inputProps={{
        ...inputProps,
        'data-testid': id
      }}
      disabled={isDisabled}
    />
  );
};

export default Textfield;

Answer 1

我想说，测试任何material-ui组件的正确方法是更改其道具，在这种情况下，就是更改value道具。

此外，正如@UKS所指出的那样，您已经嘲笑了onChange函数，因此不要惊讶该值不会改变。

开玩笑+酵素：不会更新物料输入值

1 个答案: