測驗用打字稿撰寫的自定義反應鉤子-有解無憂

我有一個useForm用 TS 撰寫的自定義鉤子，它作業得很好。用@testing-library/react-hooks. 測驗通過。但是打字稿在一個特定的地方抱怨 - 見下文：

這是自定義鉤子：

import { useState } from 'react';

export function useForm<T>(initialValues: T) {
  const [values, setValues] = useState(initialValues);

  return {
    values: values,
    handleChange: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
      setValues({
        ...values,
        [e.target.name]: e.target.value,
      });
    },
    reset: () => setValues(initialValues),
  };
}

這是測驗：

import { renderHook, act } from '@testing-library/react-hooks';

import { useForm } from './useForm';

test('should render useForm hook', () => {
  const { result } = renderHook(() =>
    useForm({
      text: 'Note One',
    }),
  );

  expect(result.current).toBeDefined();
  expect(result.current.values.text).toBe('Note One');

  act(() => {
    result.current.handleChange({
      target: { //complains here - Type '{ name: string; value: string; }' is not assignable to type 'EventTarget & (HTMLTextAreaElement | HTMLInputElement)'.
        name: 'text',
        value: 'Note Two',
      },
    });
  });

  expect(result.current.values.text).toBe('Note Two');

  act(() => {
    result.current.reset();
  });
  expect(result.current.values.text).toBe('Note One');
});

這是一個作業代碼沙箱：https ://codesandbox.io/s/flamboyant-curie-6i5moy?file=/src/useForm.test.tsx

uj5u.com熱心網友回復：

我將change使用Event()建構式創建一個事件。并使用設定此事件的事件目標Object.defineProperty(event, 'target', {value: {}, writable: false})，另請參見此答案。然后使用型別轉換轉換event as unknown as React.ChangeEvent<HTMLInputElement>事件。

例如

import "@testing-library/react-hooks/lib/dom/pure";
import { renderHook, act } from "@testing-library/react-hooks";

import { useForm } from "./useForm";

test("should render useForm hook", () => {
  const { result } = renderHook(() =>
    useForm({
      text: "Note One"
    })
  );

  expect(result.current).toBeDefined();
  expect(result.current.values.text).toBe("Note One");

  const event = new Event("change");
  Object.defineProperty(event, "target", {
    value: {
      name: "text",
      value: "Note Two"
    },
    writable: false
  });

  act(() => {
    result.current.handleChange(event as unknown as React.ChangeEvent<HTMLInputElement>);
  });

  expect(result.current.values.text).toBe("Note Two");

  act(() => {
    result.current.reset();
  });
  expect(result.current.values.text).toBe("Note One");
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/436140.html

標籤：反应打字稿反应钩子反应测试库反应打字稿

上一篇：為什么這種型別聯合在打字稿中被決議為交集？

下一篇：AttributeError:'unicode'物件沒有屬性'pop'-Python字典串列