As stated in the introduction of this chapter, with React, you declaratively write the interface code through components.

The concept of a React component is analogous to the component concept presented in Chapter 3, Testing Frontend Code, so expect to see some similarities next.

With that in mind, let's create our very first component. To better understand what a React component is, we are going to use a very simple acceptance criterion and as usual start from the spec.

Let's implement "InvestmentListItem should render". It's very simple and not really feature oriented but is a good example to get us started.

With what we learned in Chapter 3, Testing Frontend Code, we could start coding this spec by creating a new file called InvestmentListItemSpec.js and save it in the components folder inside the spec folder:

describe("InvestmentListItem", function() {

  beforeEach(function() {
    // render the React component
  });

  
it("should render", function() {
    expect...