React Testing: Reusing test boilerplate

    function renderLikeCounter(isActive) {
      const renderer = TestUtils.createRenderer();
      renderer.render(<LikeCounter count={5} isActive={isActive} />);
      return renderer.getRenderOutput().props.className.includes('LikeCounter--active');
    }

I am wondering about how this code actually works: we have a function param = isActive and a prop name isActive. How does it figure that out? In Java this would only work with this.isActive = isActive.

Hi Andreas,

In this lesson, we are using the JSX syntax for our component, which is an XML-like syntax supported by React. JSX "...lets you create JavaScript objects using HTML syntax", so when we use isActive={isActive} on our <LikeCounter /> JSX component, under the hood it is just passing a JavaScript object that looks like {isActive: true}.

To learn more about how JSX works under the hood, the React JSX docs may be helpful: https://facebook.github.io/react/docs/displaying-data.html

Additionally, the following article might be helpful to better explain how React converts JSX into component instances: https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html

Just personal preference (or suggestion): I returned className property from function and for class name inclusion I use expect(<list>).toInclude(<item>) (or toExclude). :)

This video mostly makes up for what was lacking in the first one. :) But I think that this video would stand well on it's own, even without the preceding one. Just my two credits.

@trevordmiller I'm interested in seeing how would I test a stateless component that just receives methods? Would I have to recreate those methods to be able to instantiate the component?

Sorry, new to the testing. Thanks in the advance :)

import React from 'react';

const TodoAddNew = ({value, handleNewTodoInputChange}) => {
    return (
        <footer className="content-container">
            <label htmlFor="newTodo">So what's next?:</label>

            <input id="newTodo" type="text"
                   name="newTodoInput"
                   autoComplete="off"
                   spellCheck="false"
                   className="form-control"
                   placeholder="take out the trash 😢"
                   value={ value }
                   onChange={ handleNewTodoInputChange }/>

            <button className="btn btn-submit" type="submit">Submit</button>
        </footer>
    );
};

TodoAddNew.propTypes = {
    value: React.PropTypes.string,
    appendField: React.PropTypes.func.isRequired,
    handleNewTodoInputChange: React.PropTypes.func.isRequired
};

export default TodoAddNew;