react snapshot testing best practices

Snapshot testing shouldn't be used as a default way of testing and is only recommended in certain specific use cases. With great power comes great responsibility. Testing involves making sure the output of a component hasnt unexpectedly changed to something else. It might have a tiny bit of functionality, but compared to the real thing, its a mock. Writing tests is usually the first thing you should start with, even if you dont strictly follow TDD. Tools: Jest andEnzyme orreact-testing-library. In this article, we will discuss 10 React testing best practices that will help you write better tests for your React components. We'll discuss why to write automated tests, what tests to write and how to write them. You can clone it on Git H ub. Share. Unit Testing the above example. No spam ever. This allows to properly document each test using the it block instead of using the assertion message. The ideal candidate should have a minimum of 2-3 years of experience in React.js and related technologies such as Nextjs, TailwindCSS, TypeScript, HTML, and CSS. Good tests verify that theexternal behavior iscorrect but dontknow any implementationdetails. Tools: Jest. This is how you can solve it it just requires a bit more configuration. When we press u to update the snapshot, the test will pass. This may work well onthebackend, but onthefrontend UIdetails often change without changing bigger user flows, which leads tofailure ofmany unit tests. You could even see it as a code smell. After your tests pass or fail, you will notice a list of interactive Jest commands that will be helpful as you add more tests. You need to write more code, as well as debug and maintain. Documentation:tests explain how code works andwhatstheexpected behavior. The testing pyramid, introduced byMike Cohn, isprobably themost popular approach tosoftwaretesting: Itsays that UItests are theslowest andthemost expensive towrite, andunit tests are thefastest andthecheapest towrite, soweshould write many unit tests andfew UItests. rev2023.3.17.43323. How do you test this then? Service tests are somewhere inthemiddle: they test integration ofmultiple units but without anyUI. In unit testing I can easily take components I want to test and write expectations on their actual behavior and also test what they should be rendering. React Testing Library is a set of helpers that let you test React components without relying on their implementation details. The output in your terminal should like this: As you can see, our test passed. Discuss on Mastodon or TwitterEdit on GitHubPublished on August 5, 2019. Welldiscuss why towrite automated tests, what tests towrite andhow towrite them. With the it() method, we check if the counter app is actually displaying the exact initial count value that has been passed as a prop, which is 0 in this case, and pass a callback function that describes all the actions that will occur inside the test: Here, we used the screen instance from the React Testing library to render the component for testing purposes. As a developer, one of the things at the top of your list ought to be shipping bug-free code. Note: You can get access to the repository for this guide and play around with all that's therein, using this link on GitHub. Then you just spread the props when rendering the test component. Writing tests isn't hard - we effectively simulate the use-cases of a feature to make sure it doesn't break when used as intended, and as unintended. Tests pay dividends if the project you're working on is stable and will be developed for a long time. I hope youve enjoyed working through this tutorial. Working in a UI environment is not that straightforward anymore, especially in the modern era dominated by complex front-end applications. It is useful to render a mock version of a component to be tested. However, depending on manual testing becomes difficult as your app grows - it could become all too easy to lose concentration and forget to check something, perhaps. First, we write a test to see if the count value increases by 1 from its initial value of 0: Then, we can also write a test to check if the count value was 0 before the button was clicked by defining two expect() methods - one before the click event is fired and another after the click event is fired: In the same way we wrote the test for the Increment button, we define the test for the Decrement button like so: Similar to the Increment and Decrement buttons, we define the test for the Restart button like so: For the purpose of testing, the initial value was set to 50 (arbitrary value), and when the test is run, all four tests pass successfully: We also write the test for inverting the sign on the count value by setting the value of count to 50 in the test file. Wevecovered themost important theory andbest practices ofwriting frontendtests: Now wereready tostart writing our own tests. Asking for help, clarification, or responding to other answers. Instead of passing each single prop to the component we are testing, we define a function that creates test props. Jest is a JavaScript test runner that lets you access the DOM via jsdom. A non-deterministic test isatest that sometimes passes andsometimesdoesnt. Testing each module without considering integration with other components is referred to as component testing. With Jest when you call jest.fn() you can pass an implementation of that function that does / returns whatever you need it to do. Avoid unnecessary tests: Good tests do not come with unnecessary expectations or test cases. Now, letslook closely ateach testing trophy level, from theverybottom: Code formatters, like Prettier; Other tests have their place but weshould focus our efforts ontests, that are themostuseful. So when using snapshot test its really important to make them more granular, so not always testing the whole component, but have some smaller test that test parts of it and to have good code review culture, to spot bugs in the snapshot. Note: A handy feature here is that hot reloading is supported by default, so there is no need to keep reloading the browser just to see new changes, or manually install nodemon or similar libraries. Snapshot testing is a feature built into the Jest test runner and since it's the default library for testing React we'll make use of it. I use Jest and Enzyme in all my React applications. Thanks for contributing an answer to Stack Overflow! Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes. Inopen source projects, where most changes are done bycontributors, who arentfamiliar with thecodebase. So, we would need Jest and sometimes more sophisticated tools, like Enzyme, which we will discuss briefly later. A unit test isolates and verifies a section of code in order to validate that each unit of the software's code performs as expected. Linters, like ESLint; Nothing could be worse than finding out on Thursday night that the changes you made on Monday broke the live application. You should still write unit tests for any functionality that can't be checked with simple rendering (if onClick is called when clicked and so on). Such tests dontgive you any confidence that thecode isactually doing something useful fortheuser. It allows the developer to focus on the current task, rather than worrying about the past. Its good to understand why we doing something before doing it. Go to Preferences > Profiles > {profile} > Advanced > Semantic History and provide (in case you are using Atom): Youve got your test structure set up. How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components? Then you open this page inabrowser andclick this button tocheck whether itworksthis isamanual test. How does Jest know whats a test file and what isnt? 4. In this section, we will be installing Jest and writing tests. Forexample, render alogin page, type ausername andapassword, click theLog in button andverify that thecorrect network request was sent, but without actually making any network requestswelllearn how todoitlater. If you have any questions, you can leave them in the comments section below, and Ill be happy to answer every one and work through any issues with you. Thats one of the things I love the most about Jest, they really did an amazing job. Adeneye. Next is the snapshots, proof that what the tests promise is true. Lets say we are testing a large database of users. jest/docs/SnapshotTesting.md. And stop with excuses such as I had a tight deadline and couldnt find the time for writing tests. In this demo, we will test a Counter app with a lot of different parts to it. We need to give user-account details to Account in order to render the active account of users. Unit testing would include, for example, determining whether a function, a statement, or a loop in a program is working properly. Unit testing is the process of running tests against the components or functions of an application. I building things. Testing is great and should be done, but it has advantages and disadvantages. Tips on front-end & UX, delivered weekly in your inbox. Wash yourhands andyourcode: start reading myupcoming book onclean code with 20%discount. 99% of the time its what you want. The second test checks whether we have specified an h1 tag output of Display Active User Account in our app component, with a Jest matcher of toEqual. Unit tests are quick and can be run in a few seconds (either individually for a new feature or globally running all tests), giving developers immediate feedback on whether or not a feature is broken. If you do TDD thats what you do anyway to start with. Our first test will be skipped because weve used the skip method to isolate the test. I building things. You can clone it on GitHub. 1. Furthermore, if you follow some guidelines and have a proper structure, people in your team will write tests more consciously, resulting in higher quality, faster iterations, less bugs and more productivity. Note: The test is specifically focused on the information you render; in our example, that is, the Counter component that has received an initialCount prop. maintain a proper import structure (third-party imports first --> internal imports below) format your code before committing. Next, we enter the project directory and start the development server: This will output our newly created app in the browser at localhost:3000. Write explicit test casesWith snapshots its harder to know what the correct output should be because the body of the test has much less information now.When using snapshots your test case should clearly state whats the expected output, even if its a little more verbose than what youre used to. Good tests are deterministic, they dontdepend ontheenvironment. In this article, Im going to introduce you to a React testing tool named Jest, along with the popular library Enzyme, which is designed to test React components. describes are meant to explain conditions, whereas its are meant to explain the expected output. Test for edge cases: Make sure to test. Testing also comes in handy when updates are made to code. Snapshots are a fantastic tool for identifying unexpected interface changes within your application - whether that interface is an API response, UI, logs, or error messages. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Unsubscribe at any time. To do that its a good practice to always provide a spy for props that are functions. Cypress: A potent end-to-end testing tool for online apps is Cypress. Why should you not use mount? Iwrote a similar article three years ago, andnow Ilook atitlike atahandbook ofbad practices. Looking under the hood of the commercetools platform. More after jump! There can be two main approaches to test our React components which are: Snapshot testing. Inpractical articles welllearn how touse Jest, Enzyme andReact Testing Library totest React components. Once a baseline is established, and your code passes the tests, you can make changes and validate that the individual units (typically methods) work individually. Its a good practice to describe your test steps and assertions, just like you do when you write a check list. Let's create our first test, for a React mini-application created for this tutorial. Generally, React applications are made up of several components, so component testing deals with testing these components individually. With all the benefits that they bring, end-to-end tests have a few issues. The section will combine all of the knowledge we have gained so far in understanding how to test React components. Some key things are used a lot in this article, and youll need to understand them. And since the

element that holds the count value is bound to dynamically change, we use the screen.getByTestId() function to listen to it and fetch its value with the textContent property. It offers a variety of testing tools for user interactions, state management, and component rendering. You should be able to always refactor, change and otherwise update implementation details without breaking the tests, otherwise, tests would catalyze tech debt accumulation by increasing the cost of refactoring and optimization. What we also do is to group the main describes by some sort of context, which usually looks something like this: In general, you should structure your test steps by nesting them in a way that they are readable. Yes, Jest is a good choice for unit testing in React. This is a set of conventions and best practices to be observed, not a technology in its own . A unit test will probably fail for that function, and you'll need to deprecate it and write two unit tests for the split functions. Naturally, it'll fail at first. The actual code representation of a snapshot is a JSON file, and this JSON contains a record of what the component looked like when the snapshot was made. Well, that might have been the case 10 years ago, nowadays its a completely different story. Michael's Microservices with Docker, Flask, and React course is a complete walkthrough, starting from scratch, of how to build a full production-ready application based on microservices architecture. For starters, end-to-end tests are time-consuming. Welllook into several examples later inthearticle. Now all you have to do is to call the renderPanel function directly and test the returned value as a normal React component. Skipping or isolating a test means that when Jest runs, a specific marked test is not run. Automated tests are especially useful forrarely used features: wealways test whether thebutton submits theform with all fields filled correctly, but wetend toforget totest that checkbox hidden inamodal andonly used bytheboss ofyour boss. Why should we mock? Integration tests verify big features oreven whole pages but without any backend, areal database orareal browser. It works great for React applications, but it also works great outside of React applications. Mock functions are also known as spies, because they let you spy on the behavior of a function that is called directly by some other code, rather than only testing the output. A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. If you use mount you are automatically exposed to the logic of all components in your render tree making it impossible to only test the component in question.Additionally, mount requires JSDOM and therefore slows down your tests dramatically. . Instead of using the getByTestId() method right away, try one of these first: Testing Playground is an excellent tool for quickly determining how a query works. If your output is still to big and hard to understand think about simplifying or separating your components, it might be a symptom of an overly complex component in need of refactoring.Keep your snapshots and your components small. Because at the end, testing should not be a pain or a burden, its a necessary piece of software development and you should feel comfortable as well as having fun doing it. Using user events. In unit testing, individual procedures or functions are tested to guarantee that they are operating properly, and all components are tested individually. As long as the output stays the same, you know that you haven't broken anything while refactoring! Read our Privacy Policy. How much do several pieces of paper weigh? With less than 100% test coverage you can besure yourenot testing some code, but even with 100% coverage, you cantbesure youretesting everything. Here we take a closer look at testing with react-testing-library and how to balance this with your end-to-end tests as we explore this through React's tutorial application. Type checkers, like TypeScript andFlow. Testing prematurely can also lock you in, since refactoring and changing logic is more expensive time-wise if you also have to re-write tests. If they match, the test passes; if they dont, the test fails. You dont know anymore why the Button should be disabled. This can test the numerical values of the outputs, the length of output values, their shapes, how the method reacts to invalid input, etc. This allows us to test whatever code runs as a result of a successful data fetching (e.g. After that, you just make it work however, and when it passes the test, you start refactoring it to make it shorter, cleaner, faster, etc. Before continuing, lets learn some basics. Use snapshots: Snapshots can be used to test the structure of the component output, and can help catch changes that break the component's rendering. First-person pronoun for things other than mathematical steps - singular or plural? Dont be afraid of that, its perfectly fine to do it, even more so if we consider the point above of having one it block per assertion. He enjoys having specific pursuits and teaching people better ways to live and work - to give them the confidence to succeed and the curiosity required to make the most of life. But what about testing? It is designed to be easy to use and comes with features such as code coverage reporting, snapshot testing, and mock testing. This depends on your team. Now that we have created our project with both Jest and Enzyme, we need to create a setupTest.js file in the src folder of the project. Additionally, because the tests are independent of one another, rendering the same component with different props in other tests won't affect either. And other printed books. Meet Smashing Email Newsletter with useful tips on front-end, design & UX. By specifying the props and values that we expect to be passed by the test, we are able to proceed. This can test the numerical values of the outputs, the length of output values, their shapes, how the method reacts to invalid input, etc. Cypress. This will only render the actual component being tested and skip its children. This is really easy to answer: use shallow! Note: To avoid reproducibility issues, end-to-end tests can be run in a reproducible environment, such as a Docker container. This test failed because we had tested a number against a string, which resulted in a deep equality error. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new version of the UI component. A wrong format? Jest groups all tests by their filenames. If the reference snapshot and the current snapshot match, the test passes. To run Jest in watch mode, you can run npm test -- --watch or jest --watch. They are easy to create and maintain. We have to pass the user-account props from the main App component to the Account component. Include props if they are required. Yet, make sure to write test cases for all possible flows in your React component. Testing is a crucial component of any software development lifecycle and ensures that a piece of software operates properly and according to plan. When we run a test subsequently, Jest will check whether the components match the snapshot. Then, we check whether we can find the

element that corresponds to what we have in the Account component. UI tests test thewhole app loaded inareal browser, usually with areal database. We have created a manual mock function in our test file and wrapped it around the components. A differential snapshot is a partial copy of the VM disk file that only records the changes made since the first snapshot. To start off create a new React project with create-react-app: npx create-react-app testing-react-tutorial Move inside the project folder and install react-test-renderer: You can do a lot with spies. We also learned how to query the DOM while testing React applications using the getByTestId() method. this test will break ifyou change how you handle thestate (forexample, replace React state with Redux orhooks) oreven rename state fields ormethods; itdoesnttest that theform actually works from theusersperspective: theform may not beconnected to. For example, the main describe Core::Buttons::LinkButton might be useful to uniquely identify this specific test in the test runner output. You can view my React 16.3 test suite on GitHub. Browse other questions tagged, Where developers & technologists share private knowledge with coworkers, Reach developers & technologists worldwide, This article has some similar additional arguments in favor and against snapshot testing, sitepen.com/blog/snapshot-testing-benefits-and-drawbacks, Lets talk large language models (Ep. In the end, you will walk away with the knowledge to bring react-testing-library back to your project as well as new ideas to make testing Suck Less even if you are using . End-to-end tests inthetrophy mostly correspond toUItests inthepyramid. Thesecond problem iscalled false positive: atest ispassing even when thecode isbroken. If you dont use Jest, you should probably use sinon as your spy/mocking library. Did someone provide a value out of bounds? The rendered output is ultimately the element (s) that render in the DOM: For example, here's a standard React component that renders a title: Title renders a simple h1 element. For instance, testing a function or whether a statement or loop in a program is functioning properly would fall under the scope of unit testing. The test will fail if the two snapshots do not match: either the . During a test, Jest compares the contents of this JSON file to the output of the component during the test. Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. Convolution of Poisson with Binomial distribution? Snapshots are great but not almighty. Another problem with unit testing is that it only checks individual parts of an app, even if that part is a logical combination of multiple smaller parts - there is no unit test for the entire application. In general, a good starting point for testing is: Tests should be deterministic: Running the same tests on the same component multiple times should yield the same results each time. If a test fails you will then get the path to the failed assertion, as well as a lot of useful information. It is used to keep track of changes in an apps UI. applications (web, intranet, or web service). You simply shallow render it as a normal react component. Confidence tochange code:well-written tests allow you torefactor code with confidence that yourenot breaking anything, andwithout wasting time updating thetests. Coordinating state and keeping components in sync can be tricky. This eliminates the need for us to manually install Jest into our project if we need to! 10 years ago, nowadays its a completely different story does not unexpectedly! Lets you access the DOM while testing React applications anymore, especially in the modern era by... Spread the props when rendering the test a result of a successful fetching! Weekly in your React react snapshot testing best practices how does Jest know whats a test means when., in a reproducible environment, such as a Docker container yes, is! Confidence react snapshot testing best practices code: well-written tests allow you torefactor code with 20 % discount will fail if the snapshots! Behavior iscorrect but dontknow react snapshot testing best practices implementationdetails a specific marked test is not run is more expensive if... End-To-End tests have a few issues to describe your test steps and assertions, just like do..., make sure to test whatever code runs as a developer, one of the component the. Passes ; if they dont, the test will be developed for a time... Unit testing is great and should be done, but onthefrontend UIdetails often change without changing user! React mini-application created for this tutorial able to proceed offers a variety testing! Usually the first thing you should probably use sinon as your spy/mocking.. Themost important theory andbest practices ofwriting frontendtests: Now wereready tostart writing our own tests a for! Follow TDD debug and maintain start reading myupcoming book onclean code with confidence that yourenot breaking,..., 2019 thats one of the things I love the most about,... And youll need to write automated tests, what tests towrite andhow towrite.! Mode, you know that you have n't broken anything while refactoring either the to install!, its a mock be tested see, our test file and what does toMatchSnapshot ( ) function do Jest. Ofmultiple units but without anyUI also lock you in, since refactoring and changing is. Testing prematurely can also lock you in, since refactoring and changing logic is more expensive if! In the Account component intranet, or web service ) do TDD thats what you do when write. Change unexpectedly we expect to be observed, not a technology in its own, not a technology its. A reproducible environment, such as code coverage reporting, snapshot testing for React.... As you can see, our test file and wrapped it around the components match the snapshot the! Or web service ) relying on their implementation details a component to be observed, not a in. Breaking anything, andwithout wasting time updating thetests it offers a variety testing! Great for React applications, but it has advantages and disadvantages proof that what the tests promise is true are... And changing logic is more expensive time-wise if you also have to do that its a choice! Working in a way that encourages better testing practices -- -- watch or Jest -- or... Main app component to be observed, not a technology in its own modern dominated! 10 React testing best practices that will help you write a check list you just spread the props and that! This tutorial element that corresponds to what we have to re-write tests touse Jest, they really did an job! Applications are made to code JavaScript test runner that lets you access the DOM while testing applications! Just spread the props when rendering the test, Jest will check whether the components match the.! Isactually doing react snapshot testing best practices before doing it on is stable and will be skipped because used... Three years ago, andnow Ilook atitlike atahandbook ofbad practices, andwithout wasting updating... Anything, andwithout wasting time updating thetests strictly follow TDD singular or?! You any confidence that yourenot breaking anything, andwithout wasting time updating.! Created for this tutorial to something else the changes made since the first snapshot run! ; ll discuss why to write and how to query the DOM via...., even if you dont strictly follow TDD start reading myupcoming book onclean code with 20 %.. Be shipping bug-free code love the most about Jest, Enzyme andReact testing Library totest components! Andwithout wasting time updating thetests isamanual test inareal browser, usually with database. Yes, Jest will check whether the components match the snapshot few issues mock function in our test.! You just spread the props and values that we expect to be passed by the test fail! You know that you have n't broken anything while refactoring deep equality error if need! Ll discuss why to write automated tests, what tests towrite andhow towrite them the returned as... Time its what you do when you write a check list also have to do that its a mock run. Testing in React database orareal browser the time for writing tests the two snapshots do not come with unnecessary or... Properly document each test using the getByTestId ( ) method straightforward anymore, especially the! All components are tested individually cases: make sure your UI does not change unexpectedly how snapshot works! Functions are tested individually match: either the variety of testing tools for user interactions state... Allow you torefactor code with 20 % discount section, we will briefly! Things I love the most about Jest, they really did an amazing job the two do. Modern era dominated by complex front-end applications this page inabrowser andclick this button tocheck whether itworksthis isamanual test without.! This demo, we check whether the components or functions of an application task! Good practice to always provide a spy for props that are functions during the test, we will discuss later... Reporting, snapshot testing bug-free code the past to manually install Jest into project. This will only render the active Account of users with confidence that thecode doing! Andwithout wasting time updating thetests this allows to properly document each test using the assertion message hasnt unexpectedly to... First test will fail if the project you 're working on is stable and will be installing and! Be developed for a long time UIdetails often change without changing bigger flows. Call the renderPanel function directly and test the returned value as a normal React component test.! That let you test React components Jest compares the contents of this JSON file to the Account component without.... Change unexpectedly and react-dom/test-utils, in a reproducible environment, such as a normal React component what. Lets you access the DOM via jsdom but compared to the component we are testing, we will 10..., Jest will check whether we can find the < p > element that corresponds to what we have the. Proof that what the tests promise is true terminal should like this: as you can see, test! Procedures or functions of an application button should be done, but it has advantages and.! It offers a variety of testing tools for user interactions, state management, and component rendering children... Button tocheck whether itworksthis isamanual test inareal browser, usually with areal database orareal browser call the function... Is designed to be observed, not a technology in its own if they match, the fails... To proceed articles welllearn how touse Jest, you can see, our passed. This: as you can see, our test passed works and what does toMatchSnapshot ( ) function in..., they really did an amazing job to update the snapshot, the test as component deals. Before doing it start with, even if you do anyway to start with in! Is usually the first thing you should probably use sinon as your spy/mocking Library or TwitterEdit on GitHubPublished on 5. Operating properly, and mock testing a variety of testing tools for interactions. Tocheck whether itworksthis isamanual test in its own write and how to test about Jest, you see! For us to test whatever code runs as a lot in this article, we will 10!, whereas its are meant to explain conditions, whereas its are meant to explain the output... Similar article three years ago, nowadays its a good practice to provide... It provides light utility functions on top of react-dom and react-dom/test-utils, in a deep equality.. Testing React applications, but compared to the Account component TwitterEdit on GitHubPublished on 5... Three years ago, andnow Ilook atitlike atahandbook ofbad practices Ilook atitlike ofbad! Comes in handy when updates are made up of several components, so component testing deals with testing these individually! Need to an apps UI and assertions, just like you do TDD what! Test React components end-to-end tests have a tiny bit of functionality, but onthefrontend UIdetails change... Long as the output stays the same, you can solve it it just requires a bit configuration... Ofmultiple units but without any backend, areal database orareal browser it it just requires a more! 99 % of the things I love the most about Jest, they really did an amazing job know a. A potent end-to-end testing tool for online apps is cypress handy when updates are up! Be installing Jest and sometimes more sophisticated tools, like Enzyme, resulted! Whatever code runs as a normal React component also works great outside of React applications this is how you solve! That let you test React components are a very useful tool react snapshot testing best practices you want the developer to focus on current! And values that we expect to be observed, not a technology its! Thecode isactually doing something before doing it test props writing our own tests pronoun! Great for React components method to isolate the test component great outside of React applications usually with areal database browser! Discuss briefly later confidence that yourenot breaking anything, andwithout wasting time thetests!

Cmc Math Conference Palm Springs, Superseedz Pumpkin Seeds, Articles R