小编Sub*_*aik的帖子

我创建了一个简单的计数器应用程序用于学习react testing library。但是当我测试段落是否用{count}文本呈现时，我陷入了困境。

主.jsx

function Main() {
  const [Count, setCount] = useState(0);

  function handleCount() {
    setCount((c) => c + 1);
  }
  return (
    <div>
      <h1>Counter App</h1>
      <Counter count={Count} />
      <Button label="Click me" handleCount={handleCount} />
    </div>
  );
}

计数器.jsx

function Counter({ count }) {
  return <p>{count}</p>;
}

主要规范.jsx

it("should render count", () => {
    render(<Main />);
    expect(screen.getByRole("paragraph")).toBeInTheDocument();
});

这个测试还不足以通过。我知道我们可以添加data-testid到<p>DOM 节点，然后我们可以通过getByTestId查询来测试它。但我想知道为什么我上面使用的测试用例getByRole('paragraph')每次都会失败。

我已经使用生成的 Yoeman 主题创建了一个新的自定义主题，现在当我按下F5打开自定义主题的新主机扩展窗口时，它实际上显示我选择环境？

我在 Visual Studio Code 中运行 JUnit 时遇到了各种各样的问题。我有两个主要问题，它们在我创建的所有项目中都不共存。

问题 1：创建并运行 Java 项目后，如果我尝试添加 JUnit 测试类，程序找不到该类/测试。我应该看到一个选项来运行或调试我的测试，但没有弹出这样的选项。此外，当我单击测试资源管理器选项卡时，我没有看到列出的测试类，但它位于项目文件夹中。

问题 2：我将一个最初在 eclipse 中开发的项目导入到 VS 代码中取得了一些成功。这并不理想。这样做时，我遇到的问题是 VS Code 在 JUnit 导入方面存在问题。有时它无法识别 @Test 注释，并会尝试通过让我在程序中进行导入来解决导入问题，（例如：使用 assertSame 方法时，我必须编写： org.junit.Assert.assertEquals("stringName", v1.getName);

Has anyone had similar problems, or does anyone have some insight on how to run a java project without a maven or another project manager? I'm sure there is a way to make this work, but I feel like I'm missing the obvious.

我想在输入字段中使用react-hook-form. 首先，我从 API 端点检索用户数据，然后将状态设置users为该用户数据。然后我将状态传递users给defaultValuesof useForm()。

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";

function LoginFile() {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    axios
      .get("http://localhost:4000/users/1")
      .then((res) => setUsers(res.data));
  }, []);

  useEffect(() => {
    console.log(users);
  }, [users]);

  const { register, handleSubmit, errors } = useForm({
    defaultValues: users,
  });
 return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        Email <input type="email" name="email" ref={register} /><br />
        firstname …

我正在使用Material-UI React Drawer。有没有办法让抽屉限制在页面的特定部分而不是占据整个窗口？我试过给根组件一个绝对位置而不是固定位置，但这不会改变抽屉的位置。

<div className="confirmation-drawer">
   <Drawer
       anchor="top" 
       open={state.top} 
       onClose={toggleDrawer('top', false)}>
      <!-- Drawer content goes here -->
    </Drawer>
</div>

我需要.confirmation-drawerdiv内的抽屉而不是整个页面。任何帮助将不胜感激。

我在 Github 中创建了一个远程存储库并将我的项目推送到该远程存储库中。推送后，创建了一个新分支master，现在我有两个分支main和master. 默认分支是main哪个不应该是。在创建远程存储库时，我添加了一个Readme.md文件，可能是因为main首先创建了该分支。你能在这里纠正我吗？

截至目前，我有两个分支，我将默认分支更改为master. 对于main分支，它显示为main had recent pushes 43 minutes ago和compare & pull request按钮。当我单击按钮时，它显示如下。

当main创建分支，是因为加入Readme.md的文件？当我独自开发一个小项目时，我该如何做拉取请求？需要一些指导。

我想向父 div 添加一个垂直滚动条，因为在下面的设置中，子 div 的高度远大于父 div 的高度。我在 W3 学校读过，默认情况下overflow: auto;，如果子 div 的高度超过父 div 的高度，它将添加滚动条。但下面的设置并不能证明这一点。帮助我理解这一点。

根据 W3 学校 CSS 文档，

如果高度设置为数值（如像素、(r)em、百分比），那么如果内容不适合指定的高度，它将溢出。容器如何处理溢出的内容由溢出属性定义。

我们如何证明上述说法的合理性呢？

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
}

<div class="parentDiv">
  <div class="childDiv">

  </div>
</div>

@编辑：默认情况下overflow: visible;，它不是自动的。我读错了。

下面的代码不接受行和列的数组

这是 antd 的例子：

const data = [];
for (let i = 0; i < 4; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32
    //  address: `London, Park Lane no. ${i}`
  });
}

Tried same logic in below: 
// columns :datacloumns1
// rows :rowdata

const data = [];
for (let i = 0; i < 4; i++) {
   for (var j = 0; j < reportDataRows?.length; j++){
  data.push({
  datacloumns1[i]:rowdata[i] // here i am binding row to the …

我试图理解里氏替换原则，我有以下代码：

class Vehicle {
}

class VehicleWithDoors extends Vehicle {
    public void openDoor () {
        System.out.println("Doors opened.");
    }
}

class Car extends VehicleWithDoors {
}

class Scooter extends Vehicle {
}

class Liskov {
    public static void function(VehicleWithDoors vehicle) {
        vehicle.openDoor();
    }

    public static void main(String[] args) {
        Car car = new Car();
        function(car);
        Scooter scooter = new Scooter();
        //function(scooter);  --> compile error
    }
}

我不确定这是否违反。原则上说，如果你有一个类 S 的对象，那么你可以用类 T 的另一个对象替换它，其中 S 是 T 的子类。但是，如果我写怎么办

Vehicle vehicle = new …

在我的应用程序组件（简单的一个）中，我创建了一个带有 3 个输入字段和 1 个提交按钮的表单。当用户填写表单并单击提交按钮后，表单数据将显示在页面上。

现在，我的问题是，从 访问表单元素节点时出现打字稿错误 event.target.elements。

TypeError: Property 'elements' does not exist on type 'EventTarget'.

我尝试通过将其event.target类型转换为 HTMLInputElement 来解决此问题，但错误仍然存​​在。

function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const { firstName, lastName, company } = (event.target as HTMLInputElement).elements;
    setFormData({
      firstName: firstName.value,
      lastName: lastName.value,
      company: company.value
    });
  }

当我使用上面的代码时出现错误消息

TypeError: Property 'elements' does not exist on type 'HTMLInputElement'.

沙盒链接