Reactjs React测试库：简单路由测试错误_Reactjs_React Router_React Testing Library

Reactjs React测试库：简单路由测试错误

reactjs

Reactjs React测试库：简单路由测试错误,reactjs,react-router,react-testing-library,Reactjs,React Router,React Testing Library,我已经为react路由器编写了一个非常简单的测试。测试是简单地测试带有to道具的按钮在点击时导航到新路线 const Routes = () => { return ( <Switch> <Route exact path="/" render={() => ( &

我已经为react路由器编写了一个非常简单的测试。测试是简单地测试带有to道具的按钮在点击时导航到新路线

const Routes = () => {
    return (
        <Switch>
            <Route
                exact
                path="/"
                render={() => (
                    <CornerButton to="/route">{btnText}</CornerButton>
                )}
            />
            <Route exact path="/route" render={() => <div>Route</div>} />
        </Switch>
    );
};

it("renders a route change with 'to' prop", async () => {
    render(
        <div>
            <MemoryRouter initialEntries={["/"]}>
                <Routes />
            </MemoryRouter>
        </div>
    );

    const btn = screen.getByRole("button", { name: btnText });
    fireEvent.click(btn);
    const newRoute = screen.getByText(/Route/i);
    expect(newRoute).toBeInTheDocument();
});

const Routes=（）=>{
返回(
(
{btnText}
)}
/>
路由}/>
);
};
它（“使用'to'prop'呈现路由更改”，async（）=>{
渲染(
);
const btn=screen.getByRole（“按钮”{name:btnText}）；
fireEvent.单击（btn）；
const newRoute=screen.getByText（/Route/i）；
expect（newRoute）.toBeInTheDocument（）；
});

我看到了错误：

TestingLibraryElement错误：找不到包含以下文本的元素： /路线/i

按钮工作正常，呈现的HTML外观良好：

<body>
      <div>
        <div>
          <a
            class="sc-jgHCyG begwzL"
            href="/route"
            style="text-decoration: none;"
          >
            <button
              class="sc-bBrOnJ gZtvsD"
              color="primary"
              type="button"
            >
              <div
                class="sc-cOajty wNAWC"
              >
                <div
                  class="sc-khAkjo jvrrvJ"
                >
                  text
                </div>
                <div
                  class="sc-AzgDb fmENQv"
                />
              </div>
            </button>
          </a>
        </div>
      </div>
    </body>

我需要帮助。

编辑： 我更接近于一个解决方案，但这种行为对我来说似乎很奇怪。如果我使用：

constbtn=screen.getByRole（“link”{name:btnText}）
而不是：constbtn=screen.getByRole（“按钮”{name:btnText}）
一切正常。这是否与按钮的默认行为有关？我不在组件内部调用preventDefault（）
。但是，在测试之外单击按钮也没有问题。
当我尝试此代码时，测试通过：
从“react router dom”导入{Switch、Route、MemoryRouter、Link}；
从“@testing library/react”导入{render，screen，firevent}”；
常数路由=（）=>{
返回(
(
btnText
)}
/>
路由}/>
);
};
它（“使用'to'prop'呈现路由更改”，async（）=>{
渲染(
);
const btn=screen.getByRole（“按钮”{name:“btnText”}）；
fireEvent.单击（btn）；
const newRoute=screen.getByText（/Route/i）；
expect（newRoute）.toBeInTheDocument（）；
});

因此，您的CornerButton
中可能还有其他原因导致按钮在测试中无法正常工作。
您需要等待“UI”更新吗？谢谢您的回答！我试过const newRoute=wait screen.fineByText（/Route/I）也失败了，出现了相同的消息。我添加了一个带有解决方法的编辑。这将是类似于等待等待等待（（）=>screen.getByText（/Route/I））。也许HTML按钮在默认情况下没有“button”的aria角色，因为元素类型已经明确了语义。可能是因为按钮捕获了单击事件，而没有将其传播到实际具有该行为的链接。您是否尝试过其他查询？例如，ByLabelText
，ByText
，ByDisplayValue
？这就好像没有检测到单击，因为生成的HTML ID表明已采用了路径“/”
。