Best Practices to Test a React App Component With Callbacks
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:05] Testing the app component. Openers or see, app TSX, and look at the contents.
[00:06 - 00:10] This file contains the app component definition. App is a functional component.
[00:11 - 00:17] It doesn't accept any props, nor does it contain any business logic. The only thing it does is render the layout.
[00:18 - 00:26] Most of your components will output some layout, and this is the first thing that you can test. Let's write a test that verifies that app component at least renders successfully.
[00:27 - 00:34] Create a file, appspec.ts, and add the following code. First, we add the top-level describe, where we say which component are we testing.
[00:35 - 00:46] Here we test app component, so we add app, and then we pass in a callback, where we'll add the test cases. The first test case, and the only one for this component, is going to be it renders successfully.
[00:47 - 00:50] It renders successfully. Pass in a callback.
[00:51 - 00:57] Here we want to get the history object. Conced history equals create memory history.
[00:58 - 01:02] We get the function create memory history from the history package. Let's install it.
[01:03 - 01:10] Yarn, add history. After it's done, import create memory history function, and render our app component.
[01:11 - 01:21] Our component depends on router, so we'll need to use router to wrap our app component when we render it. Conced container equals render.
[01:22 - 01:30] Here we pass in a router, and we provide the history that we've just imported to the router element. Inside of the router, we render the app component.
[01:31 - 01:45] After we've rendered our app, we can verify that we've rendered it successfully by checking if it has text "GoblinStore". Expect container inner HTML to match goblinStore.
[01:46 - 01:47] Let's wait. The test is passing.
[01:48 - 01:59] When you write your tests, it is good to use the present simple tense for names, and keep them short and unambiguous. Treat the "eat" word as a part of the sentence.
[02:00 - 02:08] A good example would be to say "eat" renders successfully. A bad one ignores the "eat" and sounds like "eat" component was rendered successfully.
[02:09 - 02:13] Doesn't sound that good, right? The callback contains the actual testing code.
[02:14 - 02:19] If we forget to wrap our component into a router, we will run into an error. Let's check it.
[02:20 - 02:29] We'll see invariant failed, you should not use link outside a router. That's because some of our components inside of the application, and we'll just render the whole app tree, uses link.
[02:30 - 02:41] React Router components, like link or switch or route, require to be inside of a router context. So to fix this, we'll need to wrap our component into router.
[02:42 - 02:57] Here we also created the history object. Alternatively, we could use an in-memory router provided by React Router DOM, but using a separate history object allows us to get the information about the current URL and location from this object.
[02:58 - 03:04] Later, we'll create a helper component that will simplify rendering components that depend on router.