這是我的組件的抽象版本
const Test = () => {
const { register } = useFormContext();
const mRef = useThirdpartyHook(); // Third party hook returns a ref
const { ref, ...rest } = register('test');
return (
<input
type="text"
name="test"
{...rest}
ref={(e) => {
ref(e);
mRef.current = e;
}}
/>
);
};
export default Test;
測驗用例
import React from 'react';
import { render } from '@testing-library/react';
import { FormProvider } from 'react-hook-form';
import Test from './Test';
describe('<Test> component', () => {
it('renders default correctly', () => {
const wrapper = render(
<FormProvider
{...{ register: () => jest.fn() }}>
<Test />
</FormProvider>
);
expect(wrapper.baseElement).toMatchSnapshot();
});
});
執行此測驗會引發錯誤，如下所示。
<Test> component ? renders default correctly
TypeError: ref is not a function
ref={(e) => {
ref(e);
^
mRef.current = e;
}}
我試圖將 ref 模擬為函式，但沒有幫助。如果有人能提出一些見解，那就太好了。
uj5u.com熱心網友回復：
register是一個回傳輸入需要的道具的函式。您正在模擬該register函式，但它仍然需要回傳組件正在使用或傳遞的所有內容。具體來說，您似乎需要為鉤子ref回傳的內容回傳一個函式。useFormContext
例子：
describe('<Test> component', () => {
it('renders default correctly', () => {
const registerMock = () => ({
ref: jest.fn(),
.... mock other necessary bits here
});
const wrapper = render(
<FormProvider
{...{ register: registerMock }}
>
<Test />
</FormProvider>
);
expect(wrapper.baseElement).toMatchSnapshot();
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/491752.html
標籤：javascript 反应 反应钩子 反应测试库 反应挂钩形式
上一篇：如何在javaScript中對給定的數字和它的反向數字求和
下一篇：在檔案陣列中推送新物件