DEV Community: Luke Ghenco

How To Use The React Context API

Luke Ghenco — Wed, 10 Oct 2018 14:38:16 +0000

Reacting to Context

If you’ve recently been hearing a lot about the new React Context API and wanted to know more about it, this post is for you. This article will show some examples of how to use React context for managing shareable state and actions while avoiding the dreadful issues related to Prop Drilling in a React app.

source: https://www.dictionary.com/browse/context

Building an Account Profile App

In the following walkthrough, we are going to be building a simple Account Profile app. Something like this:

Initial Component and File structure

Using the above mock, you can see that we have 3 parts to the app:

A navigation bar with a link to a home page and the account’s username
A detail component that displays the account info
A form to create a new username or change the membership level of an account

To follow along with the code in this app, run the following commands to bootstrap the project.

$ npx create-react-app account-profile-app
$ cd account-profile-app
$ yarn add react-router-dom // or npm install react-router-dom

The first thing we need to do is lay out the foundational component structure of the app. We will then connect the components to an AccountProvider component created with the Context API.

Setup and create the necessary files to make the following file structure:

| src 
 | NavigationBar.jsx
 | AccountProfile 
 index.jsx 
 AccountDetails.jsx 
 AccountUpdate.jsx 
 App.jsx 
 index.js

For the navigation bar, we need to create a stateless component called NavigationBar. This will display links to the home page and the account profile page.

// NavigationBar.jsx

import React from 'react'
import { Link } from 'react-router-dom'

const NavigationBar = ({ username }) => (
  <div>
    <Link to="/">Home</Link>
    <Link to="/account/profile">{username}</Link>
  </div>
)

export default NavigationBar

Now, let’s build the AccountDetails component that will display the account’s username, date joined, and membership level.

// AccountProfile/AccountDetails.jsx

import React from 'react'

const AccountDetails = ({ username, dateJoined, membershipLevel }) => (
  <div>
    <p>Username: {username}</p>
    <p>Date Joined: {dateJoined}</p>
    <p>Membership Level: {membershipLevel}</p>
  </div>
)

export default AccountDetails

Next, we can create the AccountUpdate component that will be a basic form allowing the creation of a new username or change a membership level. This component will also need a small amount of internal state to handle on change and form submission events.

// AccountProfile/AccountUpdate.jsx

import React from 'react'

class AccountUpdate extends Component {
  state = {
    username: this.props.username,
    membershipLevel: this.props.membershipLevel
  }

  handleOnChange = ({ target: { value, name } }) => {
    this.setState({
      [name]: value
    })
  }

  render () {
    const { membershipLevel, username } = this.state

    return (
      <div>
        <form>
           <label htmlFor="username">New Username</label>
           <div>
             <input 
               type="text" 
               name="username" 
               value={usernameValue} 
               onChange={this.handleOnChange} 
             />
           </div>
           <label htmlFor="membershipLevel">Membership Level</label>
           <div>
             <select 
               value={membershipLevel} 
               name="membershipLevel"
               onChange={this.handleOnChange}
             >
               <option value="Bronze">Bronze</option>
               <option value="Silver">Silver</option>
               <option value="Gold">Gold</option>
             </select>
           </div>
           <button>Save</button>
         </form>
      </div>
    )
  }
}

export default AccountUpdate

Now that the the initial AccountUpdate and AccountInfo components are built, we should place them inside of an AccountProfile component.

// AccountProfile/index.jsx  

import AccountDetails from './AccountDetails'
import AccountUpdate from './AccountUpdate'

const AccountProfile = ({ account: { username, dateJoined, membershipLevel } }) => (
  <Fragment>
    <AccountDetails username={username} dateJoined={dateJoined} membershipLevel={membershipLevel} />
    <AccountUpdate username={username} membershipLevel={membershipLevel} />
  </Fragment>
)

export default AccountProfile

Finally, we can mount the components we created to the App component wrapped inside a Router component. We also need to create an account object that will be our temporary state holder for account info until we add in the AccountProvider.

// App.jsx

import React from 'react'
import { BrowserRouter as Router, Link } from 'react-router-dom'
import NavigationBar from './NavigationBar'
import AccountProfile from './AccountProfile'

const account = {
  username: 'Crunchy Crunch',
  dateJoined: '9/1/18',
  membershipLevel: 'Silver'
}

const App = () => (
  <Router>
    <Fragment>
      <Navbar username={username} />
      <Switch>
        <Route 
          exact 
          path="/" 
          render={() => <div>Home</div>}
        />
        <Route 
          exact 
          path="/account/profile" 
          render={() => <AccountProfile account={account} />} 
        />
      </Switch>
    </Fragment>
  </Router>
)

export default App

Adding Context to our App

With the initial components we created, the account data for the NavigationBar and AccountProfile was hard-coded in the App component and then passed down as props to the other components. The passing down of props is not out of hand yet, but this could be troublesome as our app grows.

Currently, we are passing down props about the account from the App component to the child NavigationBar component. We are also passing down props from the App component to the child AccountProfile component, which then passes props down to its children. This is where passing props is starting to become a problem in our app and a typical case of “Props Drilling”, as mentioned earlier. We want to make our app more flexible and not have to adjust code in so many places during a refactor to avoid brittle code. This is where a solution like Redux or MobX might have been used, but now we can use React Context to simplify this problem for us.

Our solution for this will be to to set up a data provider using the context API. This will allow us to share state with our components, while using a Singleton Design Pattern for our data store that all of our components can listen / subscribe too.

So for the next step, let’s set up an AccountProvider and an AccountConsumer by creating a new context object and React component that contains local state. We will later integrate this data provider with our components to get dynamic data.

// src/providers/AccountProvider.jsx

import React from 'react'

// Set Up The Initial Context
const AccountContext = React.createContext()

// Create an exportable consumer that can be injected into components
export const AccountConsumer = AccountContext.Consumer

// Create the provider using a traditional React.Component class  
class AccountProvider extends Component {
  state = {
    username: 'Crunchy Crunch',
    dateJoined: '9/1/18',
    membershipLevel: 'Silver'
  }

  render () {
    return (
      // value prop is where we define what values 
      // that are accessible to consumer components
      <AccountContext.Provider value={this.state}>
        {this.props.children}
      </AccountContext.Provider>
    )
  }
}

export default AccountProvider

Now that we’ve created the AccountProvider & Account Consumer , we can connect / render it on the top level of our App component. This will make the AccountProvider values accessible to all children components. We will also remove our temporary account object, and its use as a prop passed to the NavigationBar and AccountProfile components.

// App.jsx — update

// ... previous imports
import AccountProvider from './providers/AccountProvider'

// remove const account

const App = () => (
  <AccountProvider>
    <Router>
      <Fragment>
        <NavigationBar />
        <Switch>
          <Route 
            exact 
            path="/" 
            render={() => <div>Home</div>}
          />
          <Route 
            exact 
            path="/account/profile" 
            component={AccountProfile} 
          />
        </Switch>
      </Fragment>
    </Router>
  </AccountProvider>
)

Let’s talk about what we’ve completed so far:

Setup our components
Created an AccountProvider using the context API
Created an AccountConsumer that will be used by child components to access values from the AccountProvider
Mounted the AccountProvider as the top level component in our application
Removed our temporary account object and simplified our props

Everything is in good shape so far, but how do we make our components subscribe to our AccountProvider? Let’s take a shot with the NavigationBar first.

// NavigationBar.jsx — Update

// ... previous imports
import { AccountConsumer } from '../providers/AccountProvider'

const NavigationBar = () => (
  <AccountConsumer>
    {({ details: { username } }) => (
      <div> 
        <Link to="/">Home</Link>
        <Link to="/account/profile">{username}</Link>
      </div>
    )}
  </AccountConsumer>
)

export default NavigationBar

Ok, so that was a lot. Let’s do one more recap of our accomplishments:

We imported the AccountConsumer
We rendered the AccountConsumer as the top level component of the NavigationBar
We defined a callback block that passed the username value from the local state of the AccountProvider
We rendered the original code of the NavigationBar component that now uses the new username prop given by the AccountConsumer

This made the NavigationBar an active subscriber of the AccountProvider. If the username state is changed in the AccountProvider, it will now render that new value in the NavigationBar.

Next, let’s update the AccountDetails, using the same pattern, but passing the values username, membershipLevel, and dateJoined.

// AccountProfile/AccountDetails.jsx — Update

// ... previous imports 
import { AccountConsumer } from '../providers/AccountProvider'

const AccountDetails = () => (
  <AccountConsumer>
    {({ username, dateJoined, membershipLevel }) => (
      <div>
        <p>Username: {username}</p>
        <p>Date Joined: {dateJoined}</p>
        <p>Membership Level: {membershipLevel}</p>
      </div>
    )}
  </AccountConsumer>
)

export default AccountDetails

Awesome job! We are showing data defined in the AccountProvider inside of our NavigationBar & AccountDetails components.

We just need to make one adjustment to the AccountProfile component to remove unused prop drilling now.

// AccountProfile/index.jsx - Update  

import AccountDetails from './AccountDetails'
import AccountUpdate from './AccountUpdate'

const AccountProfile = () => (
  <Fragment>
    <AccountDetails />
    <AccountUpdate />
  </Fragment>
)

export default AccountProfile

Yay, we are at the halfway point of the application. Feel free to take a break and read up on passing props from context providers to children components (I highly recommend “React’s New Context API”). Continue on to see how to dynamically update state in our AccountProvider.

Dynamically Updating Provider Context State

To complete the following task, we will need to create a new function in our AccountProvider that can update the local state for our subscribed components to receive.

Let’s call this function updateAccount() and then bind it to the state object.

// AccountProvider.jsx — update

import React from 'react'

const AccountContext = React.createContext()

export const AccountConsumer = AccountContext.Consumer

class AccountProvider extends Component {
  state = {
    username: 'Crunchy Crunch',
    dateJoined: '9/1/18',
    membershipLevel: 'Silver',
    updateAccount: updatedAccount => this.updateAccount(updatedAccount)
  }

  updateAccount = updatedAccount => {
    this.setState(prevState => ({
      ...prevState,
      ...updatedAccount
    }))
  }

  render () {
    return (
      <AccountContext.Provider value={this.state}>
        {this.props.children}
      </AccountContext.Provider>
    )
  }
}

export default AccountProvider

With this newly created code in the AccountProvider, we’ve added:

An updateAccount key to the local state that references a bound updateAccount() function
An updateAccount() function that updates the local state of the AccountProvider
Sets updateAccount() as a passable function to subscribers

With this new function available to us, we can now update the AccountUpdate component’s form to use it. Let’s place it inside of a handleOnSubmit function and pass it the update account information from our form. We should also pass down the username and membership level from the AccountProvider.

// AccountProfile/AccountUpdate.jsx — update

import React from 'react'
import { AccountConsumer } from '../providers/AccountProvider'

class AccountUpdate extends Component {
  // Updates!!
  state = {
    username: this.props.username,
    membershipLevel: this.props.membershipLevel
  }

  handleOnChange = ({ target: { value, name } }) => {
    this.setState({
      [name]: value
    })
  }

  // New Code!!
  handleOnSubmit = event => {
    event.preventDefault()

    const updatedAccount = { ...this.state }

    this.props.updateAccount(updatedAccount)
  }

  // New Code!!
  // To handle resetting form upon submission success
  componentWillReceiveProps(nextProps, prevProps) {
    if(prevProps !== nextProps) {
      this.setState({
        username: nextProps.username, 
        membershipLevel: nextProps.membershipLevel
      })
    }
  }

  // Updates!!
  render () {
    const { membershipLevel, username } = this.state
    const usernameValue = username === this.props.username ? '' : username

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="username">New Username</label>
          <div>
            <input 
              type="text" 
              name="username" 
              value={usernameValue} 
              onChange={this.handleOnChange} 
            />
          </div>
          <label htmlFor="membershipLevel">Membership Level</label>
          <div>
            <select 
              value={membershipLevel} 
              name="membershipLevel"
              onChange={this.handleOnChange}
            >
              <option value="Bronze">Bronze</option>
              <option value="Silver">Silver</option>
              <option value="Gold">Gold</option>
            </select>
          </div>
          <button>Save</button>
        </form>
      </div>
    )
  }
}

// Added to connect AccountConsumer
// To pass props to AccountUpdate
// Before component initialization
// As the AccountUpdate.state requires
// The new props
const ConnectedAccountUpdate = props => (
  <AccountConsumer>
    {({ username, membershipLevel, updateAccount }) => (
      <AccountUpdate  
        {...props}
        username={username}
        membershipLevel={membershipLevel}
        updateAccount={updateAccount}
      />
    )}
  </AccountConsumer>  
)

export default ConnectedAccountUpdate

Voilà! On form submission, we are now updating the username and membership level dynamically, which, now appears with the new changes in the NavigationBar and AccountDetails components.

Conclusion:

I hope this article provides you with some ideas on how you can use it in your current projects. I’ve enjoyed my time working with the new tool, and appreciate having even more control of my React code.

Want to work on a mission-driven team that loves sane prop management in its React apps? We’re hiring !

To learn more about Flatiron School, visit the website , follow us on Facebook and Twitter , and visit us at upcoming events near you.

Flatiron School is a proud member of the WeWork family. Check out our sister technology blogs WeWork Technology and Making Meetup .

Creating Readable Tests Using React Testing Library

Luke Ghenco — Wed, 12 Sep 2018 12:56:01 +0000

Learn how to test drive your React code with BDD testing.

At Flatiron School, we’ve started using React to build almost all of our new client-side projects, as well as converting some of our older Backbone + Marionette apps to React. This has led to a concise and more performant code base on our front end and allowed us to write incredible apps like our in-browser Learn IDE (see “ How We Built the Learn IDE in Browser ”).

We are now 2+ years into using React in our codebase. I would like to say we’ve learned all there is to learn about React testing. However, what we’ve really seen is just a ton of tests around implementation details in our component specs. This is something Enzyme, our previous testing solution, almost encouraged with its API. There was also a fair amount of well-tested reducer specs for our Redux code. We were mostly testing implementation details (i.e. how store changes in Redux happened, etc.) versus true integration tests to see if our front end code actually functioned properly, which again, is considered a bit of an anti-pattern. We also tried our hand at Snapshot Testing, which still has its use cases, but can be limited (as all things should be that only require a dev to type “u” to update).

While investigating better testing tools, we found a new library called React Testing Library (one of the newer React testing libraries), courtesy ofKent C. Dodds . This library really allows us to focus on how our front end components are used by consumers of our application. It also ensures that we are testing functionality and not just implementation details. In the guiding principles section of its documentation it states,

The more your tests resemble the way your software is used, the more confidence they can give you.

— Kent C. Dodds

This was core to what our team was looking for in a testing solution. Let’s build a simple React App to show you what I’ve learned through using the React Testing Library.

Now! Who Wants To Build Something with Tests?

Let’s build a simple comment app with a list of comments, comment cards, and a new comment form to get a full scope of testing out for the whole feature. We will not be testing for beauty in this app, so please feel free to style as you like. This is an example mockup of the app we will be building:

Comment App Summary

We are going to use Create React App and Yarn as our node package manager to bootstrap a quick React project, then use the common testing pattern of Arrange -> Act -> Assert.

Bootstrapping the App

To get started, run these commands:

$ create-react-app comments-app 
$ cd comments-app

Once app setup is complete, we need to add the React Testing Library for testing, Axios for making API requests, and PropTypes for prop validation.

$ yarn add axios prop-types
$ yarn add react-testing-library --dev

Our ./package.json file should now look something like this:

// package.json
{ 
  // ... shortened for readability, 
  "dependencies": { 
    // versions may differ depending on when you read this, 
    // but this should work with any 16+ version of React 
    "axios": "^0.18.0", 
    "react": "^16.4.2", 
    "react-dom": "^16.4.2", 
    "react-scripts": "1.1.5" 
  }, 
  "devDependencies": { 
    "react-testing-library": "^5.0.0" 
  }, 
  // ...
}

Let’s trim out some files and then get started on building out some new code.

The new directory should look like this:

node\_modules/ \* don't touch anything in this folder \*
public/ \* don't touch anything in this folder \*
src/
  index.js
.gitignore 
package.json 
README.md 
yarn.lock

Now that we have our basics behind us, we can start planning our tests. Let’s take a look at how our app is going to look separated into components.

Comment App Component Breakdown

We have three core components that we will be building in this app.

CommentCard
CommentList
CommentForm

I always like to start with the smallest component piece first and then build up, so let’s take that approach and write our first test for the CommentCard component.

CommentCard Component Test

CommentCard Component

Our CommentComponent looks like it has two parts: the comment and the author. Our test should verify that if given a comment and an author, it shows the right info. Let’s write our first test!

First, create some more folders and files to get ready.

$ mkdir src/components 
$ mkdir src/components/__tests__
$ touch src/components/CommentCard.jsx
$ touch src/components/__tests__/CommentCard.test.jsx

Next, we need to arrange the data for a successful test. In this case, that means arranging the props that are passed to the component to render. We already know which two props our CommentCard needs (“Comment” & “Author”), so this should be a quick arrangement process.

// CommentCard.test.jsx v.1 

import React from 'react'

describe('Comment Card', () => {
  test('it renders the comment and the author', () => {

    // Arrange
    const props = {
      comment: 'React Testing Library is great',
      author: 'Luke Ghenco'
    }
  })
})

Now that our props are defined, we can begin the next stage of testing: Act. This will involve rendering the component with the props we previously implemented. We will need the render() function from the React Testing Library for this. Let’s add that to the component:

// CommentCard.test.jsx v.2

import React from 'react'
import { render } from 'react-testing-library'
import CommentCard from './CommentCard'

describe('Comment Card', () => {
  test('it renders the comment and the author', () => {

    // Arrange
    const props = {
      comment: 'React Testing Library is great',
      author: 'Luke Ghenco'
    }

    render(<CommentCard {...props} />)
  })
})

Now that we have our first test block partially finished, let’s start up the test runner. We should use the --watch flag to avoid constantly restarting it.

Run this command:

$ yarn test --watch

The terminal should now show the image below:

Oops! We know have a test running, but it looks like we need to actually create a component. Following the strategy of getting something working one piece at a time, let’s make a very simple CommentCard component.

// CommentCard.jsx v.1 

import React from 'react'

const CommentCard = () => <div />

export default CommentCard

Now we have a passing test!

Well… that passes, but are we really testing anything useful? We now need to implement the final stage of testing: Assert. We should be asserting that we are actually rendering the comment and the author. To do this, we need to destructure using a helper function called getByText() that our render() function gives us through React Testing Library (if this is your first time learning about the magic of destructuring in JS, read more about it on MDN). With the getByText() method, we can assert that the comment and author props are correctly rendered inside of the component.

// CommentCard.test.3.jsx v.3 

import React from 'react'
import { render } from 'react-testing-library'
import CommentCard from '../CommentCard'

describe('Coment Card', () => {
  test('it renders the comment and the author', () => {

    // Arrange
    const props = {
      comment: 'React Testing Library is great',
      author: 'Luke Ghenco'
    }

    // Act
    const { getByText } = render(<CommentCard {...props} />)

    // Assert
    const commentNode = getByText(props.comment)
    const authorTagNode = getByText(`- ${props.author}`)

    expect(commentNode).toBeDefined()
    expect(authorTagNode).toBeDefined()
  })
})

Take a look at the test runner, and it should show this:

Notice how it only shows the rendering of the empty <div/> in our CommentCard component? To pass this test, we need to add content to the component.

// CommentCard.jsx v.2 

import React from 'react'
import PropTypes from 'prop-types'

const CommentCard = ({ comment, author }) => (
  <div style={styles.card}>
    <p>{comment}</p>
    <p style={styles.authorTag}>- {author}</p>
  </div>
)

CommentCard.propTypes = {
  comment: PropTypes.string.isRequired,
  author: PropTypes.string.isRequired
}

// FYI, I added some basic styling to make the 
// comment cards look more like the mock.
const styles = {
  card: {
    margin: '24px',
    padding: '2px 24px',
    fontFamily: 'Palatino',
    fontStyle: 'italic',
    backgroundColor: '#f5f5f5',
    height: '80px',
    position: 'relative',
    border: '1px solid #767676',
    borderRadius: '8px'
  },
  authorTag: {
    position: 'absolute',
    bottom: '0',
    right: '12px'
  }
}

export default CommentCard

You should now see a passing test in the terminal:

Success! We created our first component test.

CommentList Component Test

Now that we’ve had some basic experience doing our first component test, let’s try our hand at a higher level integration test. This test will verify that our CommentList component renders a collection of CommentCard components.

Comment List

We need to create two new files for this test: a component and component test.

$ touch src/components/CommentList.jsx
$ touch src/components/\_\_tests\_\_/CommentList.test.jsx

Just like the first test, we need to arrange our mock data. In this case, two comments:

// CommentList.test.jsx v.1 

describe('Comment List', () => {
  test('It renders a list of comment cards with their comment and author tag', () => {

    // Arrange
    const comment1 = {
      id: 1,
      comment: 'I do love writing tests',
      author: 'The Notester'
    }
    const comment2 = {
      id: 2,
      comment: 'Nothing is better than a good comment app',
      author: 'Comment Hater'
    }
    const props = {
      comments: [comment1, comment2]
    }
  })
})

Our test runner should still be passing all tests. Now let’s import the component, React , and React Testing Library and call render on the CommentList component inside of our CommentList spec file.

// CommentList.test.jsx v.2

import React from 'react'
import { render } from 'react-testing-library'
import CommentList from '../CommentList'

describe('Comment List', () => {
  test('It renders a list of comment cards with their comment and author tag', () => {

    // Arrange
    const comment1 = {
      id: 1,
      comment: 'I do love writing tests',
      author: 'The Notester'
    }
    const comment2 = {
      id: 2,
      comment: 'Nothing is better than a good comment app',
      author: 'Comment Hater'
    }
    const props = {
      comments: [comment1, comment2]
    }

    // Act
    render(<CommentList {...props} />)
  })
})

We are now rendering the component, and if we take a look at our test runner, we should see a familiar angry red error message awaiting us － the same one we encountered in the first test file.

Just like with our first test, we need to make a simple component to pass the import and render the test.

{ /\* CommentList.jsx v.1 \*/ }

import React from 'react'

const CommentList = () =\> \<div /\>

export default CommentList

Take a look at the test runner once more and all tests should be passing. Let’s move onto stage three and assert that the CommentList is in fact rendering the correct information. Once again, we’ll use the getByText() function:

// CommentList.test.jsx v.3 

import React from 'react'
import { render } from 'react-testing-library'
import CommentList from '../CommentList'

describe('Comment List', () => {
  test('It renders a list of comment cards with their comment and author tag', () => {

    // Arrange
    const comment1 = {
      id: 1,
      comment: 'I do love writing tests',
      author: 'The Notester'
    }
    const comment2 = {
      id: 2,
      comment: 'Nothing is better than a good comment app',
      author: 'Comment Hater'
    }
    const props = {
      comments: [comment1, comment2]
    }

    // Act
    const { getByText } = render(<CommentList {...props} />)

    // Assert
    const firstCommentNode = getByText(comment1.comment)
    const firstAuthorTagNode = getByText(`- ${comment1.author}`)
    const secondCommentNode = getByText(comment2.comment)
    const secondAuthorTagNode = getByText(`- ${comment2.author}`)

    expect(firstCommentNode).toBeDefined()
    expect(firstAuthorTagNode).toBeDefined()
    expect(secondCommentNode).toBeDefined()
    expect(secondAuthorTagNode).toBeDefined()
  })
})

Taking a look at the test runner: it should show a failure searching for text that does not exist in the empty rendered div.

Let’s make this test pass by adjusting the CommentList component to render a CommentCard for each comment in the passed down props.

// CommentList.jsx v.2 

import React from 'react'
import PropTypes from 'prop-types'
import CommentCard from './CommentCard'

const CommentList = ({ comments }) => (
  <div>
    {
      comments.map(comment =>
        <CommentCard key={comment.id} {...comment} />
      )
    }
  </div>
)

CommentList.propTypes = {
  comments: PropTypes.array.isRequired
}

export default CommentList

The test runner should now be passing. We’ve now got two tested components.

CommentForm Component Test

Comment Form

For this component, we are not going to run an entire integration test (i.e. adding a comment adds a comment to the comment list, etc.). What we want to test is that the “Add Comment” button is disabled until both the comment text field and the “Your Name” text field are both filled in.

We need to create two new files for this step.

$ touch src/components/CommentForm.jsx
$ touch src/components/\_\_tests\_\_/CommentForm.test.jsx

This time I’m going to write out the entire test and then add the code that passes it below:

// CommentForm.test.jsx 

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import CommentForm from '../CommentForm'

describe('Comment Form', () => {
  test('it has a disabled button until both comment textbox and "Your Name" field have a value', () => {

    // Arrange
    const comment = 'Never put off until tomorrow what can be done today.'
    const author = 'Sensei Wu'

    // Act
    const { getByLabelText, getByPlaceholderText, getByText } = render(<CommentForm />)

    // Assert
    const submitButton = getByText('Add Comment')

    expect(submitButton.disabled).toEqual(true)

    const commentTextfieldNode = getByPlaceholderText('Write something...')

    fireEvent.change(commentTextfieldNode, { target: { value: comment } })

    expect(submitButton.disabled).toEqual(true)

    const nameFieldNode = getByLabelText('Your Name')

    fireEvent.change(nameFieldNode, { target: { value: author } })

    expect(submitButton.disabled).toEqual(false)
  })
})

Notice that the above form is using a new method called fireEvent(). This function gives us the ability to simulate DOM events, such as changing the text inside of an input or clicking on a button. We are also using two new text query methods, as well: getByLabelText(), which looks for input from matching label, and getByPlaceholderText() which we can use to find our comment textarea tag.

To get the tests passing for this, let’s add a simple form component.

// CommentForm.jsx v.1 

import React, { Component } from 'react'

export default class CommentForm extends Component {
  state = {
    comment: '',
    author: ''
  }

  handleOnChange = ({ target: { name, value } }) =>
    this.setState(_prevState => ({
      [name]: value
    }))

  hasInvalidFields = () => {
    const { comment, author } = this.state

    if (comment.trim() !== '' && author.trim() !== '') {
      return false
    }

    return true
  }

  render () {
    const { comment, author } = this.state
    const isDisabled = this.hasInvalidFields() ? 'true' : null

    return (
      <form style={styles.form}>
        <div>
          <textarea
            style={styles.commentBox}
            onChange={this.handleOnChange}
            placeholder="Write something..."
            name="comment"
            value={comment}
          />
        </div>
        <div>
          <label htmlFor="author" aria-labelledby="author">Your Name</label>
          <input
            style={styles.inputField}
            onChange={this.handleOnChange}
            id="author"
            type="text"
            name="author"
            value={author}
          />
        </div>
        <button style={styles.button} disabled={isDisabled}>
          Add Comment
        </button>
      </form>
    )
  }
}

const styles = {
  form: {
    margin: 'auto',
    padding: '0px',
    width: '500px'
  },
  commentBox: {
    width: '494px',
    height: '80px',
    marginBottom: '12px'
  },
  inputField: {
    width: '360px',
    float: 'right',
  },
  button: {
    marginTop: '12px',
    width: '500px',
    color: '#ffffff',
    backgroundColor: '#767676',
    padding: '6px',
    borderRadius: '8px'
  }
}

Tests should now be passing!

Test the Whole Thing!

We now have the basis for some simple working components using integration tests, but we still need to verify that the whole process works together.

These are things we want to test:

On app load, it fetches and renders the preexisting comments
It successfully creates a new comment, renders it, and then resets the form data

Testing On App Load it Fetches and Renders the Preexisting Comments

For this test, we need to create a new component called Comments that will live in a /screens directory. Its role will be to coordinate the rendering and state between all of the components we have built thus far.

Create the files and directories below:

$ mkdir src/screens
$ mkdir src/screens/__tests__
$ touch src/screen/Comments.jsx
$ touch src/screens/__tests__/Comments.test.jsx

For the first test, we will do some arrangements of data, mock the get request using Axios and Jest , and try to render the component. Also, since we are working with asynchronous code, we’ll import the wait() function from React Test Library and use async/await in the test blocks.

// Comments.test.jsx v.1

import React from 'react'
import { render, fireEvent, wait, cleanup } from 'react-testing-library'
import axios from 'axios'
import Comments from '../Comments'

const comment1 = {
  id: 1,
  comment: 'I do love writing tests',
  author: 'The Notester'
}
const comment2 = {
  id: 2,
  comment: 'Nothing is better than a good comment app',
  author: 'Comment Hater'
}
const comments = [comment1, comment2]

describe('Comments Screen', () => {
  afterEach(cleanup)

  beforeEach(() => {
    axios.get = jest.fn(() => Promise.resolve(comments))
  })

  test('It fetches comments and renders them to the page', async () => {
    render(<Comments />)
  })
})

The above is creating two new comments and then placing them in an array, which, we then will pass to our Jest function mock when axios.get is called in the test. Since our Comments component does not require props, we don’t need to create a props object. We do need to create a basic Comments component to pass this first failing test, though.

// Comments.jsx v.1 

import React, { Component } from 'react'

export default class Comments extends Component {

  render () {
    return <div />
  }
}

This passes our basic test, but, we need to finish writing out the full test.

// Comments.test.jsx v.2

// ... previous code

test('It fetches comments and renders them to the page', async () => {
  const { getByText } = render(<Comments />)

  await wait(() => getByText(comment1.comment))

  const firstCommentNode = getByText(comment1.comment)
  const firstAuthorTagNode = getByText(`- ${comment1.author}`)
  const secondCommentNode = getByText(comment2.comment)
  const secondAuthorTagNode = getByText(`- ${comment2.author}`)

  expect(firstCommentNode).toBeDefined()
  expect(firstAuthorTagNode).toBeDefined()
  expect(secondCommentNode).toBeDefined()
  expect(secondAuthorTagNode).toBeDefined()
})

Now we have the assertions, but our tests are failing due to this code await wait(() => getByText(comment1.comment)). With this code, we are telling the test to stop running the code inside of the test block and wait for the component to render the first comment returned from our API request. Once it renders that comment, it will continue down the list of assertions, but it will fail the test if the comment isn’t rendered before the timeout (five second default).

This is the code we need to pass this test:

// Comments.jsx v.2 

import React, { Component } from 'react'
import axios from 'axios'
import CommentList from '../components/CommentList'

export default class Comments extends Component {

  state = {
    comments: null
  }

  componentDidMount () {
    this.fetchComments()
  }

  fetchComments () {
    axios.get('/api/comments')
      .then(comments => this.setState({ comments }))
      .catch(console.error)
  }

  render () {
    const { comments } = this.state

    return (
      <div>
        {
          comments && comments.length
          ? <CommentList comments={comments} />
          : null
        }
      </div>
    )
  }
}

Check your test runner and you should see all green:

It Successfully Creates a New Comment, Renders it, and Then Resets the Form Data

For the final test, we will test to make sure that it successfully creates a new comment, renders it, and then resets the form data.

Let’s add the following mock data and hijack the axios.post method.

// Comments.test.jsx v.3 

// ... previous code

const newComment = {
  id: 3,
  comment: 'Brave new world of testing',
  author: 'Spongebob'
}

describe('Comments Screen', () => {
  afterEach(cleanup)

  beforeEach(() => {
    axios.get = jest.fn(() => Promise.resolve(comments))
    axios.post = jest.fn(() => Promise.resolve(newComment))
  })

  // ...
})

Next, add a new test block with assertions on the desired spec of our feature.

// Comments.test.jsx v.4 

// ... previous code

test('it creates a new comment, renders it and clears out form upon submission', async () => {
  const { getByLabelText, getByPlaceholderText, getByText } = render(<Comments />)

  await wait(() => getByText(comment1.comment))

  const submitButton = getByText('Add Comment')
  const commentTextfieldNode = getByPlaceholderText('Write something...')
  const nameFieldNode = getByLabelText('Your Name')

  fireEvent.change(commentTextfieldNode, { target: { value: newComment.comment } })
  fireEvent.change(nameFieldNode, { target: { value: newComment.author } })
  fireEvent.click(submitButton)

  await wait(() => getByText(`- ${newComment.author}`))

  expect(commentTextfieldNode.value).toEqual('')
  expect(nameFieldNode.value).toEqual('')
})
// ...

We should now have our new mock data and new test block to test against our code. The test runner should not display the following error:

Failed Test 4

We need to do two things. First, to fix this error, we need to render the CommentForm component inside of the Comments component. We then need to pass a callback function to the CommentForm that will then notify the Comments component when a new comment should be added to the Comments page.

To build this, let’s change the code in the Comments component to now have an addComment() function that will then be used as a callback in the CommentForm component upon form submission:

// Comments.jsx v.3

// ... previous code

export default class Comments extends Component {

// ...

  addComment = comment => this.setState(prevState => ({
    comments: prevState.comments.concat(comment)
  }))

  render () {
    const { comments } = this.state

    return (
      <div>
        <CommentForm addComment={this.addComment} />
        {/* ... previous code */}
      </div>
    )
  }
}

Now we should change the code in the CommentForm component to handle the new addComment() function prop being passed down from the Comments component. We will also add a clearForm() function that will clear out the form data after successfully creating a new comment and calling this.props.addComment() . The code update should look like this:

// CommentForm.jsx v.2

import React, { Component } from 'react'
import axios from 'axios'

export default class CommentForm extends Component {
  initialState = {
    comment: '',
    author: ''
  }
  state = this.initialState

  // ... previous code

  handleOnSubmit = event => {
    event.preventDefault()
    const newComment = this.state

    this.createComment(newComment)
  }

  createComment = newComment => {
    axios.post('/api/comments', { newComment })
      .then(comment => {
        this.props.addComment(comment)
        this.clearForm()
      })
      .catch(console.error)
  }

  clearForm = () =>
    this.setState(_prevState => (this.initialState))

  // ... previous code

  render () {
    const { comment, author } = this.state
    const isDisabled = this.hasInvalidFields() ? 'true' : null

    return (
      <form onSubmit={this.handleOnSubmit} style={styles.form}>
        {/* ... previous code */}
      </form>
    )
  }
}

// ...

We now have five passing tests and a nearly 100% fully-tested application.

Conclusion

Looking back at our progress, we’ve built a small but functional React app with full test coverage. We also focused all our testing strategies around how the components react to user interactions instead of testing implementation details.

One thing you may have noticed is that we never actually looked at the code in the browser. This was intentional. I wanted to show you how to write tests as if you were the user interacting with the page. I think you will find that everything works perfectly (other than CSS styling).

Feel free to extend this app and add more tests around the current features if you like, or start using these methods in your own app. You will need to first connect it to a functioning comments API and mount it in the /src/index.js.

I hope you found this useful. I would love to hear from you with comments or questions.

Resources

P.S. Would you like to work on a mission-driven team that loves ice cream and programming in JS and React? We’re hiring !

To learn more about Flatiron School, visit the website , follow us on Facebook and Twitter , and visit us at upcoming events near you.

Flatiron School is a proud member of the WeWork family. Check out our sister technology blogs WeWork Technology and Making Meetup .