Skip to content

Latest commit

 

History

History
79 lines (58 loc) · 2.68 KB

README.md

File metadata and controls

79 lines (58 loc) · 2.68 KB
Raw

React testing

Running the application

yarn install && yarn test

New dependencies

React bindings are used to render React components in the DOM, Queries from the core API are used to find elements in the DOM. User event helpers are used to simulate user actions.

Cleaning the DOM after every test is done automatically for you in @testing-library/[email protected] or higher.

The default environment in Jest is a Node.js environment. If you are building a web app, you can use a browser-like environment through jsdom instead.

Note that Jest ships with jsdom. JSDOM provides a headless DOM into which components can be rendered.

Jest is also used to create stub callbacks which are provided to React components that are under test. The arguments with which the callbacks are called and the number of times that callbacks are called can be verified.

let myFunc = jest.fn();
// ...
expect(myFunc).toHaveBeenCalledTimes(1);
expect(myFunc).toHaveBeenCalledWith({ my: "object" });

See jest.config.js and for how jest integration is set up.

Example tests

Work through the tests in the given order:

  • AppHeaderTest is a simple text-based test
  • CommentTest includes examples of good and over-specific tests.
  • CommentListTest includes examples on how to test collection components.
  • CommentFormTest includes examples on how to simulate user input and test forms. It also shows how @testing-library forces writing accessible applications by limiting available queries.
  • AppTest tests the whole application logic through the root React component.

Debugging tests in NodeJS

Put a debugger keyword to the test you want to debug. Alternatively set a breakpoint using Chrome Dev Tools later.

In another terminal window, run

yarn test:debug

Open chrome://inspect in Chrome browser and select the remote target that matches your project. Click inspect.

Chrome console opens and execution stops on the first line of the test suite. Set breakpoints or continue if there are debugger statements in your tests. Debug as if the test was executing in a normal browser context.

Close the debugger to allow test:debug process to exit.