Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can I use test double with enzyme on client end to test if method runs on button click ? #297

Closed
Sandeep3005 opened this issue Nov 11, 2017 · 2 comments

Comments

@Sandeep3005
Copy link

Sandeep3005 commented Nov 11, 2017

New to TDD.
Making an app with Meteor and React using mocha and expect for client end.
Can I use test double with enzyme to test the functionality of button click? and other features.

Example
Header.jsx

export const PrivateHeader = (props) => {
  logout = () => {
    Accounts.logout();
  }
  return (
    <div className="header">
      <div className="header__content">
        <h1 className="header__title">{props.title}</h1>
        <button className="button button--link-text" onClick={this.logout}>Logout</button>
      </div>
    </div>
  );
};

PrivateHeader.propTypes = {
  title: React.PropTypes.string.isRequired
};

** Header.test.js**

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { mount } from 'enzyme';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15.4';

import Header from './Header';

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

if (Meteor.isClient) {
  describe('Header Test', function () {
    it('should logout user on button click', function() {
      const titleProp = 'Test Title';
      const wrapper = mount(<PrivateHeader title={titleProp} />);
      wrapper.find('button').simulate('click');
      /*    How to proceed from now     */
    });
  });
}

Please if someone could guide me in the right direction.
Or if not test double which library will be most suitable, I don't wanna make any change in souce code for testing.

@searls
Copy link
Member

searls commented Nov 16, 2017

It may be possible, but for something that integrated, I don't think I'd recommend using a test double library. I'd create an artificial UI event instead, as opposed to trying to use testdouble.js to poke a hole in any particular method. td.js is designed to fake out APIs you own, so that it can influence their design by responding to pain—I suspect in this case you'd be faking methods you don't own, which would result in useless pain.

@searls searls closed this as completed Nov 16, 2017
@searls
Copy link
Member

searls commented Nov 16, 2017

(Note, I am not an expert in testing React components and may be off base)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants