Testing your PatternFly Element in React

We’ve built PatternFly Elements to work in most frontend frameworks and React is one of the frameworks that we formally support. So, we must test our components in React.

Prerequisites

You’ll need to have create-react-app installed, or you can use npx, and we’ll need to generate a new application using create-react-app. We’ll use npx since it’s easiest.

npx create-react-app pfe-react-test-app
cd pfe-react-test-app
npm start

I also like to clear up the src/App.js file in the React app so I have a clean slate for testing the component that I’m developing. The src/App.js file should look like this.

import React from 'react';
function App() {
  return (
    <div>
    </div>
  );
}
export default App;

Link your component

Use npm link to reference the component locally. First, all of our components depend on pfelement so we need to make sure we use npm link to bring it into our project. My PatternFly Elements repository is located at ~/Documents/GitHub/patternfly-elements.

From the pfe-react-test-app directory, I run the following.

npm link ~/Documents/GitHub/patternfly-elements/elements/pfelement

This links a local version of pfelement component into the node_modules directory of my new React app. Next, I can npm link any of the other components into the project.

For example, if I wanted to test pfe-accordion in my project, from the pfe-react-test-app directory, I would run the following.

npm link ~/Documents/GitHub/patternfly-elements/elements/pfe-accordion

Add the component

In src/App.js import your component.

import React from 'react';
import "@patternfly/pfe-accordion";
function App() {
  return (
    <div>
      
    </div>
  );
}
export default App;

Then add your markup to the same file.

import React from "react";
import "@patternfly/pfe-accordion";
function App() {
  return (
    <div>
      <pfe-accordion>
        <pfe-accordion-header>
          <h3>First accordion header</h3>
        </pfe-accordion-header>
        <pfe-accordion-panel>
          <p>First accordion panel.</p>
        </pfe-accordion-panel>
        <pfe-accordion-header>
          <h3>Second accordion header</h3>
        </pfe-accordion-header>
        <pfe-accordion-panel>
          <p>Second accordion panel.</p>
        </pfe-accordion-panel>
      </pfe-accordion>
    </div>
  );
}
export default App;

Then begin testing your component.

Things to look for

Does the component render properly?

Fortunately for us, using web components with React is much easier than Angular. We’re not going to have any issues with the connectedCallback like we do with Angular. Instead, we should just be checking that the component renders properly and that the proper classes and attributes have been added to our component. For example, did pfe-accordion get the proper aria attributes added to it when it upgraded? Did pfe-accordion get a pfelement attribute on upgrade? And so on.

Can you work with the element’s API if it has one?

For example, would you be able to call the expand API from src/App.js? Would you be all to call theexpandAll or collapseAll methods on pfe-accordion?

Can you use data binding to update content or attributes?

In the example above where we are testing pfe-accordion, would I be able to iterate over an array of heading and panel data and have the pfe-accordion still display properly?

To see an example of how I’d test pfe-accordion in React, check out the sample I created on CodeSandbox. I tested rendering, data binding for the content, and I created a React ref so I could work with the pfe-accordion API.

Wrap up

That should be enough to get you started. Ultimately, we’d like to automate all of this. But for now, we’re doing our testing manually.