标签: react-testing-library

因此，react-testing-library用于单元/集成测试，并cypress用于 e2e 测试。但是，两者似乎都在做同样的事情：

react-testing-library

• 促进嘲笑
• 像用户一样进行测试
• 从顶级组件开始（不是一个硬性要求，但如果你不这样做，你最终会在子组件测试中得到一堆重复的测试用例）
• 即时反馈，快速

cypress

• 促进嘲笑
• 像用户一样进行测试
• 从顶级组件（页面）开始
• 延迟反馈，速度慢，但提供了额外的工具（视频证明、逐步测试等）

除了反馈周期外，它们似乎几乎相同。有人可以澄清有什么区别吗？为什么要同时使用两者？

我正在使用Testing Library为 React 应用程序编写一些测试。我想检查一些文本是否出现，但我需要检查它是否出现在特定位置，因为我知道它已经出现在其他地方。

查询的测试库文档说getByText查询需要一个container参数，我猜可以让您在该容器内进行搜索。我尝试这样做，container并text按照文档中指定的顺序使用和参数：

const container = getByTestId('my-test-id');
expect(getByText(container, 'some text')).toBeTruthy();

我收到一个错误：matcher.test is not a function。

如果我把参数反过来：

const container = getByTestId('my-test-id');
expect(getByText('some text', container)).toBeTruthy();

我得到一个不同的错误： Found multiple elements with the text: some text

这意味着它不在指定的容器内搜索。

我想我不明白是如何getByText工作的。我究竟做错了什么？

这是我的自定义钩子：

  export function useClientRect() {
    const [scrollH, setScrollH] = useState(0);
    const [clientH, setClientH] = useState(0);
    const ref = useCallback(node => {
      if (node !== null) {
        setScrollH(node.scrollHeight);
        setClientH(node.clientHeight);
      }
    }, []);
    return [scrollH, clientH, ref];
  }
}

我希望每次调用它时，它都会返回我的值。喜欢：

jest.mock('useClientRect', () => [300, 200, () => {}]);

我怎样才能做到这一点？

我正在尝试将我的项目升级到 React 18，一切都可以在浏览器中的开发和生产模式下运行。但是升级到最新版本后，@testing-library/react我的一些单元测试失败了，其中很多都记录了以下警告：

  console.error
    Warning: The current testing environment is not configured to support act(...)

      at printWarning (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at isConcurrentActEnvironment (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:25057:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:27351:12)
      at scheduleUpdateOnFiber (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:25292:5)
      at setLoading (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:17342:16)
      at _callee2$ (node_modules/.pnpm/@cubejs-client+react@0.29.51_react@18.0.0/node_modules/@cubejs-client/react/src/hooks/cube-query.js:56:7)

我做的第一件事是检查我的版本，清除节点模块并锁定文件以防万一：

• react18.0.0
• react-dom18.0.0
• @testing-library/react版本：“13.1.1”，
• 测试框架和版本：“jest”：“27.5.1”，
• DOM环境：jsdom 16.7.0

但一切看起来都不错吗？

我检查了 React 18 的迁移文档：https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html 其中说最新版本@testing-library/react不需要globalThis.IS_REACT_ACT_ENVIRONMENT = true设置。

但无论如何，我在测试运行之前尝试手动设置。但这也没有解决它，（我尝试了几个版本）

// @ts-ignore
global.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
globalThis.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
self.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
window.IS_REACT_ACT_ENVIRONMENT …

在酶中，您可以像这样检查子组件的存在：

expect(wrapper.find(ChildComponent)).toHaveLength(1)

反应测试库中的这个测试相当于什么？我发现的所有在线示例都只涵盖了寻找 dom 元素的非常简单的测试——没有一个包含渲染子组件的示例。你如何找到一个子组件？

我有一个 React 组件，children如果 propisTrue是 true-y，它会返回由 React 渲染的组件。如果其 propisTrue为 false-y，则组件返回null，并且 React 不会渲染任何内容。

我需要将它作为一个组件进行测试，安装它，传递 prop，并测试当 prop 为 true-y 时它的子级是否被渲染，或者当prop 为 false-yisTrue时我们得到渲染。nullisTrue

这是我的组件：

const RenderIf = ({ isTrue, children }) => {
    if (isTrue) {
        return children;
    }
    return null;
}
export default RenderIf

在 React 测试库中，我们有两个函数，称为toBeInTheDocument()和toBeVisible()。

1 expect(screen.getByText('hello')).toBeInTheDocument();
2 expect(screen.getByText('hello')).toBeVisible();

看来这两个断言的行为是相同的。它们有什么区别，各自的用例是什么？

我正在使用反应测试库处理测试用例。为了编写测试用例，我需要模拟 React 查询的 useQuery 和 useMutation 方法。如果有人知道解决方案，请指导我。我在这里添加相关代码。

工作空间详细信息部分.test.tsx

import React from 'react'
import '@testing-library/jest-dom'
import '@testing-library/jest-dom/extend-expect'
import { screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { WorkspaceDetailsSection } from '../WorkspaceDetailsSection'
import { render } from '../../_utils/test-utils/test-utils'

const mockedFunction = jest.fn()

let realUseContext: any
let useContextMock: any

// Setup mock
beforeEach(() => {
  realUseContext = React.useContext
  useContextMock = React.useContext = jest.fn()
})
// Cleanup mock
afterEach(() => {
  React.useContext = realUseContext
})

jest.mock('../data', () => ({
  useMutationHook: () …

我有一个普通的选择列表。当我选择一个选项时，我需要测试 handleChoice 被调用。我如何使用 React 测试库来做到这一点？

  <select
    onChange={handleChoice}
    data-testid="select"
  >
    <option value="default">Make your choice</option>
    {attributes.map(item => {
      return (
        <option key={item.key} value={item.key}>
          {item.label}
        </option>
      );
    })}
  </select>

getByDisplayValue的值item.label不返回任何内容，也许这是因为它在页面上不可见？

有两种使用查询的方法react-testing-library。

您可以使用该render方法返回的查询：

import React from 'react'
import { render } from '@testing-library/react'

...

const { getByText } = render(<div>Foo</div>)

expect(getByText('Foo')).toBeInTheDocument()

或者您可以使用该screen对象：

import React from 'react'
import { render, screen } from '@testing-library/react'

...

render(<div>Foo</div>)

expect(screen.getByText('Foo')).toBeInTheDocument()

但是文档中没有说明哪一个是最好的选择以及为什么。

有人可以启发我吗？