标签: react-testing-library

可重现的存储库：https ://github.com/hutber/cannotusestatement

更令人担忧的是： https: //codesandbox.io/s/vigilant-bartik-bmz8x在沙箱中测试通过。但是，如果您检查导入到此沙箱中的上述存储库，它将不会在本地通过。

我毫不怀疑问题是我的笑话没有编译运行我的测试所需的node_modules。但我现在不知道如何让它发挥作用。

我只是希望能够运行测试。他们目前不运行

测试

import React from \'react\'\nimport { renderWithThemeProvider, screen } from \'test-utils\'\nimport { Select } from \'./Select\'\n\nit(\'renders correctly\', () => {\n  const tree = renderWithThemeProvider(<Select id="testSelect"></Select>)\n  expect(tree).toMatchSnapshot()\n})\n

笑话配置.js

module.exports = {\n  roots: [\'<rootDir>\', \'./src\'],\n  moduleDirectories: [\'<rootDir>\', \'node_modules/\', \'./src\'],\n  transform: {\n    \'^.+\\\\.(ts|tsx)$\': \'ts-jest\',\n  },\n  testEnvironment: \'jsdom\',\n  testMatch: [\'**/*.test.(ts|tsx)\', \'**/__tests__/*.(ts|tsx)\'],\n  moduleNameMapper: {\n    // Mocks out all these file formats when tests are run\n    \'\\\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$\': \'identity-obj-proxy\',\n    \'\\\\.(css|less|scss|sass)$\': \'identity-obj-proxy\',\n …

在 NextJS 应用程序中使用 Jest 和 React 测试库将我的故事集成到单元测试中时，我遇到了问题。在 Storybook 中，我的 NextJS 组件渲染时没有问题，Storybook Addon Next Router按预期工作。但是，在我的 Jest 测试文件中，我的测试抛出错误，因为 useRouter() 返回 null。我相信我已经正确设置了所有插件。

我的设置：

• 下一个JS 12
• Jest 和 React 测试库
• 故事书
• Storybook Addon Next Router（用于在 Storybook 中使用 Next 路由器）
• @storybook/testing-react（用于将我的故事、参数和参数与测试库集成）

问题：

我已经根据文档设置了所有文件。故事在 Storybook 中渲染得很好，并且 useRouter() 的工作得益于 Storybook Next 插件。但是，composeStories()@storybook/testing-react 中的函数似乎无法从第一个插件正确初始化 Next router Provider。我的单元测试失败并出现以下错误：

测试套件无法运行
TypeError: 无法读取 null 的属性“区域设置”

并指向我的组件内的以下行：

// Events.tsx
const { locale = 'en' } = useRouter();

这是我的测试文件：

// Events.test.tsx
import React from 'react';
import { …

将 React Router DOM (v6) 与 React 测试库结合使用，我想知道是否有一种方法可以处理“模拟”历史记录createMemoryHistory或类似的替代方案。

根据测试库的示例，我可以模拟组件的历史记录Router，但在 v6 中该组件不再接受该historyprop。

所以，我的疑问是：如何使用 React Router DOM v6 使用 RTL（React 测试库）测试历史记录和位置？我应该继续使用MemoryRouter吗？

我有一个元素，其中静态和动态文本的组合都在同一行上。

当通过包含一些静态和动态文本的子字符串测试此行文本时，它失败，显示输出被分割成多行，并且在动态部分之前和之后进行分割。

到底是怎么回事？为什么我不能按照我期望的方式测试它？我该如何正确测试这个？

代码.jsx

const dynamicText = 'all be on one line';

return <div>This should {dynamicText} like I expect.</div>

代码.spec.js

it('Should have dynamic text on one line', () => {
    const {getByText} = render(<Code />);

    expect(getByText('should all be on one line ')).toBeTruthy();
});

测试输出

Unable to find an element with the text: ... 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 …

我有一个测试套件，其中包含 37 个测试，正在测试我的一个观点。在本地，所有测试都通过，没有任何问题，但是当我推送代码时，测试套件在我们的管道中失败（我们正在使用 GitLab）。

CI 中日志的错误输出非常长（数千行，甚至超过了 GitLab 设定的限制）。该错误由许多“未包含在 act() 中”和“不支持对 act() 的嵌套调用”警告组成（Moslty 由useTranslation()I18Next 和TooltipMaterial-UI 等组件触发）。

我的猜测是，来自 API 的异步数据（使用 msw 模拟）会在调用完成后触发状态更新act()，但我不确定如何证明这一点，甚至不知道哪些测试实际上失败了。

有没有人经历过类似的事情，或者知道是怎么回事？

失败测试的示例：

it.each([
    [Status.DRAFT, [PAGE_1, PAGE_11, PAGE_2, PAGE_22, PAGE_3]],
    [Status.PUBLISHED, [PAGE_1, PAGE_12, PAGE_2, PAGE_21, PAGE_22, PAGE_221]],
  ])('should be possible to filter nodes by status %s', async (status, expectedVisiblePages) => {
    renderComponent();
    await waitFor(() => {
      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
    });
    userEvent.click(screen.getByLabelText('components.FilterMenu.MenuLabel'));
    const overlay = await screen.findByRole('presentation');
    await waitFor(() => expect(within(overlay).queryByRole('progressbar')).not.toBeInTheDocument());
    userEvent.click(within(overlay).getByText(`SiteStatus.${status}`));
    userEvent.keyboard('{Esc}');
    
    const items = await screen.findAllByRole('link'); …

我用来react-hook-form控制我的表单输入（ChakraUI 输入）并禁用“提交”按钮以防输入无效

由于我FormProvider在父组件中使用了多页表单，因此根据当前页面更改验证架构

   const currentValidationSchema = validationSchema[activeStep];

    const methods = useForm({
        mode: 'all',
        defaultValues: DEFAULT_VALUES,
        resolver: yupResolver(currentValidationSchema),
    });

 <FormProvider {...methods}>
    <Box >{renderCurrentStep(activeStep)}</Box>
  </FormProvider>

useFormContext并在子组件中使用它

    const {
        control,
        watch,
        getValues,
        clearErrors,
        setError,
        setValue,
        formState: { errors, isValid },
    } = useFormContext<IOrderProductFormData>();

    <Controller
        control={control}
        name="phoneNumber"
        render={({ field: { onChange, value } }) => {
            return (
                <InputMask
                    mask="999 99 999"
                    onChange={onChange}
                    maskChar=" "
                    value={value}
                >
                    {(inputProps: any) => (
                        <InputGroup variant="phone">
                            <InputLeftAddon>+1</InputLeftAddon>
                            <Input
                                type="tel"
                                ref={inputRef}
                                aria-label="phone-number"
                                data-testid="phone-number" …

在React测试库中，按照惯例，最好使用屏幕而不是从渲染中解构方法。

我有一个组件，我需要在其中测试渲染的文本。该组件中的顶级容器是 div，因此没有可访问的查询来获取文本匹配。如何使用屏幕进行文本匹配？

我目前已经求助于使用解构道具中的容器，然后在容器上进行文本匹配。

// MyComponent - simplified
const MyComponent = () => <div> some text </div>

// test
const { container } = render(<MyComponent />);
expect(container).toHaveTextContent(...)

参考： https: //kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen

在博客文章中提到，解构主要是为了遗留目的而支持的，但没有任何用例不能使用屏幕来解决。这个用例可以使用屏幕来解决吗？

我遇到了一个奇怪的问题，非常感谢这里的帮助。我按照这里的例子，不知道到底发生了什么。警告不应该出现，对吧？

组件：Hello.tsx

import React, { useEffect, useState } from "react"

export default () => {
  const [loaded, setLoaded] = useState("false")

  useEffect(() => {
    async function load() {
      await Promise.resolve()
      setLoaded("true")
    }
    load()
  }, [])

  return loaded ? <div>loaded</div> : <div>loading...</div>
}

测试：

import { render } from "@testing-library/react"
import Hello from "./hello"

test("React Testing Library works!", () => {
  render(<Hello />)
})

测试通过，但我在控制台中看到警告：

Warning: An update to _default inside a test was not wrapped in act(...).
    
    When …

我正在尝试通过 React 测试库测试组件input的值Search。

搜索组件接收两个属性：handleChange和input value: title。

我的目标是编写测试，以便最初输入值为空，当用户键入内容时，测试可以验证监听事件值是否正确，但它始终获取初始值。

我试图在键入之前清除输入，但它不起作用。

错误是：

 Expected the element to have value:
                       // indicates as empty string which I expect
                    
    Received:
      test            // it is still the default value: `test`, UserEvent.clear didn't clear

这是两个测试，首先检查输入最初是否为空，这工作正常，第二个测试监听输入。

import { fireEvent, screen, waitFor } from "@testing-library/react";
import Search from "../Search";
import { render } from "../../../test-utils/test-utils";
import "@testing-library/jest-dom";
import userEvent from "@testing-library/user-event";

const mockedOnChange = jest.fn();

describe("input should be filled with title", …

因此，最近我们将 ag-grid-react 和 ag-grid-community 从 27.0.1 更新到 28.0.0，之前的工作测试现在失败了。测试尝试从行单元格获取一个值并与给定值进行比较。

测试（v.27.3.0）

describe("Simple list rendering", () => {

const handleRowDoubleClick = () => { }
const handleRowSelect = () => { }
const formDataWithId = formData.map((item, index) => {
    const newItem = checkNumberLength(item, items);
    return { ...newItem, id: index };
});
const colDefs = [{
    headerName: "test",
    valueGetter: "7"
}]

const listRender = (
    <AgGridReact
        columnDefs={colDefs}
        rowData={formDataWithId}
        rowSelection="multiple"
        suppressClickEdit={true}
        onRowClicked={handleRowSelect}
        onRowDoubleClicked={handleRowDoubleClick}
        immutableData={true}
        rowHeight={28}
    />
)


let component
let agGridReact
beforeEach((done) => {
    component …