标签: react-testing-library
无法测试显示样式的元素：无
我正在尝试getByRole我有一个<li />，它是样式组件的子项。
样式组件默认为display: none，然后在min-width媒体查询下它设置为display: flex。
getByRole('listitem')不使用display: none但不使用它运行工作，表明它styled-components告诉DOM，因为它被设置为display: none它不存在。
尽管调试 HTML 输出实际上显示了<li />正在呈现的内容：
TestingLibraryElementError: Unable to find an accessible element with the role "listitem"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div>
<ul
class="sc-gzVnrw sc-VigVT kjwzNy"
>
<li><!-- bunch of stuff</li>
</ul>
</div>
</div>
</body>
我曾尝试使用 嘲笑媒体查询匹配jest-matchmedia-mock，但没有运气。
我根本不关心测试媒体查询或样式，所以有没有办法告诉样式组件在测试期间不应用样式？
推荐指数
解决办法
查看次数
如何测试带有 <Router> 标签的组件？
关于：
嘿，目前我正在尝试使用 jest 和 react 测试库为我的 react 组件编写测试。我也使用反应路由器。
问题：
我想检查当路径更改时应用程序是否路由到正确的组件而不与单个组件交互。
例如，如果当前路径名是“/impressum”，我只想从 Impressum 页面获取快照。
我不知道如何将路径传递到，<App>以便只显示一条路线。
我正在尝试测试的组件：
import React from 'react'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import WeatherPage from "../WeatherPage/WeatherPage.js"
import AddWeatherPage from "../AddWeatherPage/AddWeatherPage.js"
import WeatherDetailsPage from "../WeatherDetailsPage/WeatherDetailsPage.js"
import DeleteWeatherPage from '../DeleteWeatherPage/DeleteWeatherPage.js'
import ImpressumPage from '../ImpressumPage/ImpressumPage.js'
class App extends React.Component {
render() {
return (
<Router>
<Switch>
<Route path="/weatherDetails" component={WeatherDetailsPage} />
<Route path="/addWeather" component={AddWeatherPage} />
<Route path="/deleteWeather" component={DeleteWeatherPage} />
<Route path="/impressum" component={ImpressumPage} />
<Route path="/" …推荐指数
解决办法
查看次数
使用 React-Virtualized AutoSizer 时，子项未在测试中呈现
我有一个使用 react-virtualized AutoSizer 的组件，在这个组件里面有一个 react-virtualized List。它的呈现方式是：
<AutoSizer>
{({width, height}) => (
<List ref={(ref) => (this.refVirtualizedList = ref)}
width={width}
height={height}
playlistLoading={playlistLoading}
playlistPlayingTrackId={playlistPlayingTrackId}
rowCount={rowCount}
deferredMeasurementCache={this.cellMeasurerCache}
overscanRowCount={12}
scrollToIndex={trackGroupToGo - 1}
scrollToAlignment="center"
rowHeight={this.cellMeasurerCache.rowHeight}
updateTrackListFlag={updateTrackListFlag}
noRowsRenderer={this.renderNoRowsResult}
rowRenderer={this.renderTrackGroupRow}
onRowsRendered={this.handleOnRowsRendered} />
)}
</AutoSizer>
它工作得很好，但它不适用于测试。我看不到列表中的任何内容，并且rowRenderer从未调用过该函数。我正在使用 Jest 和 React 测试库。当使用该logDOM方法检查组件内部的内容时，我看到的是：
<div
aria-label="grid"
aria-readonly="true"
class="ReactVirtualized__Grid ReactVirtualized__List"
role="grid"
style="box-sizing: border-box; direction: ltr; height: 0px; position: relative; width: 0px; will-change: transform; overflow-x: hidden; overflow-y: auto;"
tabindex="0"
/>
List 组件永远不会呈现。有任何想法吗？
推荐指数
解决办法
查看次数
Apollo Boost MockedProvider 在查询中使用片段时返回空对象
我有一个使用 Apollo Boost MockedProvider、Jest 和 React 测试库的工作测试，当我将返回的字段更改为 graphQL 时，fragment它停止工作。我错过了什么？
TicketGql.js
export default class TicketGql {
static VIEW_FRAGMENT = gql`
fragment ViewFragment on View {
viewId
versionId
name
description
orderedColumns {
columnId
name
descriptions {
translationId
lang
description
}
}
}
`;
static GET_TICKET_VIEW = gql`
query getView($viewId: ID!) {
view(viewId: $viewId) {
viewId
versionId
name
description
orderedColumns {
columnId
name
descriptions {
translationId
lang
description
}
}
}
}
`;
}
TicketGql.test.js
...
it('GET_TICKET_VIEW', async () => …推荐指数
解决办法
查看次数
如何使用 testing-library 测试 ag-grid 中的内容？
我正在尝试编写一些简单的测试，让我想要呈现的标题和数据按预期显示。我创建了一个 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 的输出中看到的那样。我正在 …
推荐指数
解决办法
查看次数
测试 Pressable 的按下状态
我有一个渲染 React NativePressable并使用pressed状态来改变显示的组件：
<Pressable testID="t">
{({ pressed }) => <Text style={pressed ? pressedStyle : unPressedStyle }>{title}</Text>
<Pressable>
这工作正常，但是当我运行测试覆盖率报告时，pressed状态被跳过。即使我press在可按下的事件上触发事件，也会发生这种情况，例如：
const { getByTestID } = render(<PressableComponent />);
const pressable = getByTestID('t');
fireEvent.press(pressable);
有没有办法pressed在测试期间触发状态，以便我可以测试该分支？
推荐指数
解决办法
查看次数
RTL中的getByText和screen.getByText有什么区别
我是React-Testing-Library 的新手，在网上找到了几个使用view.getByText('Greeting')and的例子screen.getByText('Greeting')，就像下面的代码一样。
它们之间有什么区别吗？
import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import { App } from "./App";
test("render the correct context", ()=>{
const view = render(<App />);
view.getByText("Greeting");
screen.getByText("Greeting");
});
谁能详细告诉我？
推荐指数
解决办法
查看次数
使用测试库 (React) 找不到按钮
我一定遗漏了一些很明显的东西，我有一个反应应用程序，它有一个带有多个按钮的左 div，每个按钮都有不同的文本。我想检查这些按钮中的每一个是否都已呈现。例如，为了找到其中一个按钮（使用测试库），我正在执行以下操作：
screen.getByText("/channels/i", { selector: "button" })
我也试过
screen.getByRole("button", { name: /channels/i })
但我总是得到结果
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/channels/i`
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
但正如你所看到的，它确实存在
像那样，我可能还有另外 10 个按钮，所以我不明白为什么它说没有可访问的角色。
我做错了什么？
推荐指数
解决办法
查看次数
React 测试库 - TypeError: expect(...).toHaveTextContent 不是函数
我正在按照一个简单的教程来学习反应测试库。
我有一个简单的组件，如：
import React, {useState} from 'react';
const TestElements = () => {
const [counter, setCounter] = useState(0)
return(
<>
<h1 data-testid="counter" >{ counter }</h1>
<button data-testid="button-up" onClick={() => setCounter(counter + 1)}>Up</button>
<button data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>
</>
)
}
export default TestElements
和一个测试文件，如：
import React from 'react';
import {render, cleanup} from '@testing-library/react'
import TestElements from './TestElements';
afterEach(cleanup);
test('should equal to 0', () => {
const { getByTestId } = render(<TestElements />)
expect(getByTestId('counter')).toHaveTextContent(0)
});
但是如果我运行测试，我会收到以下错误：
TypeError: expect(...).toHaveTextContent is …推荐指数
解决办法
查看次数
使用 testing-library 和 jest 测试 React 组件抛出的错误
遵循这篇博文中解释的 Kent C Dodds 的提供者模式，我有一个上下文提供者组件以及一个使用该上下文的钩子。
钩子防止在提供者之外使用它，
export function useUser() {
const { user } = useContext(UserContext) || {};
const { switchUser } = useContext(SwitchUserContext) || {};
if (!user || !switchUser) {
throw new Error('Cannot use `useUser` outside of `UserProvider`');
}
return { user, switchUser };
}
为了测试场景，我创建了一个TestComponent并在其中使用了useUser钩子。
function TestComponent() {
const { user, switchUser } = useUser();
return (
<>
<p>User: {user.name}</p>
<button onClick={switchUser}>Switch user</button>
</>
);
}
我是这样测试的
test('should throw error when not …推荐指数
解决办法
查看次数
标签 统计
jestjs ×6
reactjs ×6
javascript ×2
ag-grid ×1
graphql ×1
react-apollo ×1
react-native ×1
react-router ×1