1. 24
    Set Up Tests that Render a React Component with Jest and Babel
    6m 22s

Set Up Tests that Render a React Component with Jest and Babel

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

Testing a React component takes a little more configuration than a test for standard JavaScript. In this lesson, we’ll install and configure react-testing-library and jest-dom matchers, create a test that renders our App component and configure it all to work properly with Babel 7 and dynamic import syntax.

Instructor: [00:00] Now that we know our test script is working, we need to be able to create a valuable test. Since this is a test file for our app component, we need to be able to test React components. I'm going to go into the terminal, and I'm going to do a couple more installs.

[00:14] I'm going to run npm i -d react-testing-library and jest-dom. With those installed, let's update our test. Back up in the editor, I'm going to add a couple of imports. I'm going to import react from react, and I'm also going to import render from react-testing-library, and I'm going to import jest-dom/extend-expect.

[00:58] This is going to add some extra matchers that are specific to testing DOM. I'm also going to import react-testing-library/clean-up-after-each. This is going to run some code after each test that'll clean up the virtual DOM to make sure that we don't have any state hanging around from one test to the next.

[01:22] Then we want to test our app component, so we're going to import app from app. Now, I'm going to go down to my test. I'm going to update my name here, and we're going to say that it renders without error. I'm going to replace the body of my test, and I'm going to call render. I'm going to pass that app.

[01:48] I'll save that, and then I'm going to run npm test. Our test is going to fail. If I expand the terminal here, we can see that it's having a problem with the JSX in our test. There's a lot of descriptive information here, but it's basically telling us that we don't have standard JavaScript and we need to transform our code in order to test it.

[02:11] Let's fix this. In our webpack config, we're using Babel to transform our application code. We want to do the same thing for our test code. I'm going to come into this webpack.config.base, and I'll get the terminal out of the way. We'll see that we have all of this configuration for Babel. 

[02:30] I want to take this, and I want to move it into a centralized location. I'm going to add a new file to the root of my project. I'll just call that .babelrc. In my webpack config, I'm going to find all the options for Babel. I'm going to leave the rule here, with test, the Babel loader, what to exclude. I'm going to take the options object, and I'm going to cut that.

[02:57] I'm going to remove the options key there. We can save that config. I'm going to go into my Babel RC, and I'm going to paste that object in. Because this is treated as JSON, I have to update the strings to use double quotes. With that cleaned up a little bit, I'm going to go ahead and save that.

[03:17] I'm going to open a terminal, and I'm going to do an npm run build. I just want to make sure that by moving that configuration out, I haven't changed the build at all. All right, everything still successfully built. By default, the Babel loader is going to find this Babel RC and use those options.

[03:36] Now that those settings are in there, let's go back to our test, and in the terminal, I'm going to do an npm run test. My test is going to fail again. Let's expand the terminal and see what's happening. If I scroll up, we'll see that we're getting a new error, so this is progress. Now, it has an issue with babel-core.

[03:58] Because we're using Babel 7, some of the internals are still looking for this babel-core module. We can fix that by doing another install. I'm going to clear out the terminal, and I'm going to install two more modules. I'll do an npm i -d. We're going to install babel-jest, and we're going to install babel-core.

[04:24] I'm going to specify a tag here. I'm going to say @bridge. There's a bridge version of babel-core that'll resolve that discrepancy between babel-core 6 and babel-core from Babel 7. We'll install those, and with those installed, let's clear that out and npm test again. Our tests are going to fail again, but we're getting a different error.

[04:52] Again, we're making progress. We'll see here that it has an issue with this dynamic import syntax. The problem here is that while we are using Babel to do our transform, Jest is running in a Node process, and Node doesn't support this syntax, even with that Babel transform.

[05:09] We're going to need to install another module to take care of this. I'm going to clear this out. I'm going to do an npm i -d, and this is going to be babel-plugin-dynamic-import-node. This is going to be the Node version of Babel support for that dynamic import syntax.

[05:30] We'll install that. With that installed, we need to update our Babel RC file. I'll move that out of the way, and open up Babel RC. Then down here at the bottom, I'm going to add a new key, because we only want to use this new plugin when we're in our tests.

[05:52] We can add a top level ENV key, and then we can specify environment-specific settings. Jest is going to set the environment variable to test. Then within test, we're going to have plugins, and that'll be an array.

[06:07] We're going to pass it in our dynamic import Node plugin, and we'll save this. Then we're going to run npm test again, and we finally have a passing test.

Viktor Soroka
Viktor Soroka
~ 3 years ago

Great video. I think it also worth to add the video about handling case when there is CSS import as this also requires additional configuration.

Andy Van Slaars
Andy Van Slaarsinstructor
~ 3 years ago

Great video. I think it also worth to add the video about handling case when there is CSS import as this also requires additional configuration.

Viktor,

Thanks for the feedback. It probably makes sense to add a video for that case. I'll try to get one added in the near future. For now, I'll write up some information for anybody else who might be looking for the same information:

What you'll want to do so that imports for css files don't break your tests, is create a mock module and map CSS files to that via your jest.config.js. You can use the top-level moduleNameMapper key like:

moduleNameMapper: { '\.css$': require.resolve('./style-mock.js'), }

And in that style-mock.js file, you can just export an empty object with module.exports = {}

Now when that CSS import comes up in a component file you're testing, it will resolve to an empty object instead of treating CSS syntax as JS and throwing an exception.

Rahil
Rahil
~ 3 years ago

How is the code transformed without running webpack as we only run jest with npm test. secondly, the plugin was installed as babel-plugin-dynamic-import-node and used in babelrc as dynamic-import-node.

Andy Van Slaars
Andy Van Slaarsinstructor
~ 3 years ago

How is the code transformed without running webpack as we only run jest with npm test. secondly, the plugin was installed as babel-plugin-dynamic-import-node and used in babelrc as dynamic-import-node.

Jest will run code through babel, using a default config if it finds one. This is why we moved the babel settings out of the webpack config and into a babelrc file.

The plugin name follows a convention that babel understands, so it assumes the babel-plugin- prefix, allowing us to leave it out.

Brendan Whiting
Brendan Whiting
~ 3 years ago

The dynamic import worked for me in the node environment in jest without installing the special babel plugin. Maybe it's my version of node? I'm running v10.10.0

Miguel Palomera
Miguel Palomera
~ 3 years ago

The dynamic import worked for me in the node environment in jest without installing the special babel plugin. Maybe it's my version of node? I'm running v10.10.0

Same here I don't have to use the dynamic plugin. Moreover, react-testing-library is now deprecated instead I have to install @testing-library/react ( npm i -D @testing-library/react ) and in the code replace react-testing-library for @testing-library/react

Martin Tsan
Martin Tsan
~ 3 years ago

The dynamic import worked for me in the node environment in jest without installing the special babel plugin. Maybe it's my version of node? I'm running v10.10.0

Same here I don't have to use the dynamic plugin. Moreover, react-testing-library is now deprecated instead I have to install @testing-library/react ( npm i -D @testing-library/react ) and in the code replace react-testing-library for @testing-library/react

That's true.

Janis
Janis
~ 3 years ago

Same as what Neonx said. We need an update!

Sundeep Paruchuri
Sundeep Paruchuri
~ 2 years ago

Much of this is outdated and needs a review. For anyone reading this who is using this course, the following seems to be new/updated:

  • react-testing-library is now namespaced as @testing-library/react
  • you no longer need to import "cleanup-after-each" (this is automatic now)
  • you no longer need @babel/plugin-syntax-dynamic-import
  • none of the errors (and resulting fixes/patches) are relevant after the step where you create the .babelrc file
Ryan
Ryan
~ 2 years ago

jest-dom is now @testing-library/jest-dom