[英]Enzyme's shallow().text() with React Native doesn't work as I expected
I'm trying to get some basic understanding around React Native tests w/ enzyme and react-native-mock .我试图对带有酶和react-native-mock 的React Native 测试有一些基本的了解。
Not included below: A custom compiler for mocha to get the babel goodness.下面不包括:用于 mocha 的自定义编译器以获得 babel 优点。
My code is as follows:我的代码如下:
Block.jsx
: Block.jsx
:
import React from 'react';
import {View} from 'react-native';
export default ({title, ui}) => (
<View>
Title: {title}
</View>
);
Block.test.js
import { shallow } from 'enzyme';
import { expect } from 'chai';
import {Block} from '../';
import React from 'react';
describe('<Block /> with props: title', () => {
it('should have correct props', () => {
expect(
shallow(<Block title="Something" />).props()
).to.deep.equal( {title:"Something"} );
});
it('should have correct title', () => {
expect(
shallow(<Block title="Something" />).text()
).to.equal( "Something" );
});
});
Mocha command:摩卡命令:
mocha --compilers js:./test/support/compiler.js --require react-native-mock/mock --recursive **/test/*.test.js --watch
Mocha test results:摩卡测试结果:
<Block /> with props: title
1) should have correct props
2) should have correct title
2 failing
1) <Block /> with props: title should have correct props <Text />:
AssertionError: expected { Object (children) } to equal { title: 'Something' }
+ expected - actual
{
- "children": [
- "Title: "
- "Something"
- ]
+ "title": "Something"
}
at Context.<anonymous> (components/test/Block.test.js:24:120)
2) <Block /> with props: title should have correct title <Text />:
AssertionError: expected '<View />' to equal 'Something'
+ expected - actual
-<View />
+Something
at Context.<anonymous> (components/test/Block.test.js:28:119)
props()
seems to get the correct values, but in a different format than described by the api props()
似乎得到了正确的值,但与 api 描述的格式不同text()
doesnt render the nodes textContent
, but instead, the stringified tag " <View />
" text()
不呈现节点textContent
,而是呈现字符串化标签“ <View />
”Given the component:给定组件:
import React from 'react';
import {View, Text} from 'react-native';
export default ({title, ui}) => (
<View>
<Text> The title...</Text>
{title}
</View>
);
props().children
is the array [<Text component instance>, "Something"]
props().children
是数组[<Text component instance>, "Something"]
So the follow test passes:所以下面的测试通过了:
it('should have correct props', () => {
expect(
shallow(<Block title="Something" />).props().children
).to.contain( "Something" );
});
Why is Enzyme API behaving differently that described in the docs?为什么 Enzyme API 的行为与文档中描述的不同?
Specifically looking at the docs shallow(<Block title="Something" />).text()
should equal something like: The title...Something
具体看文档shallow(<Block title="Something" />).text()
应该等于这样的: The title...Something
Am I doing something incorrect, or is it one the technologies I'm using?我做错了什么,还是我使用的技术之一?
html()
, render()
, update()
also don't seem to work with my setup html()
、 render()
、 update()
似乎也不适用于我的设置
EDIT: React native only works with shallow
at the moment编辑:阵营与本地唯一的作品shallow
的那一刻
textContent
方案一: textContent
的解决方案From an Enzyme example app:来自 Enzyme 示例应用程序:
const title = "Blah";
const wrapper = shallow(<Block title={title} />);
expect(wrapper.length).to.equal(1);
expect(wrapper.contains(<Text>{title}</Text>)).to.equal(true);
Ok the more semantic version of Alternative: props().children above is below.好的,上面的Alternative: props().children 的语义版本在下面。 This Github discussion also helped.这个Github 讨论也有帮助。
Block.js
: Block.js
:
import React from 'react';
import {View, Text} from 'react-native';
export default ({title, ui}) => (
<View>
<Text data={title}>{title}</Text>
</View>
);
Block.test.js
: Block.test.js
:
it('should have correct props', () => {
const title = title;
expect(
shallow(<Block title={title} />)
.find('Text') // Use selector to get certain children
.first() // Get the first child
.props() // Get its props
.data
).to.equal(title)
});
You can reference the specific prop you would like to test:您可以参考要测试的特定道具:
expect( shallow(<Block title="Something" />).prop('title') ).to.equal( "Something" );
text() is not doing what you are thinking here. text()没有做你在这里想的事情。 Have a look at the second example in the docs, shallow won't render out your <View>
tag看看文档中的第二个例子,shallow 不会渲染出你的<View>
标签
Another solution (very similar to props().children
) is to access children in prop另一种解决方案(与props().children
非常相似)是访问 props 中的 children
it('should have correct props', () => {
expect(
shallow(<Block title="Something" />).prop('children')
).toBe( "Something" );
});
你可以使用expect(wrapper.find(Foo).render().text()).to.equal('Hello World')
技巧
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.