The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

React Testing: Reusing test boilerplate

React Testing: Reusing test boilerplate

2:21
Setting up a shallow renderer for each test can be redundant, especially when trying to write similar tests that have slight tweaks. In this lesson, we go over how you can reduce some of the overlapping code so that each test only contains the unique pieces of the test.
Watch this lesson now
Avatar
egghead.io

Setting up a shallow renderer for each test can be redundant, especially when trying to write similar tests that have slight tweaks. In this lesson, we go over how you can reduce some of the overlapping code so that each test only contains the unique pieces of the test.

Avatar
Andreas
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.

Avatar
Trevor

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

In reply to Andreas
Avatar
Jernej

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

Avatar
Zachary Klein

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.

Avatar
Qualitype GmbH

@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;
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?