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

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.

Viktor Soroka
Viktor Soroka
~ 2 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
~ 2 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
~ 2 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
~ 2 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
~ 2 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
~ 2 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
~ 2 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
~ 2 years ago

Same as what Neonx said. We need an update!

Sundeep Paruchuri
Sundeep Paruchuri
~ a year 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
~ a year ago

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