CODEWITHSUNDEEP
reactjsreact-nativejestjsenzyme
Bikash
Bikash

Reputation: 477

How do I test the Elements value in React Native unit testing using Enzyme (Jest)

I have the following Flash.js component to Test

export default class SnapshotChild extends Component {

render() {
    return (
        <View>
            <Text>First Text</Text>
            <Text>Second Text</Text>
        </View>
    );
}}

And My test cases is

describe('Flash Card', () => {
      const flash = shallow(<Flash />);

      it('test the `<Text/>` value',()=>{
       console.log(flash.debug());
       expect(flash.find('Component Text').at(0).text()).toEqual('First Text');
      })});

Now when I run this code using npm test the result is showing 

Expected value to equal:
  "First Text"
Received:
  "<Text />"

My expected result is "First Text" and getting "Text tag". What's the wrong, please please somebody help me on this. Thanks in advance.

Upvotes: 3

Views: 4897

Answers (2)

Sayantan Dey
Sayantan Dey

Reputation: 27

After installing all dependencies,add setup.js

    import { configure } from 'enzyme'import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

In app.test.js :

import {shallow} from 'enzyme'import App from '../App';
import React from 'react'describe('test login module',()=>{
    const appWrapper = shallow(<App/>);
    it('renders app module correctly',()=>{
        expect(appWrapper).toMatchSnapshot();
    });
});

Here is a Link

you may refer

Upvotes: 0

skyboyer
skyboyer

Reputation: 23735

Since you use shallow() nested <Text /> are not rendered. So method .text() does not know how text will look like. So it seems just returning element name even without all its props.

Sure you can replace shallow() with mount() but I suggest you using amazing .toMatchSnapshot() here.

Then your tests would look like

  const flash = shallow(<Flash />);

  it('has valid default output',()=>{
   expect(flash).toMatchSnapshot();
  })});

and that would check for both <Text /> elements and text inside as well.

[UPD] additionaly on why .text() works this way. Image you had the same code with slightly different(but equal!) syntax:

<Text children={'First Text'} />

How could enzyme's helper .text() know what to return here without rendering node?

[UPD2] if there is no way to use toMatchSnapshot() it's still possible to test props directly:

expect(flash.find(Text).at(0).props().children).toEqual('First Text')

But toMatchSnapshot is much better in several ways(readability, maintainability, flexbility and other *abilities)

Upvotes: 3

Related Questions