- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试为一些通过 React 组件渲染的 d3 元素编写测试,我希望能够挑选出页面上的一些 svg 元素并检查它们的宽度以查看它们是否正常运行正如预期的那样。
我不完全确定react test-utils文档在说ReactComponent树时期望什么。
array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className)
我正在通过以下方式将我的组件渲染到文档中:
var component = TestUtils.renderIntoDocument(
<ProgressCircle percentage={75} />
);
我可以通过执行以下操作成功检查 css className:
it('should render an element with the class "progress-circle"', function() {
var circleContainer = TestUtils.findRenderedDOMComponentWithClass(component, 'progress-circle');
expect(circleContainer).toBeDefined();
});
但我不明白我需要为其中一些需要 ReactComponent 树的 find/scry 方法提供什么。
http://facebook.github.io/react/docs/test-utils.html
编辑:
为了更清楚地说明,该组件的渲染 DOM 如下所示:
<div class="progress-circle">
<svg>
<g>
</g>
</svg>
</div>
...我正在尝试找到该元素。
最佳答案
据我了解,TestUtils.renderIntoDocument()
返回一个ReactComponent树。然后您可以从该树中提取各个组件来测试它们。
例如,这个测试对我来说通过了。
it('demonstrates the ReactComponent tree', function() {
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var MyComponent = require('../MyComponent.jsx');
var renderedTree = TestUtils.renderIntoDocument(<MyComponent />);
var renderedMyComponent = TestUtils.findRenderedDOMComponentWithClass(renderedTree, 'my-component')
expect(TestUtils.isDOMComponent(renderedMyComponent)).toBe(true);
});
因此,如果您只是渲染单个组件,它将是 renderedTree
的根。但您仍然必须在 renderedTree
中找到渲染的 MyComponent
,然后才能检查它的断言。
关于reactjs - 当react test-utils引用ReactComponent树时,它期望什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28094336/
我正在构建一个小型 React js 应用程序,但收到此错误: Uncaught Error: Invariant Violation: exports.render(): A valid React
我正在学习 React 教程,但我被卡住了。我正在尝试更改控制台中元素的状态。但是当我输入这个时 reactComponent.setState({ isVisible:false }) 我从
我需要一个正则表达式来查找 或 替换为空字符串。它们可以跨多行定义。 这不是 html 或 xhtml,它只是一个包含 的文本字符串和 字段示例: FieldArray 示例:
我需要找到组件的offsetLeft。 componentDidMount(){ var tesNo =ReactDOM.findDOMNode(this.refs.dropDown.
我似乎误解了 React.js 的一些基本部分。 在http://facebook.github.io/react/docs/component-api.html 它说,一个 react 组件有像 s
我正在构建这个简单的 React 应用程序,我遇到了这个错误,我试图调试它但还没有成功。我确信我一定遗漏了一些很明显的重要信息。 *Error: VideoDetail.render(): A val
我正在将 SVG 导入到我的组件中,并使用 ReactComponent 将它们作为组件导入 IE。 import { ReactComponent as D1 } from '../../../as
我在控制台中收到上述错误,即使我正确地返回了要渲染的组件。以下代码中 errorTexts = ["email is invalid"] 的值 if(@state.errorTexts.length>
我使用 CRA 创建了一个新的 React 应用程序。现在,我想创建一个导出所有图标的索引文件。为此,我将所有图标存储在我的 src/icons 中。文件夹并创建一个索引文件,将我的图标导出为 Rea
我使用 CRA 创建了一个新的 React 应用程序。现在,我想创建一个导出所有图标的索引文件。为此,我将所有图标存储在我的 src/icons 中。文件夹并创建一个索引文件,将我的图标导出为 Rea
尝试将 svg 加载为 ReactComponent 时出现以下错误。 Element type is invalid: expected a string (for built-in compone
我正在尝试使用 TypeScript 将 .svg 文件导入为 React 组件。 根据 React 文档,这样做是这样的: 从 './Icon.svg' 导入 { ReactComponent as
使用时: } /> 在typescript LoginLayout中提示错误时: Type '{ history: History; location: Location; match: match
使用时: } /> 在typescript LoginLayout中提示错误时: Type '{ history: History; location: Location; match: match
我是一名优秀的程序员,十分优秀!