CODEWITHSUNDEEP
javascriptreact-nativetestingjestjsenzyme
johntanquinco
johntanquinco

Reputation: 1393

Jest test validate data prop

I am new to jest and wanted to learn basics of how the test is written. How to write a simple test that validates uri contains/returns value?

renderProfileImage () {
    const apiUrl = 'site.com'
    const profileImagePath = this.props.data.field_profile_image

    if (profileImagePath !== '') {
      return <Image
        style={styles.profile}
        source={this.state.imageLoading ? require('../img/profileImagePlaceholder.png') : { uri: `${apiUrl}${profileImagePath}` }}
        onLoadEnd={(e) => this.setState({ imageLoading: false })}
      />
    }

say this.props.data.field_profile_image returns /photo.png

Upvotes: 1

Views: 905

Answers (1)

Brian Adams
Brian Adams

Reputation: 45830

Remember that "React elements are plain objects":

import * as React from 'react';
import renderer from 'react-test-renderer';

import { MyComponent } from './path-to-your-component';

describe('renderProfileImage', () => {
  it('should set the correct uri', () => {
    const comp = renderer.create(<MyComponent data={{
      field_profile_image: '/path-to-the-image'
    }}/>).root.instance;
    // element is just an object representing an <Image>...
    const element = comp.renderProfileImage();
    // ...so check that element.props.source was set correctly
    expect(element.props.source).toEqual({ uri: 'site.com/path-to-the-image' });
  });
});

Upvotes: 1

Related Questions