CODEWITHSUNDEEP
javascriptreactjsunit-testingjestjsenzyme
Arsen Cenko
Arsen Cenko

Reputation: 95

Code Coverage is to low on 'expecting to render' test in a specific Component

i am writing a simple test on a particular component of my application using react-test-render, and the test is expecting the component to render.

I have tried to implement the properties which are required to the component on the test file and still no results, the test coverage of component is still to low. the test is passing, i think the problem is on the functions.

   class Component extends React.PureComponent { 
        constructor(props, context) {
            super(props, context);

            this.function1 = this.function1.bind(this);
            this.function2 = this.function2.bind(this);
        }

        handleRef(element) {
            const { var1 } = this.props;

            this.iframe = element;
            if (var1) {
                var1(element);
            }
        }

        function2() {
            const {
                var2,
                var3,
                var4,
            } = this.props;

           if (!var2(this.iframe) && var3) {
           var3();
           localytics.tagEvent({ pageName: 'string' });
           return;
       }

       if (var3) {
            var3();
            performanceLog('The iframe has loaded at: ');
            localytics.tagEvent({ pageName: 'homepage:ok' });
       }
   }

       render() {

        //render html

     }
 }

AppFrame.propTypes = {
   //proptypes 
};

 AppFrame.defaultProps = {
      //default props
 };

 export default withStyles(styles)(AppFrame);

the test code :

import React from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16.3';
import renderer from 'react-test-renderer';

import AppFrame from '../index';

configure({ adapter: new Adapter() });

describe('<AppFrame />', () => {
   it('Expect to render', () => {
     const renderedComponent = renderer.create(
        <AppFrame var1="test" var2={() => {}} />
     ).toJSON();

expect(renderedComponent).toMatchSnapshot();
});
});

test coverage screenshot: coverage

Upvotes: 2

Views: 622

Answers (1)

Sasha
Sasha

Reputation: 5944

Snapshot testing covers only rendered items, it usually doesn't take into account other methods in class. You can call the instance methods, and check if stubbed props was called, i.e.:

Here is an example with enzyme's shallow renderer:

import { shallow } from 'enzyme';

describe('<AppFrame />', () => {
  const onErrorStub = jest.fn();

  it('Expect to render', () => {
    const renderedComponent = shallow(
       <AppFrame
          src="test"
          onLoad={() => {}}
          onError={onErrorStub}
          isLoadedSuccessfully={() => false} />
    );

    renderedComponent.instance().handleOnLoad();
    expect(onErrorStub).toBeCalled();
    });
});

You might also want to test if stubs were called with specific arguments.

Also, check out coverage folder in your project - there should be a detailed report on what is (not) covered.

Upvotes: 1

Related Questions