Transfromers for graphql, works in ng cli but not in wallaby

[iangregsondev]

Issue description or question

Running ng test seems to work with graphql files, i have the following jest-config.js

Currently i got the following error

Error: Cannot find module '../graphql/update-user-profile.mutation.graphql' from 'user.service.js'
    at Object.<anonymous> apps/ui/src/app/core/services/user.service.ts:29
    at Object.<anonymous> apps/ui/src/app/core/services/socket.service.ts:11
    at Object.<anonymous> apps/ui/src/app/layout/main-layout/main-layout.component.ts:13
    at Object.<anonymous> apps/ui/src/app/layout/main-layout/main-layout.component.spec.ts:5

If I got to the user.service it is importing relative like so

import updateUserProfileMutation from "../graphql/update-user-profile.mutation.graphql"

module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    "^.+\\.graphql$": "jest-transform-graphql",
    '^.+\\.(ts|js|html)$': 'ts-jest',
  },
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html', 'graphql'],
  collectCoverage: true,
  coverageReporters: ['lcov']
};

I am pretty sure this is to do with the wallaby file and the transforms, can you confirm what i should do.

This is the only thing I have outstanding now :-)

Wallaby.js configuration file

module.exports = function(wallaby) {
  return {
    files: [
      "test-setup.ts",
      "jest.config.js",
      "tsconfig.json",
      "apps/**/*.+(ts|css|html)",
      "libs/**/*.+(ts|css|html)",
      "!**/*.spec.ts",
      "!**/node_modules/**/*",
      "!**/dist/**/*"
    ],

    tests: ["/**/*.spec.ts", "!**/node_modules/**/*", "!**/dist/**/*"],

    compilers: {
      "**/*.ts?(x)": wallaby.compilers.typeScript({
        module: "commonjs",
        getCustomTransformers: () => {
          return {
            before: [
              require("jest-preset-angular/InlineHtmlStripStylesTransformer").factory({ compilerModule: require("typescript") })
            ]
          }
        }
      }),
      "**/*.html": file => ({
        code: require("ts-jest").process(file.content, file.path, {
          globals: { "ts-jest": { stringifyContentPathRegex: "\\.html$" } }
        }),
        map: { version: 3, sources: [], names: [], mappings: [] },
        ranges: []
      })
    },

    setup: function(wallaby) {
      const { pathsToModuleNameMapper } = require('ts-jest/utils')
      const { compilerOptions } = require('./tsconfig')
      const jestConfig = require("./jest.config")
      jestConfig.setupFilesAfterEnv = ["./test-setup.ts"]
      jestConfig.moduleNameMapper = pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' })
      wallaby.testFramework.configure(jestConfig)
    },

    preprocessors: {
      "**/*.js?(x)": file =>
        require("@babel/core").transform(file.content, {
          sourceMap: true,
          compact: false,
          filename: file.path,
          presets: [require("babel-preset-jest")]
        })
    },

    hints: {
      allowIgnoringCoverageInTests: true,
      ignoreCoverage: /ignore coverage/
    },

    env: {
      type: "node",
      runner: "node"
    },

    testFramework: "jest",

    debug: true
  }
}

Code editor or IDE name and version

Visual Studio Code v1.? WebStorm v? IntelliJ IDEA v? Atom v1.? Visual Studio v? Sublime Text v3 build ?

OS name and version

Windows OSX Linux

[smcenlly]

It looks like the reason your graphql module isn't loading is because graphql file extensions are not included in your wallaby files configuration. Could you please add graphql to your wallaby configuration file patterns, so that your wallaby configuration files section looks like this:

...
    files: [
      "test-setup.ts",
      "jest.config.js",
      "tsconfig.json",
-     "apps/**/*.+(ts|css|html)",
-     "libs/**/*.+(ts|css|html)",
+     "apps/**/*.+(ts|css|html|graphql)",
+     "libs/**/*.+(ts|css|html|graphql)",
      "!**/*.spec.ts",
      "!**/node_modules/**/*",
      "!**/dist/**/*"
    ],
...