shallow text() returns 'TouchableText' instead text itself.

[donghopark]

Thanks for reporting an issue to us! We're glad you are using and invested in Enzyme.
Before submitting, please read over our commonly reported issues to prevent duplicates!

All common issues

• common issues

Notoriously common issues

• Webpack build issues
• Cannot find module 'react-dom/lib/ReactTestUtils'
• Query Selector fails
• Testing third party libraries

If you haven't found any duplicated issues, please report it with your environment!

Current behavior

const text = 'some text';
const wrapper = shallow(<Text>text</Text>);
expect(wrapper.text()).toBe(text);

Enzyme shallow returns '<TouchableText />'

Expected behavior

const text = 'some text';
const wrapper = shallow(<Text>{text}</Text>);
expect(wrapper.text()).toBe(text);

Enzyme shallow returns 'some text'

Your environment

API

• [ v ] shallow
• mount
• render

Version

library	version
enzyme	3.10.0
react	16.8.6
react-dom	16.8.6
react-test-renderer	16.8.3
adapter (below)	1.14.0

Adapter

• [ v ] enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[ljharb]

This is expected because a shallow wrapper of X is whatever X renders, not X itself - additionally, shallow takes a react element, not a string.

What happens if you shallow wrap a component that renders your desired text?

[donghopark]

The problem here is that it returns 'TouchableText'. It looks happening only in some environment. In other environments, it returns 'some text' correctly.

[ljharb]

One issue i see is that your react-test-renderer version is 16.3 while your react is 16.8; those always need to be the same minor.

Separately though, what does shallow(<Text />).debug() print out? If it renders a TouchableText component that in turn renders text, then you'd need to do shallow(<TouchableText />).text() to get that text.

[donghopark]

react and react-test-renderer minor versions are all 8. 16.8.3 and 16.8.6. Do you mean that all patch ( the latest) should be same?

[ljharb]

Oh, nvm, i misread. In that case that’s not it - the other point still stands, tho.

[ParkDongJo]

I have same Issue.

[ParkDongJo]

One issue i see is that your react-test-renderer version is 16.3 while your react is 16.8; those always need to be the same minor.

Separately though, what does shallow(<Text />).debug() print out? If it renders a TouchableText component that in turn renders text, then you'd need to do shallow(<TouchableText />).text() to get that text.

TouchableText is what? i can't search about TouchableText element in google or anywhere..

also impossible about that shallow(<TouchableText />).text(), because can't import TouchabeText from anywhere

[ljharb]

Can you share the code for “Text”?

If this is the react native primitive, without an actual react native enzyme adapter, you won’t be able to reliably use enzyme with react - follow #1436 for that.

[donghopark]

shallow().debug() results in below.

<TouchableText forwardedRef={{...}} accessible={true} allowFontScaling={true} ellipsizeMode="tail">
some text
</TouchableText>

[ljharb]

And the code for the Text component?

[donghopark]

What do you mean by 'the code for the Text component'?

const text = 'some text';
const wrapper = shallow(<Text>text</Text>);
expect(wrapper.text()).toBe(text);

is the code to test the enzyme and the Text component. 'Text' is the primitive RN component.

[ljharb]

OK, so then the answer is

If this is the react native primitive, without an actual react native enzyme adapter, you won’t be able to reliably use enzyme with react - follow #1436 for that.

enzyme does not support React Native without a react-native adapter, which as far as I know does not yet exist.

Closing in lieu of #1436.

[matborowiak]

this should work

const text = 'some text';
const wrapper = shallow(<Text>{text}</Text>);
const textNode = wrapper.find('Text')

expect(textNode.children().text()).toEqual(text);

[RahulkumarRV]

const text = 'some text';
const wrapper = shallow({text});
const textNode = wrapper.find('Text')

expect(textNode.children().text()).toEqual(text);
it works for me