小编ciz*_*z30的帖子

我是反应测试库的新手

我正在尝试测试我的组件，里面有条件渲染。

是我的组件：

const ComponentA = () => {
   const [isActive, setIsActive] = (false);
   const toggle = () => {
     setIsActive(!isActive)
   }
   return (
     <>
       <div>
         <h1 onClick={toggle}>Title</h1>
       </div>
       {isActive && (<div className="some"><h4>SubTitle</h4></div>)}
     </>
   )
}

这是我的测试：

import React from "react";
import { ComponentA } from "./";
import { render } from "@testing-library/react";

it("renders without crashing", async () => {
  const wrapper = render(
      <ComponentA />
  );
  expect(wrapper).toMatchSnapshot();
  wrapper.unmount();
});

这里测试已通过，但我不想测试 isActive 情况。因此，如果带有 className 的 div 处于活动状态，则某些内容将呈现或不呈现，例如。

我怎样才能做到这一点？

我正在使用 React 和 TypeScript 并尝试将一些数据（例如 prop）传递给子组件并在子组件中使用它。但我收到错误，我不明白为什么会发生以及如何修复它。我也是 TypeScript 的初学者。

这是我的父组件

import * as React from "react";
import ChildComponent from "./ChildComponent";

const data = [
  {
    title: "A",
    id: 1,
  },
  {
    title: "B",
    id: 1,
  },
];

const ParentComponent = () => {
   return (
      <ChildComponent items={data} />
   )
}

export default ParentComponent;

这是项目父组件中的错误

(JSX attribute) items: {
    title: string;
    id: number;
}[]
Type '{ items: { title: string; id: number; }[]; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'items' …

我正在使用反应和打字稿。

我想知道如何使用道具将事件从父母传递给孩子。

例子也是如此

父级.tsx

const ParentComponent: React.FC<ParentProps> = (props) =>  {
   const [activeItem, setActiveItem] = useState("");

   const getActiveItem = (e: React.MouseEvent, title: string) => {
      setActiveItem(title)
   };

   return (
      <ChildComponent activeItem={activeItem} clickHandler={(e) => getActiveItem(e, 'TITLE')} /> 
   )
}

孩子.tsx

interface ChildProps {
  activeItem: string;
  clickHandler: () => any;
}


const ChildComponent: React.FC<ChildProps> = (props) =>  {
   return (
      <button onClick={props.clickHandler} /> {props.activeItem} </button>
   )
}

在父组件上，我在 clickHandler 上遇到错误：

Type '(e: any) => void' is not assignable to type '() => …

我有 React 和 TypeScript 项目。这是我在某些组件中的文件夹结构，例如：

 - ComponentFolder
  - index.tsx
  - types.d.ts
  - ChildComponent
    - index.tsx

我知道，如果我将类型放入组件目录根目录中的types.d.ts文件中，我可以在此目录中的 childComponents 中使用这些类型。

所以我尝试了；

我的types.d.ts文件：

export type CommonProps = {
  openItem: string;
  getValue: (e: React.MouseEvent) => void;
};

并在子组件中：

import * as React from "react";

const ChildComponent: React.FC<CommonProps> = (props) => {
  return (
    <div>
      {props.openItem}
    </div>
  );
};

export default ChildComponent;

但出现错误：

cannot find CommonProps error.

我如何知道目录中是否有一些文件 d.ts 我可以在该目录中使用这些类型而无需导入。

我哪里弄错了？

我在我的项目中使用 react-testing-library & jest。

我的问题是：当我测试我的父组件时，我可以将我的子组件与测试隔离吗？

这是我的组件：

export const Parent: FC = ({items}) => {
   return (
      <>
        <ListComponent items={items} />
        <ChildWillBeIsolated /> 
      </>
   )
}

这是我的测试：

import React from "react";
import { Parent as Component } from "./";
import { render } from "@testing-library/react";

const items = [
     {
      title: "A"
      id: 1
     },
     {
      title: "B"
      id: 2
     }
]

it("renders without crashing", async () => {
  const wrapper = render(
      <Component items={items} />
  );
  expect(wrapper).toMatchSnapshot();
  wrapper.unmount();
});

所以在这里我 …