Handle webpack loader syntax with Jest testing: exclamation raw-loader

Active3 hr before
Viewed126 times

7 Answers


Selecting features by expression with SQL syntax in QGIS , Stack Overflow Public questions & answers ,Please be sure to answer the question. Provide details and share your research!,After adding jest-raw-loader I tried adding to Jest's config:

 moduleNameMapper: {

    "^!!raw-loader!.*": "jest-raw-loader",
load more v

Next, let's configure Jest to gracefully handle asset files such as stylesheets and images. Usually, these files aren't particularly useful in tests so we can safely mock them out. However, if you are using CSS Modules then it's better to mock a proxy for your className lookups.,Similarly, webpack's resolve.root option functions like setting the NODE_PATH env variable, which you can set, or make use of the modulePaths option.,And the mock files themselves:,And finally, we have to handle the webpack alias. For that, we can make use of the moduleNameMapper option again.

If you have JavaScript files that are transformed by Babel, you can enable support for Babel by installing the babel-jest plugin. Non-Babel JavaScript transformations can be handled with Jest's transform config option.

babel - jest
load more v

I still recommend sticking the loader in your webpack config to avoid tool-specific syntax in your code.,I'm using script-loader for jquery plugins, and do a couple imports like this(in different places):,An alternative is to implement the loader using a babel plugin.,I still think it might be better to add that to exclude in your webpack config, or use oneOf and check for vars in the filename: https://webpack.js.org/configuration/module/#rule-oneof

import 'script-loader!jquery-validation'
load more v

Jest transformer mimicking webpack-contrib/raw-loader's functionality,Use jest's transform configuration options to use this package in your unit tests.,npm i jest-raw-loader,github.com/keplersj/jest-raw-loader#readme


$ npm install--save - dev jest - raw - loader
"jest": {
   "transform": {
      "\\.graphql$": "jest-raw-loader",
      "\\.md$": "jest-raw-loader"
load more v

This makes React UI testing easy to automate.,That’s because testing front-end code and UI components is kinda hard.,Those three are obvious. The Webpack stuff is more interesting.,Most tests will follow the same pattern:

The React TestUtils let us render a React component by putting its DOM in a variable, instead of inserting it into a page. For example, to render a React component, we’d do something like this:

var component = TestUtils.renderIntoDocument(
<MyComponent />
load more v


You can load GraphQL queries over .graphql files using Webpack. The package graphql-tag comes with a loader easy to setup and with some benefits:,Loading queries with Webpack,As you can see, .graphql or .gql files will be parsed whenever imported:,You can use and include fragments in .graphql files and have webpack include those dependencies for you, similar to how you would use fragments and queries with the gql tag in plain JS.

query CurrentUserForLayout {
   currentUser {
load more v

Other "syntax-testing" queries related to "Handle webpack loader syntax with Jest testing: exclamation raw-loader"