Best Practices to Test a React App Component With Callbacks
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)