[英]Error while testing React component using Jasmine
I kept getting this error while testing a react component: 我在测试React组件时一直出现此错误:
Error: Invariant Violation: findComponentRoot(..., .0): Unable to find element.
错误:始终违反:findComponentRoot(...,.0):无法找到元素。 This probably means the DOM was unexpectedly mutated (eg, by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent.
这可能意味着DOM被意外地突变(例如,通过浏览器),通常是由于在使用表,嵌套标签(如<form>,<p>或<a>)或使用非SVG元素时忘记了<tbody>在<svg>父级中。 Try inspecting the child nodes of the element with React ID ``.
尝试检查带有React ID``的元素的子节点。
Code I used to test: 我用来测试的代码:
describe(`Method: flattenData`, () => {
const tests = [
{
toFlatten: {
'key1': 'k',
'key2': 'n',
'key3': 'o'
},
expectedResult: 'key1: k; key2: n; key3: o'
}
];
tests.forEach((test) => {
expect(instance.flattenData(test.toFlatten)).toEqual(test.expectedResult);
});
});
I fixed this bug by adding a parameter to the render call. 我通过向render调用添加参数来修复此错误。 This forces the component (which is just a
<td> </td>
to be rendered inside a table. 这将强制组件(只是
<td> </td>
呈现在表中。
Before: 之前:
[container, instance] = render(TableCell, {
data: `content`,
dataTh: `content`,
key: `content`,
dataLocator: `content`
});
With the fix: 解决方法:
[container, instance] = render(TableCell, {
data: `content`,
dataTh: `content`,
key: `content`,
dataLocator: `content`
}, `table`);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.