React Testing Interview Questions

This section is organized the way testing questions usually unfold in interviews. It starts with React-specific testing utilities, then moves into Jest, which is the test runner many React teams use in day-to-day work.

This page includes 6 questions in this topic group.

Core React testing utilities

What is Shallow Renderer in React testing?

Shallow rendering is useful for writing unit test cases in React. It lets you render a component one level deep and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.

For example, if you have the following component:

function MyComponent() {
  return (
    <div>
      <span className={"heading"}>{"Title"}</span>
      <span className={"description"}>{"Description"}</span>
    </div>
  );
}

Then you can assert as follows:

import ShallowRenderer from "react-test-renderer/shallow";

const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);

const result = renderer.getRenderOutput();

expect(result.type).toBe("div");
expect(result.props.children).toEqual([
  <span className={"heading"}>{"Title"}</span>,
  <span className={"description"}>{"Description"}</span>,
]);

What is TestRenderer package in React?

This package provides a renderer that can be used to render components to pure JavaScript objects, without depending on the DOM or a native mobile environment. It is commonly used for snapshot-style inspection of what a component renders.

import TestRenderer from "react-test-renderer";

const Link = ({ page, children }) => <a href={page}>{children}</a>;

const testRenderer = TestRenderer.create(
  <Link page={"https://www.facebook.com/"}>{"Facebook"}</Link>
);

console.log(testRenderer.toJSON());
// {
//   type: "a",
//   props: { href: "https://www.facebook.com/" },
//   children: ["Facebook"]
// }

What is the purpose of ReactTestUtils package?

ReactTestUtils are provided in the with-addons package and allow you to perform actions against a simulated DOM for the purpose of unit testing.

Jest fundamentals

What is Jest?

Jest is a JavaScript testing framework created by Facebook. It is commonly used in React projects because it includes useful defaults such as mocking support, assertions, snapshots, and a jsdom environment.

What are the advantages of Jest over Jasmine?

Here are some of the main advantages:

• Automatically finds tests to execute in your source code.
• Automatically mocks dependencies when running your tests.
• Allows you to test asynchronous code more easily.
• Runs your tests with a fake DOM implementation (via jsdom) so that your tests can be run on the command line.
• Runs tests in parallel processes so that they finish sooner.

Putting it together

Can you give a simple example of Jest test case?

Let’s write a test for a function that adds two numbers in sum.js:

const sum = (a, b) => a + b;

export default sum;

Create a file named sum.test.js which contains the test:

import sum from "./sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

And then add the following section to your package.json:

{
  "scripts": {
    "test": "jest"
  }
}

Finally, run yarn test or npm test and Jest will print a result:

$ yarn test
PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (2ms)