formik useformikcontext测试与测试库

Question

我正在尝试为我的输入组件编写一些单元测试，其中大多数已连接到formik，并且在某些情况下，当用户按Special键即（“ Enter”，“”，“，”，“”时，在我的自动完成组件之类的情况下，表单会得到验证。 “等），并生成标签。我希望我的单元测试检查此功能。

我正在使用助手功能在形式包装器中渲染组件，并使用test-test-library使用一些初始值。 我想以某种方式可以访问formik值，而我发现这样做的唯一方法是使用helper函数getformprops我模拟useformikcontext使用renderhook renderhook < /code>来自@testing-library/react-hooks，

export const getFormProps = () => {
    return renderHook(() => useFormikContext<typeof formInitialValues>());
};

我不确定是否有更好的方法来执行此操作，或者是否缺少文档中的某些内容，到目前为止，我尚未管理使它工作。 它总是给我以下错误，

Warning: Formik context is undefined, please verify you are calling useFormikContext() as child of a <Formik> component.

我还尝试了在这里但是，每当我检查表单上的更新时，我总是会获取原始初始数据。

如果有人遇到类似问题，请分享您如何解决这些问题。 预先感谢您

it.only('add a tag', async () => {
    const tree = mountWithForm(<EmailsInput name="emails" label="Label" />);

    const { result } = getFormProps();
    const input = getEditable(tree);
    if (!input) return expect(input).toBe(null);

    expect(result.current.values.emails.length).toBe(0);

    await act(() => {
        fireEvent.change(input, { target: { textContent: newEmail } });
        fireEvent.keyPress(input, { key: 'Enter', code: 'Enter', charCode: 13 });
    });

    await waitFor(() => {
        expect(document.getSelection).toHaveBeenCalledTimes(1);
        expect(document.createRange).toHaveBeenCalledTimes(1);
        expect(input.textContent).toBeEmpty();
        // -----> expect(result.current.values.emails.length).toBe(1)
    });
});

使用以下包：

    "formik": "^2.2.9",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "jest": "^27.5.1",
    "jest-extended": "^2.0.0",
    "react-test-renderer": "^18.0.0",
    "@testing-library/react": "^13.0.1",
    "@testing-library/react-hooks": "^8.0.0",
    "@testing-library/jest-dom": "^5.16.4",