javascript

  • // Other Libraries import React, { Component } from ‘react’; import { connect } from ‘react-redux’; // Our Code import { verify } from ‘.
  • /helpers/test_helper.js’; import TestUtils from ‘react-addons-test-utils’; // Component to Test import Verify from ‘.
  • this.renderLoading() : this.renderUnableToVerify() : this.renderUnableToVerify() } } function mapStateToProps(state) { return { userVerified: state.authReducer.userVerified } } export default connect(mapStateToProps, { verify })(Verify);
  • this.props.verify(token) : ”; } // Once user is successfully verified, render this content.
  • I’m trying to test my React application and I can successfully test reducers and component states with Simulate on a onClick handler, but I can’t seem to test setting a component state when the change in state is based on an async request.

I’m trying to test my React application and I can successfully test reducers and component states with Simulate on a onClick handler, but I can’t seem to test setting a component state when the change in state is based on an async request. Would love some help 🙂 Thanks!

@ng_real_ninja: React TDD – Setting the component-level state asynchronously mocha + chai #angularjs…

import jsdom from ‘jsdom’; import _$ from ‘jquery’; // _$ instead of $ because ‘$’, will try and reach out to browser which is not avail. import TestUtils from ‘react-addons-test-utils’; import ReactDOM from ‘react-dom’; import chai, { expect } from ‘chai’; import React from ‘react’; import { Provider } from ‘react-redux’; import { createStore } from ‘redux’; import reducers from ‘../../src/reducers/index.js’; import chaiJquery from ‘chai-jquery’; // 1. Set up testing environment to run like a browser in the command line // window (browser global env)–> global (in terminal) global.document = jsdom.jsdom(““); global.window = global.document.defaultView; // hooking jQuery to our version of window // don’t go out to the DOM, just be responsible for the window created above const $ = _$(global.window); // 2. Build ‘renderComponent’ helper that should render a given react class /** * [renderComponent description] * @param Class ComponentClass React Class or Functional Component to render * @param Object props Props for the Component to render * @param Object state Setting a temporary state for test purposes * @return jQueryWrapped DOM selection */ function renderComponent(ComponentClass, state, props) { // componentInstance –> rendered instance of our component // element is required because redux expects components to be // rendered within a element const componentInstance = TestUtils.renderIntoDocument( ); // ReactDOM.findDOMNode –> gets reference to our componentInstance HTML return $(ReactDOM.findDOMNode(componentInstance)); // produces HTML } // 3. Build helper for simulating events // Adding simulate to jQuery library $.fn.simulate = function(eventName, value) { // “this” refers to the jQuery element form $(‘element’) e.g. $(‘div’); // jQuery selectors return an array if (value) { this.val(value); } TestUtils.Simulate[eventName](this[0]); } // 4. Setup chai-jQuery chaiJquery(chai, chai.util, $); export { renderComponent, expect };

// Other Libraries import React, { Component } from ‘react’; import { connect } from ‘react-redux’; // Our Code import { verify } from ‘../../../../actions/auth.js’; import { BUSINESS_TEAM_NAME } from ‘../../../../../utils/constants.js’; class Verify extends Component { constructor(props) { super(props) this.state = { validURL: false } } componentWillMount() { let params = window.location.href, token = null; // Check if URL contains token required by server if (params.includes(‘?’) && params.includes(‘=’) && params[1].split(‘=’)) { if (params.indexOf(‘token’)) { let index; params = params[1].split(‘=’); index = params.indexOf(‘token’); token = params[index + 1]; this.setState({ validURL: true }); } else { this.setState({ validURL: false }) } } // If valid token exists, verify the user token != null ? this.props.verify(token) : ”; } // Once user is successfully verified, render this content. renderVerifiedContent() { return (

Welcome to {BUSINESS_TEAM_NAME}

Your account has now been verified.

) } // Render verification error renderLoading() { return (

Attempting to verify your account…

) } renderUnableToVerify() { return (

Verification Error:

We are unable to verify your account right now. Please check that you clicked on the link in your email. If that doesn’t work, try right-click and copy the link. Otherwise, try again later. We apologise for this inconvenience.

Hope you have a great day!

{BUSINESS_TEAM_NAME} Team

) } render() { return this.state.validURL ? this.props.userVerified != undefined && this.props.userVerified ? this.renderVerifiedContent() // Only render loading if request is still in progress, // otherwise user might still think its being verified : this.props.userVerified == undefined ? this.renderLoading() : this.renderUnableToVerify() : this.renderUnableToVerify() } } function mapStateToProps(state) { return { userVerified: state.authReducer.userVerified } } export default connect(mapStateToProps, { verify })(Verify);

javascript

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.