Setup JEST, Babel, GraphQL

How I setup JEST to work with Babel and GQL

First of all I have to say — I think that it’s a good practice to keep all configuration files in a folder with name config Doesn’t matter if you use Rails, Node.JS, Python or something else.

Currently configuration folder for me looks like:

config/
├── .babelrc.js
├── .eslintrc.json
├── .prettierrc
├── .styled-components-stylelintrc.js
├── .stylelint.rules.js
├── .stylelintrc.js
├── gql-transformer.js
├── jest-transformer.js
└── jest.config.js

In my case I had files like

import gql from 'graphql-tag'
const userData = gql`
  {
    user {
      fullName
      photo
    }
  }
`
export default userData

and I wanted to have only

{
  user {
    fullName
    photo
  }
}

In my Webpack config I have the following

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: babelLoader
      },
      {
        test: /\.gql$/,
        exclude: /node_modules/,
        use: graphqlLoader
      }
    ]
  }

babelLoader here looks like

const babelConfig = require(`${rootPath}/config/.babelrc.js`)
const babelLoader = [
  {
    loader: 'babel-loader',
    options: babelConfig
  }
]
const graphqlLoader = [
  { loader: 'graphql-tag/loader' }
]

.babelrc.js is

"use strict";
module.exports = {
  "presets": [
    ["@babel/preset-env", { modules: "commonjs" }],
    "@babel/preset-react"
  ],
  "plugins": [
    "styled-components",
    // to make `async/await` works
    ["@babel/transform-runtime", {
      "regenerator": true
    }]
  ]
}

I have done it so, because I wanted to share my .babelrc with JEST

jest.config.js

module.exports = {
  verbose: true,
  rootDir: "..",
  // Custom transformer to use custom .babelrc.js
  "transform": {
    "^.+\\.js$": "<rootDir>/config/jest-transformer.js"
  },
  // File mocks. To run tests properly.
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",                 
    "\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
  }
}

JEST transformer for JS files looks like config/jest-transformer.js

module.exports = require('babel-jest').createTransformer(
  require('./.babelrc.js')
)

I found that in my application I can use .gql files like this

{
  user {
    fullName
    photo
  }
}

but JEST can’t import them in test.js files properly.

I had to do the following

jest.config.js

module.exports = {
  verbose: true,
  rootDir: "..",
  "transform": {
    "^.+\\.js$": "<rootDir>/config/jest-transformer.js",
    "^.+\\.gql$": "<rootDir>/config/gql-transformer.js"
  }

And implement config/gql-transformer.js like that

const gql = require("graphql-tag")
module.exports = {
  process: function(src) {
    var str = JSON.stringify(gql(src))
    return (
      "module.exports=" + \
      str + \
      ";module.exports.default=module.exports;"
    )
  }
}

Since that moment JEST tests become be able to process .gql query files.