Set Up Tests that Render a React Component with Jest and Babel
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.
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.
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.
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.
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.
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
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
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.
Same as what Neonx said. We need an update!
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
jest-dom is now @testing-library/jest-dom