TDD with Jest and Enzyme

Hi All,

Compliments of the festive season to all of you who celebrate it.

I am in the process of working through the reddit client project, chapter 20 of the Front-end Engineer track.

We are encouraged to use Jest and Enzyme to build the application using test driven development (TDD); I am finding this to be much easier said than done!

A possibly stupid question:

If my App.js file will look like this -

import React, { Fragment } from "react";
import { Header } from "./components/header/Header";
import { Post } from "./components/posts/Post";
import { Subreddits } from "./components/subreddits/Subreddits";

function App() {
  return (
    <Fragment>
      <Header />
      <main>
        <Post />
        <Subreddits />
      </main>
    </Fragment>
  );
}
export default App;

does it follow that TDD has to start at the most granular component first, working up the tree to App?

For example, and continuing using the example code above, assuming Subreddits is the most granular level in the component tree, I would have Subreddit.test.js in the same folder as the compenent and do that first; once Header and Post are also done in the same manner, then, and only then, can I create the App.test.js file for App?

In other words, how could I create a test file for App without having created the other tests and components first?

Is this correct/ nonsense?

Thank you!