Meta tags:
description=Note: this feature is available with react-scripts@0.3.0 and higher.;

Headings (most frequently used words):

tests, integration, testing, environment, on, ci, windows, running, filename, conventions, command, line, interface, version, control, writing, components, using, third, party, assertion, libraries, initializing, test, focusing, and, excluding, coverage, reporting, continuous, servers, your, own, disabling, jsdom, snapshot, editor, react, library, src, setuptests, js, configuration, travis, circleci, cmd, exe, powershell, linux, macos, bash,

Text of the page (most frequently used words):
the (66), you (48), react (39), and (39), testing (37), tests (37), test (36), jest (36), your (30), for (26), run (24), this (23), with (23), that (23), app (22), #library (19), copy (18), can (16), npm (16), from (16), build (14), components (13), will (13), are (13), create (12), like (12), import (12), dom (12), integration (10), them (10), src (9), any (9), files (9), environment (8), expect (8), jsdom (7), use (7), scripts (7), note (7), running (7), they (7), learn (6), snapshot (6), travis (6), coverage (6), setuptests (6), using (6), code (6), component (6), more (6), render (6), browser (6), true (6), recommend (6), end (6), configuration (5), command (5), watcher (5), assertions (5), not (5), following (5), need (5), set (5), only (5), file (5), default (5), example (5), renders (5), how (5), github (4), servers (4), creating (4), output (4), without (4), also (4), rendering (4), here (4), env (4), node (4), start (4), force (4), mode (4), add (4), when (4), global (4), package (4), all (4), sum (4), watch (4), started (3), editor (3), circleci (3), continuous (3), libraries (3), writing (3), line (3), interface (3), conventions (3), last (3), page (3), works (3), provides (3), text (3), automatically (3), feature (3), manually (3), read (3), about (3), needed (3), shallow (3), document (3), linter (3), warnings (3), project (3), git (3), repository (3), may (3), variable (3), however (3), rootdir (3), json (3), supported (3), uses (3), recommended (3), well (3), specific (3), keep (3), before (3), sinon (3), used (3), way (3), behavior (3), div (3), projects (3), always (3), commit (3), fast (3), folders (3), __tests__ (3), suffix (3), 2025 (2), get (2), docs (2), disabling (2), own (2), reporting (2), focusing (2), excluding (2), initializing (2), third (2), party (2), assertion (2), version (2), control (2), filename (2), debugging (2), next (2), there (2), which (2), lot (2), while (2), fail (2), starting (2), changes (2), enzyme (2), testutils (2), apis (2), globals (2), window (2), help (2), make (2), mind (2), check (2), environments (2), pass (2), flag (2), disable (2), watchall (2), false (2), once (2), instead (2), windows (2), node_modules (2), node_js (2), guide (2), some (2), getting (2), popular (2), but (2), application (2), setting (2), then (2), runs (2), interactive (2), snapshotserializers (2), coveragereporters (2), functions (2), coveragethreshold (2), path (2), jsx (2), collectcoveragefrom (2), name (2), much (2), lets (2), focus (2), other (2), executed (2), setupfilesafterenv (2), contain (2), localstoragemock (2), const (2), mock (2), available (2), higher (2), normally (2), chai (2), such (2), have (2), spies (2), making (2), elements (2), screen (2), welcome (2), yarn (2), install (2), save (2), unit (2), time (2), during (2), find (2), reactdomclient (2), different (2), based (2), often (2), logic (2), basic (2), smoke (2), toequal (2), look (2), blocks (2), its (2), related (2), changed (2), since (2), designed (2), development (2), search (2), usage (2), every (2), relative (2), folder (2), spec (2), real (2), runner (2), enable (2), copyright, facebook, inc, social, contributor, covenant, twitter, discussions, stack, overflow, community, production, previous, updated, rick, hanlon, edit, out, box, ide, features, showing, status, potential, messages, inline, stopping, offering, one, click, updates, extension, visual, studio, generates, snapshots, saves, disk, notified, finally, createrenderer, contrast, mount, above, shortcut, renderintodocument, reactdom, list, know, none, depend, safely, faster, found, non, watching, launching, linux, macos, bash, powershell, lack, whitespace, intentional, cmd, exe, follow, article, customize, trigger, first, push, script, directories, cache, language, yml, syncing, initialize, settings, profile, already, yourself, too, checked, perform, warning, encountered, fails, cli, finish, process, called, serializer, module, statements, lines, branches, dir, tsx, watchpathignorepatterns, transformignorepatterns, transform, testmatch, restoremocks, resetmodules, resetmocks, modulenamemapper, globalteardown, globalsetup, extraglobals, displayname, coveragepathignorepatterns, clearmocks, overrides, overridden, adding, keys, config, slower, separately, normal, workflow, extra, middle, include, report, has, integrated, reporter, es6, requires, similarly, fit, replace, temporarily, exclude, being, xit, decide, eject, resulting, won, reference, should, property, something, localstorage, clear, removeitem, setitem, getitem, api, setup, existing, port, over, having, issues, please, fix, intend, better, supporting, pretty, printing, those, against, utilities, provided, facilitate, asynchronous, interactions, selecting, form, examples, documentation, tobeinthedocument, getbytext, message, adds, custom, body, want, avoid, boilerplate, alternatively, isolation, child, resembles, users, suited, applications, directly, nodes, therefore, improved, encounter, bugs, caused, changing, gain, deeper, insight, into, parts, worth, might, good, introduce, asserting, expected, mounts, makes, sure, didn, throw, provide, value, very, little, effort, great, point, createroot, createelement, crashing, client, choose, tradeoffs, change, haven, decided, strategy, yet, broad, spectrum, techniques, range, verifying, throwing, full, lifecycle, state, tobecalled, matchers, extensively, documented, sums, numbers, built, function, could, optionally, wrap, logical, grouping, neither, required, nor, describe, server, inside, mercurial, explicitly, mention, ran, press, optimization, regardless, many, assumes, don, doesn, although, passing, most, handled, see, includes, ability, pattern, open, enjoy, commands, prints, after, launch, recompiles, put, imports, appear, shorter, same, needs, long, collocation, helps, quickly, larger, located, depth, under, top, level, naming, separate, tool, beyond, scope, thanks, approximations, intended, rather, than, quirks, means, iteration, speed, prevent, flakiness, prepare, did, heard, bad, things, years, ago, give, another, try, major, revamp, migration, older, support, advanced, deployment, back, building, styles, assets, deprecated, skip, main, content,

Text of the page (random words):
running tests create react app skip to main content create react app is deprecated read more here create react app docs help github search k welcome getting started development styles and assets building your app testing running tests debugging tests back end integration deployment advanced usage support on this page running tests note this feature is available with react scripts 0 3 0 and higher read the migration guide to learn how to enable it in older projects create react app uses jest as its test runner to prepare for this integration we did a major revamp of jest so if you heard bad things about it years ago give it another try jest is a node based runner this means that the tests always run in a node environment and not in a real browser this lets us enable fast iteration speed and prevent flakiness while jest provides browser globals such as window thanks to jsdom they are only approximations of the real browser behavior jest is intended to be used for unit tests of your logic and your components rather than the dom quirks we recommend that you use a separate tool for browser end to end tests if you need them they are beyond the scope of create react app filename conventions jest will look for test files with any of the following popular naming conventions files with js suffix in __tests__ folders files with test js suffix files with spec js suffix the test js spec js files or the __tests__ folders can be located at any depth under the src top level folder we recommend to put the test files or __tests__ folders next to the code they are testing so that relative imports appear shorter for example if app test js and app js are in the same folder the test only needs to import app from app instead of a long relative path collocation also helps find tests more quickly in larger projects command line interface when you run npm test jest will launch in watch mode every time you save a file it will re run the tests like how npm start recompiles the code the watcher includes an interactive command line interface with the ability to run all tests or focus on a search pattern it is designed this way so that you can keep it open and enjoy fast re runs you can learn the commands from the watch usage note that the watcher prints after every run although we recommend running your tests in watch mode during development you can disable this behavior by passing in the watchall false flag in most ci environments this is handled for you see on ci servers version control integration by default when you run npm test jest will only run the tests related to files changed since the last commit this is an optimization designed to make your tests run fast regardless of how many tests you have however it assumes that you don t often commit the code that doesn t pass the tests jest will always explicitly mention that it only ran tests related to the files changed since the last commit you can also press a in the watch mode to force jest to run all tests jest will always run all tests on a continuous integration server or if the project is not inside a git or mercurial repository writing tests to create tests add it or test blocks with the name of the test and its code you may optionally wrap them in describe blocks for logical grouping but this is neither required nor recommended jest provides a built in expect global function for making assertions a basic test could look like this import sum from sum it sums numbers expect sum 1 2 toequal 3 expect sum 2 2 toequal 4 copy all expect matchers supported by jest are extensively documented here you can also use jest fn and expect fn tobecalled to create spies or mock functions testing components there is a broad spectrum of component testing techniques they range from a smoke test verifying that a component renders without throwing to shallow rendering and testing some of the output to full rendering and testing component lifecycle and state changes different projects choose different testing tradeoffs based on how often components change and how much logic they contain if you haven t decided on a testing strategy yet we recommend that you start with creating basic smoke tests for your components import react from react import reactdomclient from react dom client import app from app it renders without crashing const div document createelement div reactdomclient createroot div render app copy this test mounts a component and makes sure that it didn t throw during rendering tests like this provide a lot of value with very little effort so they are great as a starting point and this is the test you will find in src app test js when you encounter bugs caused by changing components you will gain a deeper insight into which parts of them are worth testing in your application this might be a good time to introduce more specific tests asserting specific expected output or behavior react testing library if you d like to test components in isolation from the child components they render we recommend using react testing library react testing library is a library for testing react components in a way that resembles the way the components are used by end users it is well suited for unit integration and end to end testing of react components and applications it works more directly with dom nodes and therefore it s recommended to use with jest dom for improved assertions to install react testing library and jest dom you can run npm install save testing library react testing library dom testing library jest dom copy alternatively you may use yarn yarn add testing library react testing library dom testing library jest dom copy if you want to avoid boilerplate in your test files you can create a src setuptests js file react testing library renders your components to document body this adds jest dom s custom assertions import testing library jest dom copy here s an example of using react testing library and jest dom for testing that the app component renders learn react import react from react import render screen from testing library react import app from app it renders welcome message render app expect screen getbytext learn react tobeinthedocument copy learn more about the utilities provided by react testing library to facilitate testing asynchronous interactions as well as selecting form elements from the react testing library documentation and examples using third party assertion libraries we recommend that you use expect for assertions and jest fn for spies if you are having issues with them please file those against jest and we ll fix them we intend to keep making them better for react supporting for example pretty printing react elements as jsx however if you are used to other libraries such as chai and sinon or if you have existing code using them that you d like to port over you can import them normally like this import sinon from sinon import expect from chai copy and then use them in your tests like you normally do initializing test environment note this feature is available with react scripts 0 4 0 and higher if your app uses a browser api that you need to mock in your tests or if you need a global setup before running your tests add a src setuptests js to your project it will be automatically executed before running your tests for example src setuptests js const localstoragemock getitem jest fn setitem jest fn removeitem jest fn clear jest fn global localstorage localstoragemock copy note keep in mind that if you decide to eject before creating src setuptests js the resulting package json file won t contain any reference to it so you should manually create the property setupfilesafterenv in the configuration for jest something like the following jest setupfilesafterenv rootdir src setuptests js copy focusing and excluding tests you can replace it with xit to temporarily exclude a test from being executed similarly fit lets you focus on a specific test without running any other tests coverage reporting jest has an integrated coverage reporter that works well with es6 and requires no configuration run npm test coverage note extra in the middle to include a coverage report like this note that tests run much slower with coverage so it is recommended to run it separately from your normal workflow configuration the default configuration that create react app uses for jest can be overridden by adding any of the following supported keys to a jest config in your package json supported overrides clearmocks collectcoveragefrom coveragepathignorepatterns coveragereporters coveragethreshold displayname extraglobals globalsetup globalteardown modulenamemapper resetmocks resetmodules restoremocks snapshotserializers testmatch transform transformignorepatterns watchpathignorepatterns example package json name your package jest collectcoveragefrom src js jsx ts tsx rootdir node_modules rootdir path to dir coveragethreshold global branches 90 functions 90 lines 90 statements 90 coveragereporters text snapshotserializers my serializer module copy continuous integration by default npm test runs the watcher with interactive cli however you can force it to run tests once and finish the process by setting an environment variable called ci when creating a build of your application with npm run build linter warnings are not checked by default like npm test you can force the build to perform a linter warning check by setting the environment variable ci if any warnings are encountered then the build fails popular ci servers already set the environment variable ci by default but you can do this yourself too on ci servers travis ci following the travis getting started guide for syncing your github repository with travis you may need to initialize some settings manually in your profile page add a travis yml file to your git repository language node_js node_js 8 cache directories node_modules script npm run build npm test copy trigger your first build with a git push customize your travis ci build if needed circleci follow this article to set up circleci with a create react app project on your own environment windows cmd exe set ci true npm test copy set ci true npm run build copy note the lack of whitespace is intentional windows powershell env ci true and npm test copy env ci true and npm run build copy linux macos bash ci true npm test copy ci true npm run build copy the test command will force jest to run in ci mode and tests will only run once instead of launching the watcher for non ci environments you can pass the watchall false flag to disable test watching the build command will check for linter warnings and fail if any are found disabling jsdom if you know that none of your tests depend on jsdom you can safely set env node and your tests will run faster scripts start react scripts start build react scripts build test react scripts test test react scripts test env node copy to help you make up your mind here is a list of apis that need jsdom any browser globals like window and document reactdom render testutils renderintodocument a shortcut for the above mount in enzyme render in react testing library in contrast jsdom is not needed for the following apis testutils createrenderer shallow rendering shallow in enzyme finally jsdom is also not needed for snapshot testing snapshot testing snapshot testing is a feature of jest that automatically generates text snapshots of your components and saves them on the disk so if the ui output changes you get notified without manually writing any assertions on the component output read more about snapshot testing editor integration if you use visual studio code there is a jest extension which works with create react app out of the box this provides a lot of ide like features while using a text editor showing the status of a test run with potential fail messages inline starting and stopping the watcher automatically and offering one click snapshot updates edit this page last updated on 1 27 2025 by rick hanlon previous creating a production build next debugging tests filename conventions command line interface version control integration writing tests testing components react testing library using third party assertion libraries initializing test environment src setuptests js focusing and excluding tests coverage reporting configuration continuous integration on ci servers travis ci circleci on your own environment disabling jsdom snapshot testing editor integration docs get started learn react community stack overflow github discussions twitter contributor covenant social github copyright 2025 facebook inc