标签: testing-library

我正在使用 React 并编写一个 Modal 组件，如下所示：

const MyModal: FC<MyModalProps> = memo((props) => {
    return (
        <Modal isOpen={true} data-client-id={modal-client-id}>
            ...
        </Modal>
    );
});

我正在尝试使用测试库和笑话来测试它，如下所示：

    const { asFragment } = render(<MyModal {...myTestProps} />);
    const renderFragment = asFragment();
    expect(renderFragment).toMatchSnapshot();

但是，当我检查快照时，我只看到<DocumentFragment />. 我可以通过 a 测试模态是否存在，getByTestId(modal-client-id)并且当我使用完全相同的道具在 Storybook 中运行时，我可以看到模态正在渲染并出现。当我删除周围的模态组件时，快照也可以工作并返回内部组件。Snapshot 只返回 DocumentFragment 而不是完整快照是否有原因？这是否仅仅意味着在单元测试中组件没有渲染？

我正在尝试添加eslint-plugin-testing library到项目中以捕获@testing-library/react测试中的常见错误。我已按照说明步骤操作，但无法让它捕获测试文件中的错误。

例如，我手动打开no-debug规则，在 .test.tsx 文件中添加一条debug()语句，然后运行 ​​linter。它不会发现文件中的任何错误。

如果我违反了其他插件的规则，它们就会被捕获，所以我怀疑我将测试库插件添加到配置中的方式可能有问题。

包.json

{
  "dependencies": {
    "react": "16.12.0",
    "react-dom": "16.12.0"
  },
  "devDependencies": {
    "@babel/core": "7.7.0",
    "@babel/preset-react": "7.0.0",
    "@babel/preset-typescript": "7.1.0",
    "@testing-library/react": "9.1.3",
    "@typescript-eslint/eslint-plugin": "2.15.0",
    "@typescript-eslint/parser": "2.15.0",
    "eslint": "6.8.0",
    "eslint-plugin-cypress": "2.10.3",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.19.0",
    "eslint-plugin-react-hooks": "2.3.0",
    "eslint-plugin-testing-library": "3.0.0",
    "typescript": "3.7.3"
  }
}

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true
    }
  },
  "env": {
    "browser": true,
    "es6": true,
    "jasmine": true, …

我正在尝试编写一些简单的测试，让我想要呈现的标题和数据按预期显示。我创建了一个 repo - https://github.com/olore/ag-grid-testing-library来重现。该表在浏览器中打开时看起来就像我期望的那样。

<AgGridReact
  columnDefs={ /* First 2 always findable, others never */
  [
    { field: "make" }, 
    { field: "model" }, 
    { field: "price" }, 
    { field: "color" },
  ]}
  rowData={
  [{ 
    make: "Toyota", 
    model: "Celica",
    price: "35000", 
    color: "blue" 
    }]
  }
  pagination={true}></AgGridReact>

和测试

test('renders all the headers', async () => {
  const { getByText } = render(<GridExample />);
  expect(getByText("Make")).toBeInTheDocument();  // PASS
  expect(getByText("Model")).toBeInTheDocument(); // PASS
  expect(getByText("Price")).toBeInTheDocument(); // FAIL
  expect(getByText("Color")).toBeInTheDocument(); // FAIL
});

在本地，前 2 列标题和数据是可访问的，但没有呈现其他列，正如我在 testing-library 的输出中看到的那样。我正在 …

我正在尝试测试一个具有 anendAdornment IconButton和另一个带有 a 的组件TreeView，但是 theIconButton和ExpandIcon/CollapseIcon都没有很好的选项来调度测试事件。

这是TextField我正在使用的组件：

<TextField
  fullWidth
  label="Label"
  onChange={handleChange}
  type="text"
  InputProps={{
    endAdornment: (
        <InputAdornment >
          <IconButton onClick={openAssetHierarchy}>
            <Folder />
          </IconButton>
        </InputAdornment>
      ),
    }}
/>

这是TreeView组件：

<TreeView
  defaultCollapseIcon={<ArrowDropDown />}
  defaultExpandIcon={<ArrowRight />}
  defaultEndIcon={<div style={{ width: 24 }} />}
  onNodeToggle={handleToggle}
  onNodeSelect={handleSelect}
>
  [...]
</TreeView>

对于TextField图标按钮：

用于TreeView使用 Test Playground 获取图标时

没有很好的查询来获取测试图标。我怎样才能获得这些选项？

我正在尝试匹配包含不间断空格的电话号码字符串：

assert
   .dom(
      screen.getByText(
         [my text with a non-breaking space]
      ) as HTMLElement
   )
.exists();

但是，它返回此错误：

Unable to find an element with the text: [my text with a non-breaking space]. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

我该如何测试这个？

在测试库文档的某些页面上出现了使用 screen.getByText 的示例：

  expect(screen.getByText(/you are home/i)).toBeInTheDocument()

关联

我的问题是这与此有何不同：

  screen.getByText(/you are home/i)

为什么当 screen.getByText 执行相同操作时文档使用 .toBeInTheDocument() （当“you are home”文本不在文档中时抛出错误）？这不是多余的吗？

我正在尝试编写一个测试，以确认 a具有使用来自 的基于角色的查询<datalist/>的元素列表。奇怪的是，当我尝试按角色查询时：<option/>@testing-library/cypressoption

cy.findByRole('option')

...我没有返回任何结果：

4000 毫秒后超时重试：无法找到具有“选项”角色的可访问元素

...尽管页面中出现内容：

<datalist id="subjects-list">
  <option value="one">one</option>
  <option value="two">two</option>
</datalist>
<input list="subjects-list" value=""/>

有没有办法找到这些选项@testing-library/cypress？

显然我根本不理解测试库。它们具有“单击”功能，但似乎没有用于从选择元素中选择简单下拉选项的功能。这是失败的，表示选择了 0，而不是预期的 1。我如何使选择工作？

import React from "react";
import {render} from '@testing-library/react'
import {screen} from '@testing-library/dom'

let container: any;
beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
});

afterEach(() => {
    document.body.removeChild(container);
    container.remove();
    container = null;
});

it('AddRental should display', () => {
    render(<select name="town" data-testid="town" className="form-control"
                   aria-label="Select the Town">
        <option value="0">--Town--</option>
        <option value="1">My town</option>
        <option value="2">Your Town</option>
        <option value="3">The other town</option>
    </select>, {container});
    const dropdown = screen.getByTestId('town');
    expect(dropdown.value)
        .toBe('0');
    dropdown.click();
    const athabascaOption = screen.getByText('My town');
    athabascaOption.click();
    const byTestId = screen.getByTestId('town');
    expect(byTestId.value) …

我正在使用jest并@testing-library/react-hooks测试react-query在我的 React Native 代码中实现的钩子。

测试工作正常，但最后我得到：

Jest did not exit one second after the test run has completed.

This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

这是我的简化代码：

import { renderHook } from '@testing-library/react-hooks'
import React from 'react'
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const useSomething = () => {
  return useQuery('myquery', () => 'OK')
}

beforeAll((done) => { …

如果这是一个重复的问题，我很抱歉。我在其他任何地方都找不到答案。

成分：

<ul>
  <li>Pending tasks</li>
</ul>

测试代码：

expect(getByRole("listitem", { name: "Pending tasks" })).toBeInTheDocument();

错误：

TestingLibraryElementError: Unable to find an accessible element with the role "listitem" and name "Pending tasks"

这是重现此内容的代码和框链接：https ://codesandbox.io/s/wandering-browser-mrf78?file =/ src/App.test.js

即使它显示错误提示无法找到，它仍然建议我将 li 和 ul 标记作为可用角色。

Here are the accessible roles:
 --------------------------------------------------
  list:

  Name "":
  <ul />

  --------------------------------------------------
  listitem:

  Name "":
  <li />

有人可以解释一下我在这里缺少什么吗？我尝试使用正则表达式匹配器，但没有运气。

在 @testing-library/user-event 13 中，这有点微不足道：

paste(element, text, eventInit, options);

然而，在 14 中，添加了复制和剪切，现在需要某种指针选择，从文档中尚不清楚它现在应该如何工作。我尝试研究该库的测试以了解它是如何使用的，但测试依赖于私有设置，这使得更难了解这种情况下具体需要什么。

就我的问题而言，如何将粘贴示例从 @testing-library/user-event 13 移植到 @testing-library/user-event 14 中？

有没有办法用react-testing-library触发自定义事件？我在他们的文档中找不到这样的例子。

useEffect(() => {
  document.body.addEventListener('customEvent', onEvent);
}, []);

我想触发自定义事件（例如fireEvent('customEvent')并测试是否onEvent被调用。