标签: react-testing-library

我可以通过文本找到元素并检查它是否是以下链接：

const Link = Parent.getByText('This is a link', { exact: false });
expect(Link).toHaveAttribute('href', 'www.somewhere.com');

如何检查这个其他元素（我通过文本找到的）不是链接？

const NotALink = Parent.getByText('Not a link', { exact: false });

我是反应新手，并在反应中编写测试用例。我有两个单选按钮（IPV4 和 IPV6）。我想测试用户是否可以选择另一个单选按钮。我不知道要在单选按钮上应用哪个事件侦听器，是更改事件还是单击事件？

我将问题分为两部分：1）我正在检查是否可以选择或取消选择一个单选按钮2）我是否可以选择另一个单选按钮。我只在第一部分失败了，所以请帮助我。这是我的代码和测试用例。

import React from \'react\'    \nimport constants from \'LookingGlass/constants\'    \nimport { Label, RadioButton } from \'LookingGlass/common/components\'\n    \nexport const componentTestId = \'SelectorIPVersion\'\n    \nexport default function SelectorIPVersion(props = {}) {\n    const { checkedVersion, onChange, disabled } = props\n    \n    const { choices, groupName, label } = constants.SelectorIPVersion\n    \n    const _onChange = (e) => {\n        onChange && onChange(e.target.value)\n    }\n    \n    let selectorChoices = choices.map((c) => {\n        return (\n            <RadioButton\n                key={c.value}\n                id={c.value}\n                name={groupName}\n                value={c.value}\n                label={c.label}\n                checked={c.value === checkedVersion}\n                onChange={_onChange}\n …

这是针对 的测试：

  it("changes the state when body input is changed", () => {
    render(<CommentForm />)
    // let input = screen.getByLabelText("Your Name");

    let input = screen.getByRole("textbox", { name: "Your Comment" });
    fireEvent.change(input, { target: { value: "MyComment" } });
    expect(input.value).toEqual("MyComment");
  });

使用注释行它可以工作（当我使用 搜索时getByLabelText）。这是当我尝试使用以下命令找到它时得到的结果getByRole：

 Unable to find an accessible element with the role "textbox" and name "Your Comment"

    Here are the accessible roles:

      document:

      Name "":
      <body />

      --------------------------------------------------
      generic:

      Name "":
      <div />

      Name "":
      <div
        class="input-group" …

页脚视图.tsx

import styles from './Footer.module.scss';\n\nimport logo from 'assets/images/logo_header.svg';\nimport { ReactSVG } from 'react-svg';\nimport iconTwitter from 'assets/images/logo_twitter.svg';\nimport iconFacebook from 'assets/images/logo_facebook.svg';\nimport iconYoutube from 'assets/images/logo_youtube.svg';\nimport { proxyConfSelector } from 'core';\nimport { useSelector } from 'react-redux';\nimport { useTranslation } from 'hooks/useTranslation';\n\nconst Footer = () => {\n  const proxyConf = useSelector(proxyConfSelector);\n  const year = new Date().getFullYear();\n  const [t, lang] = useTranslation();\n\n  // eslint-disable-next-line no-console\n  console.log('Language', [t, lang]);\n\n  return (\n    <div className={styles.footerContainer}>\n      <a href={`https://fodjan.com/${lang === 'de' ? 'de/' : 'en/'}`}>\n        <ReactSVG className={styles.footerLogo} src={logo} />\n      </a>\n …

我正在使用 RTL 测试 React 组件，每次运行测试时，我都会得到，

"messageParent" can only be used inside a worker

**这是代码

describe('Header', () => {
  it('validates header component is rendered', () => {
    const { getByTestId } = render(<Header patientName="Jake Bland" />);
    expect(getByTestId('patient-name')).toHaveTextContent(/^Jake Bland$/);
    expect(getByTestId('dateRange')).toBe(dateRange);
  });
});

对此的任何帮助将不胜感激。

我有以下组件，我在导航上创建 ref 以在导航外部单击时关闭菜单：

import { useState, useEffect, useRef, } from 'react';

const Header = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const navRef = useRef(null);

  const hideMenu = () => setMenuOpen(false);

  const handleClick = event => {
    if (menuOpen && !navRef.current.contains(event.target)) {
      hideMenu();
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  });

  return (
    <header className="header">
      <nav className="header-nav" ref={navRef}>
        ...
      </nav>
    </header>
  );
};

export default Header;

这是单元测试：

import React from 'react';

import …

在我的组件中，我检查页面是否重新加载并重定向到另一个页面。我通过以下代码来做到这一点。

useEffect(() => {
    //this will prevent users from accidently refreshing / closing tab
    window.onbeforeunload = () => {
      return "";
    };
   //check whether user reloaded
    if (
      window.performance.getEntriesByType("navigation")[0].type === "reload"
    ) {
      openExternalURL(process.env.GATSBY_MARKETING_URL);
    }
  }, []);

问题是我在 Jest/react-test-library 测试用例中不断收到错误，如下所示

TypeError: window.performance.getEntriesByType is not a function

即使我尝试像下面那样嘲笑它，但没有成功。

window.performance = {
  getEntriesByType: jest.fn().mockReturnValue([{ type: "reload" }]),
  measure: jest.fn()
};

有人能指出我正确的方向吗？提前致谢。

我无法使用 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 …

我的 React 组件<script>使用 nextJS 渲染标签Head。当尝试使用测试库的方法查询元素时getByTestId，我收到以下消息：

TestingLibraryElementError: Unable to find an element by: [data-testid="keen-to-test"]
Ignored nodes: comments, <script />, <style />

有没有办法包含script在输出中，或者我应该使用不同的策略来验证我的脚本是否已注入？提前致谢

成分

import Head from 'next/head';

const FancyScript = ({src}) => {
  if (src) {
   return (
     <Head>
      <script
        data-testid="keen-to-test"
        type="text/javascript"
        async
        src={src}
      </script>
     </Head>
   )
  }
  return null;
}

测试

import { render } from '@testing-library/react';
import FancyScript from '/fancy-location';

it('return some fancy', () => {
    const { getByTestId } = …

我有一个组件，在数据检索完成之前显示一个旋转器。但我不从服务器获取数据，而是使用 Dexie 库从 indexedDB 获取数据。我怎么能嘲笑这样的要求。我的代码：

组件内的 useEffect

  useEffect(() => {
      dispatch(setData())
    }, [])
   
    if(isDataLoadng) {
      return <Spinner/>
    }
    
    return Component

重击动作

import db from '../../indexedDB/db'

    export const setData = createAsyncThunk(
      `setData`,
      async (_, { getState }) => {
          const data =await db.data.toArray()
          return {data}
      }
    )

索引数据库文件

import Dexie from 'dexie';


const db = new Dexie("dataDB");
db.version(1).stores({
  data: 'id, name,
});


export default db

我的减速机

const initialState = {
  data: [],
  isDataLoading: true,
}

const crudSlice = createSlice({
  name: 'dataReducer', …