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!

Hi All,

Having now attempted TDD with the reddit application, the answer is that you can test the component tree in any order you like. The first code block below represents my Navigation component, the second Navigation.test.js:

import React from "react";
import { Logo } from "../../components/logo/Logo";
import { Menu } from "../../components/menu/Menu";
import { QuickNav } from "../../components/quicknav/QuickNav";
import { Search } from "../../components/search/Search";
export const Navigation = () => {
  return (
    <header>
      <Logo />
      <Search />
      <QuickNav />
      <Menu />
    </header>
  );
};
import React from "react";
import { shallow } from "enzyme";
import { Navigation } from "./Navigation";

describe("Navigation page must render", () => {

  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<Navigation />);
  });

  test("should render header html element", () => {
    expect(wrapper.find("header")).toHaveLength(1);
  });

  test("Render Logo component", () => {
    expect(wrapper.find("Logo")).toHaveLength(1);
  });

  test("Render Search component", () => {
    expect(wrapper.find("Search")).toHaveLength(1);
  });

  test("Render QuickNav component", () => {    
    expect(wrapper.find("QuickNav")).toHaveLength(1);
  });

  test("Render Menu component", () => {  
    expect(wrapper.find("Menu")).toHaveLength(1);
  });
})

Because you are using Enzyme’s shallow method, the test only checks that the component exists in the js file being tested; as long as you are able to import the component e.g. Logo, the test will pass, even if Logo.js just a shell e.g.

import React from 'react';
export const Logo = () => {
  return <div></div>;
};

Useful references:
This video helped get me started using Jest and Enzyme;
This video showed me how to use mocks for API calls;
This article was helpful, too.

Hope you had a good weekend.

I too had a hard time just knowing where to start with TDD on the Reddit Client project. I’d also skipped a lot of the Enzyme material since it’s no longer compatible with newer versions of React.

I decided to try and learn more about React Testing Library before getting started on the Reddit Client project.

This article (referenced in the RTL docs) helped a lot: React Testing Library Tutorial

Codecademy also has a course on React Testing, which covers RTL, so I’m completing that before moving onto Reddit Client.

1 Like