相关疑难解决方法(0)

React 测试库无法使用 Tailwind CSS 类读取样式

我有一个简单的 React 组件，最初有一个 Tailwind CSS 类，hidden该类应用 CSSdisplay: none并将该类更改为visible单击按钮。当我用expect().not.toBeVisible()它进行测试时，它告诉我该元素在具有类时已经可见hidden。

如果我不使用 Tailwind CSS 并使用法线，style={{display: 'none'}}它将正确识别该元素不可见。这显然意味着问题出在 Tailwind CSS 上。

这是我的测试：

test("Notification bar should be initially hidden but visible on click", async () => {
    render(<Notifications />);

    expect(await screen.findByTestId("list")).not.toBeVisible();
    // this test fails while the element already has a Tailwind CSS class of "hidden"
});

Run Code Online (Sandbox Code Playgroud)

虽然这是我的组件：

<ul className="hidden" data-testid="list">
  <li>item 1</li>
</ul>

Run Code Online (Sandbox Code Playgroud)

reactjs jestjs tailwind-css react-testing-library

Ahm*_*sam

2022 02-09

12
推荐指数

1
解决办法

4131
查看次数

你如何向JSDOM广告样式表

我目前正在开发一个项目,要求我通过JSDOM将计算样式发送到浏览器.我目前正在寻找一种方法将一些基本的CSS注入JSDOM,以便它可以计算出正确的内联样式(是的,我知道这很糟糕).

根据我的发现,我可以使用JSDOM Level 2,但是从那里我找不到任何关于如何注入样式的文档这是我到目前为止所拥有的

    var document = jsdom.jsdom('<!DOCTYPE html><html><head></head><body id="abody" ></body></html>', jsdom.level(2, 'style'), {
        features : {
            FetchExternalResources : ['script', 'css'],
            QuerySelector : true
        }
    });

Run Code Online (Sandbox Code Playgroud)

我一直在将css插入head标签,但无济于事.而且我知道我也可以做错上面的代码.

任何帮助都会很棒.

css node.js jsdom

Pau*_*aul

2019 06-25

8
推荐指数

1
解决办法

3354
查看次数

jest-dom : toBeVisible() 在应该返回 false 时返回 true

类似的问题在这里 -无法检查 expect(elm).not.toBeVisible() 的语义 UI 反应组件- 但是答案表明这应该适用于 CSS-in-JS，这就是我正在使用的。

我正在使用 Material-UI 的<Hidden>组件仅在sm屏幕尺寸及更大尺寸上显示一些文本。这是代码（在生产中完美运行）：

<Hidden implementation="css" xsDown>
  <LogoText variant="h5" component="p" />
</Hidden>

Run Code Online (Sandbox Code Playgroud)

我使用的是jest-dom与react-testing-library和我想测试我的导航栏，其中包含这个隐藏文本的响应。

我有以下测试：

const initTest = width => {
  Object.defineProperty(window, "innerWidth", {
    writable: true,
    configurable: true,
    value: width
  });
  window.matchMedia = jest.fn().mockImplementation(
    query => {
      return {
        matches: width >= theme.breakpoints.values.sm ? true : false,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn()
      };
    }
  );
  const height = Math.round((width * 9) …

Run Code Online (Sandbox Code Playgroud)

jsdom jestjs material-ui react-testing-library

Jak*_*ake

2019 05-20

7
推荐指数

0
解决办法

3464
查看次数

React-Bootstrap 无效表单反馈始终可见如何测试？

我无法使用 React-bootstrap 测试表单的正确验证。\n我想看到，当输入模式无效时，一旦验证表单，就会显示无效的反馈文本。

带有测试的工作codesandbox：https://codesandbox.io/s/flamboyant-cerf-7t7jq

import React, { useState } from "react";\n\nimport { Form, Button, InputGroup } from "react-bootstrap";\n\nexport default function App(): JSX.Element {\n  const [validated, setValidated] = useState<boolean>(false);\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    setValidated(true);\n  };\n\n  return (\n    <Form\n      className="col-12 col-lg-5 trans-form"\n      noValidate\n      validated={validated}\n      onSubmit={handleSubmit}\n    >\n      <InputGroup className="my-2">\n        <InputGroup.Prepend>\n          <InputGroup.Text>Receiver Public Key</InputGroup.Text>\n        </InputGroup.Prepend>\n        <Form.Control\n          role="textbox"\n          className="text-truncate rounded-right"\n          type="text"\n          pattern="[A-Za-z0-9]{5}"\n          required\n        />\n        <Form.Control.Feedback\n          className="font-weight-bold"\n          type="invalid"\n          role="alert"\n        >\n          Length or format are incorrect!\n        </Form.Control.Feedback>\n      </InputGroup>\n\n      <Button\n        role="button"\n …

Run Code Online (Sandbox Code Playgroud)

forms validation jestjs react-bootstrap react-testing-library

lbr*_*ile

2021 06-23

6
推荐指数

1
解决办法

5628
查看次数