小编Rom*_*ian的帖子

我在悬停上显示了一个弹出窗口，我想使用 Jest 和 React 测试库对其进行测试，以查看该元素是否默认隐藏。

当我手动测试时一切正常，而当我使用 RTL 测试时一切正常。

我尝试使用 not.toBeInTheDocument 和 not.toBeVisible 但似乎该元素始终存在于 DOM 中，不知道如何从 DOM 中删除它

JSX 代码：

<label
  htmlFor="terms_and_conditions"
  className="terms_and_conditions_box"
>
  I agree with{" "}
  <span className="terms_and_conditions_text" style={{ color: "blue" }}>
    Terms and conditions
  </span>
  <div className="pop_over">No ice cream will be delivered</div>
</label>

CSS代码：

.terms_and_conditions_text:hover + .pop_over {
  display: block;
}

.pop_over {
  background: rgb(199, 196, 196);
  padding: 2rem;
  width: 14rem;
  border-radius: 15px;
  position: absolute;
  right: -18rem;
  top: -2rem;
  display: none;
}

测试代码：

test("popover responds to hover", () …

我已经构建了一个带有 remix run 的网络应用程序，我想添加 Google 分析。如何将纯 JS 添加到 head 和 body 部分而不会让打字稿生气？

我\xe2\x80\x99一直在尝试将浏览器Chromium和Firefox的默认语言（在使用CodeceptJS + Playwright作为运行器并行运行的自动化测试中）更改为法语，但没有成功。在Chromium中，我\xe2\x80\x99ve尝试使用args --lang但没有成功，并且我\xe2\x80\x99ve也尝试使用prefs：intl.accept_languages。在 Firefox 中，我尝试使用 firefoxUserPrefs。到目前为止，没有任何效果。\n有人知道如何更改使用 playwright 启动的浏览器中的默认语言吗？

CodeceptJS 版本 3.0.6

剧作家版本1.10.0

Chrome 版本 90.0.4430.0

火狐版本 87.0b10

codecept.conf.js - 完整打印屏幕\n codecept.conf.js

Playwright: {\n  url: process.env.baseUrl || DEFAULT_HOST,\n  show: true,\n  browser: \'chromium\',\n  waitForAction: 250,\n  waitForNavigation: \'networkidle0\',\n  chromium: {       \n    channel: process.env.BROWSER,\n    args: [\'--lang=fr-CA\'],\n    prefs: {\n      \'intl.accept_languages\': \'fr-CA\',\n    },\n    firefoxUserPrefs: {\n      \'intl.accept_languages\': \'fr-CA, fr\',\n    },\n  },\n}, \n

我有一个疑问..我可以在 getStaticProps 中使用 useEffect 吗？

我正在尝试在 getStaticProps 中运行一个函数...它有效..但我不知道这是否是推荐的做法。

  useEffect(() => {
    remarkBody()
  }, [body, blogPostCollection])

如果没有......运行它的最佳方式是什么？

在测试库中，我试图找到一种方法来查找其子级与条件匹配的元素：让我们在测试中呈现的容器中考虑这一点：

    <div class="classA">
        <div class="classB">
            <div class="classC">
                some text
            </div>
        </div>
        <div class="classB">
            <div class="classC">
                more text
            </div>
        </div>
    </div>

我想找到

    <div class="classB">
        <div class="classC">
            some text
        </div>
    </div>

我尝试过： getByText(container, 'some text', {selector: 'classB'})但它返回了

<div class="classC">
    some text
</div>

我缺少什么来找到包含此文本的容器/组件/父级？

我正在尝试验证表单。当我将 React-select 组件插入到控制器中时，问题就出现了：即使规则设置为“required: true”，如果 Controller 后又出现一个正常的输入框错误，它会跳转到下一个并失去焦点控制器错误（在本例中为“品牌评论部分”）。这里是代码：

export default function Proof() {
    const { register, handleSubmit, errors, control } = useForm();
    const refReactSelect = useRef();

    const createHandler = (data) => {
        console.log(data);
    }
    return (
        <div>
            <form onSubmit={handleSubmit(createHandler)}>
                <label className="font-weight-medium" htmlFor="productCategory">Category</label>
                {/* Name */}
                <div className="form-group pb-2">
                    <label className="font-weight-medium" htmlFor="productName">Name</label>
                    <input
                        className="form-control"
                        type="name"
                        id="productName"
                        name="productName"
                        ref={register({ required: true })}
                    />
                    {errors.productName && errors.productName.type === "required" && (
                        <p className="text-danger">{"Empty name"}</p>
                    )}
                </div>

                <Controller
                    name="productCategory"
                    as={
                        <Select
                            ref={refReactSelect}
                            options={categories}
                            isSearchable={true}
                            placeholder="Select"
                            id="productCategory" …

我正在使用带有react-hook-form库的react-select下拉菜单。我正在调用 api 来获取反应选择的默认值。最初，下拉列表无法预填充默认值。所以我找到了一个解决方法，当我从 api 获取数据时重新渲染整个 JSX。

<form onSubmit={handleSubmit(saveData)}>
{!countryValue && (
      <Controller
        name="country"
        control={control}
        render={({ onChange, value, ref }) => (
          <Select
            options={country}
            value={country.find((c) => c.value === value)}
            onChange={(val) => onChange(val.value)}
          />
        )}
        rules={{ required: true }}
      />
    )}
    {countryValue && (
      <Controller
        name="country"
        control={control}
        render={({ onChange, value, ref }) => (
          <Select
            options={country}
            value={country.find((c) => c.value === value)}
            onChange={(val) => onChange(val.value)}
            defaultValue={country.find((c) => c.value === countryValue)}
          />
        )}
        rules={{ required: true }}
      />
    )}
{errors.country && <div>Field is rquired</div>} …