我对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}
        />
    );
};

我尝试过这样的方法，但我不太确定如何测试直接位于组件窗体上的函数，以及如何将其传递给组件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组件呢？

转载请注明出处:http://www.chuanghaiwei.com/article/20230505/1071762.html

随机推荐

  1. 如何使用jest和测试库来测试typescript应用程序？

    我正在尝试测试typescript应用程序(没有任何js框架)。但对此一无所知。是否可以使用测试库进行测试？有没有人和我分享一个指南，或者帮我测试这个简单的ts文件？下面是我的ts文件和测试文件：export default class M...

  2. 在使用酶和jest时如何在测试中设置状态？

    首先，我有条件地呈现一个组件，该组件依赖于由于useEffect钩子而设置的useState钩子。下面是一个代码示例：function Component() { const [response, setResponse] = useS...

  3. 无法使用nuxt和jest模拟服务

    我有一个叫做External.vue的组件，它包含一个有道具的按钮，也有一个谷歌分析事件，每次点击它都会触发。template div button ref=ctaButtonExternalElement ...

  4. 如何在使用jest和酶对React组件进行单元测试时引用条件元素

    我正在尝试测试一个组件，它应该在用户未通过身份验证时显示登录和订阅按钮，但在用户通过身份验证时显示注销按钮。在进行测试时，我应该如何引用这些按钮？我发现的所有例子都是人们在做这样的事情：expect(wrapper.find(Button)...

  5. 如何在模拟的自定义react钩子更新中使用react- jest library和jest？

    看看下面的自定义钩子。前提是当query更改时，它会更新其状态。export function UseCustomHook() { const { query } = useRouter() const [state, setSta...

  6. 如何使用react测试库和jest测试redux状态更新

    我正在尝试使用jest和react测试库编写一个测试，以查看存储是否更新了状态，以及新状态是否显示在组件内部。我有一个类似这样的组件：import { getName } from src/store/actions/hello/getNa...

  7. 如何使用带有jest和react- test -library的authcontext测试受保护的路由

    我有一个带有受保护路由组件的react应用程序：import React from react; import { Route, Redirect } from react-router-dom; import { AuthConsumer...

  8. 使用JEST的Nodejs如何使用ES6和相对路径导入？

    我想避免这种情况：const SomeMethod = require(../shared/SomeMethod)复制取而代之的是使用更现代的东西，比如：import { SomeMethod } from /shared复制(在幕后)：/...

  9. 如何通过react-testing-library和jest测试使用基于useContext的自定义钩子的代码

    我已经创建了一个自定义的上下文钩子-我正在努力弄清楚如何在测试期间将值传递给它的提供者。我的钩子：import React, { createContext, useContext, useState } from react; cons...

  10. 使用Vue.js和Jest进行网址重定向测试

    我正在尝试编写一个测试，以检查当用户单击“登录”按钮时，URL是否被重定向到/auth/。前端是用Vue.js编写的，测试是用Jest完成的。下面是Vue组件(从UserLogged.vue)重定向的方式。它可以在浏览器中工作。export...