使用 jest 和 testing-library 测试组件内的函数

Question

我是 testing-library 和 jest 的新手，我正在尝试测试组件内部的一个函数，该函数会更改输入的值。该组件是一个表单，另一个组件是它的输入。

export const Form = () => {
    const [name, setName] = useState("");
    const handleOnSubmit = e => {
        e.preventDefault();
        const form = e.target;
    };
    const inputChange = (param) => (e) => {
        const inputValue = e.target.value;
        setName(inputValue);
    };
    return (
        <form className="form" onSubmit={handleOnSubmit}>
            <InputGroup text="name" type="text" value={name} functionality={inputChange("name")}/>
            <Button type="submit"  disabled={name === undefined}/>
        </form>
    );
};

export default Form;

InputGroup 组件如下所示

export const InputGroup = ({type, id, value, required, functionality, text}) => {
    return (
        <label>{text}</label>
        <input className="input" type={type} id={id} name={id} value={value}
            required={required} onChange={functionality}
        />
    );
};

我已经尝试过类似的方法，但我不太确定如何测试直接在组件 Form 上的函数以及它正在传递给组件 InputGroup。

describe("Form", () => {
    let value;
    let component;
    const handleSubmit = jest.fn();
    const handleChange = ev => {
        ev.preventDefault();
        value = ev.currentTarget.value;
    }
    beforeEach(() => {
        component = render(
            <Form onSubmit={handleSubmit} functionality={handleChange} />
        );
    });
    it("check error name is triggered", () => {
        const input = component.getByText("name");
        fireEvent.change(input, {target: {value: "aaa"}});
    });
});

我收到一条错误消息，上面写着“给定元素没有值设置器”，那么如何将 inputChange 函数传递给 InputGroup 组件？

Answer 1

好的，感谢分享InputGroup。这样您就可以轻松测试InputGroup。

describe("InputGroup", () => {
  it("check error name is triggered", () => {
    const fn = jest.fn()
    render(<InputGroup functionality={functionality} />)
    fireEvent.change(input, {target: {value: "aaa"}});
    expect(fn).toHaveBeenLastCalledWith(...)
  });
});

只是一个想法。上面的代码可能不会像发布的那样运行。好的，现在来到Form。该步骤可能类似，但可能需要一些时间来解决，但您无需再次测试功能，因为此道具与Form 无关。从表单的角度来看，它只关心onSubmit，因此您可以使用之前发布的类似方式对其进行测试。