hard_dependency.ts

import socialAuth from "path/to/socialAuth";

export default class SocialLoginForm extends Component {
    loginWithSocialAccount = (e: React.SyntheticEvent) => {
        const dataProvider = e.target.dataset.provider
        socialAuth.login(dataProvider);
    };

    render() {
        const { price } = this.state;
        return (
            <div>
                <button
                    data-provider="facebook"
                    onClick={this.loginWithSocialAccount}
                >
                    Facebook
                </button>
                <button
                    data-provider="twitter"
                    onClick={this.loginWithSocialAccount}
                >
                    Twitter
                </button>
            </div>
        );
    }
}

/*
Easy enough, but what’s wrong with this example. It has a hardcoded dependency. 
And problems start when you try to test such a component. 
*/

test("it should redirect me to Facebook Login page, when I click FB button", () => {
  const page = shallow(<SocialLoginForm />);
  const fbButton = component.find(“button”).first();
  fbButton.simulate("click");                     
  // How can we test that socialAuth.login("facebook") have been called ?        
})

// the other problem that your test becomes integration since you need to 
// integrate your component with another one. And socialAuth can have another
// dependency inside of it that you will need to care about.