CODEWITHSUNDEEP
reactjsjestjsenzyme
Brian Kalski
Brian Kalski

Reputation: 957

Jest coverage still flagging line after applying test

I have the following function in a React component that I am testing.

renderLoginLink(caption) {
    return (
      <a href="#" id="lnkAuthenticateWithGoogle" onClick={() => this.props.actions.authenticateWithGoogle()}>
       {caption}
      </a>
    );
  }

When I run jest --coverage that function is getting flagged. I have written the following test for that function which passes. 

describe('Login', () => {
    it('calls renderLoginLink()', () => {
        const actions = {
            authenticateWithGoogle: jest.fn()
        }
        const expectedNode = <a href="#" id="lnkAuthenticateWithGoogle" onClick={() => actions}>testCaption</a>

        let node = document.createElement('div');
        let instance = ReactDOM.render(<Login {...initialState} />, node);
        expect(JSON.stringify(instance.renderLoginLink("testCaption"))).toEqual(JSON.stringify(expectedNode));
    });
});

I'm not sure what I am missing or what other test I could write that would satisfy jest coverage.

Upvotes: 0

Views: 223

Answers (2)

Brandon Mitchell
Brandon Mitchell

Reputation: 369

Try using shallow and simulate from enzyme:

function setup() {
  const props = {
    actions: {
      authenticateWithGoogle: jest.fn(),
    },
  };

  return { props };
}

describe('Login', () => {
  const props = setup();
  const component = shallow(<Login {...props} />);

  it('calls renderLoginLink() ', () => {
    const loginLink = component.find('lnkAuthenticateWithGoogle');
    loginLink.simulate('click');
    expect(props.actions.authenticateWithGoogle).toBeCalled();
  });
});

Upvotes: 2

Andy Ray
Andy Ray

Reputation: 32066

You're telling jest that the onclick handler should equal this:

() => actions

which is a function that returns an object and does nothing else.

Instead, I would render the component with shallow(), pass in the authenticateWithGoogle function as a jest stub, and verify clicking on the <a> calls the mock.

Upvotes: 1

Related Questions