Using ts-nameof with Vue Unit Tests + jest

[Shinigami92]

My unit test is failing with ReferenceError: nameof is not defined

My current jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  reporters: [
    'default',
    ['jest-junit', { outputDirectory: 'reports/unit' }],
    ['jest-html-reporter', { outputPath: 'reports/unit/test-report.html' }]
  ],
  collectCoverage: true,
  collectCoverageFrom: ['**/*.ts'],
  coverageReporters: ['lcov'],
  setupFiles: ['./tests/unit/jest.dropmultivueinstancewarning.js'],
  setupFilesAfterEnv: ['./tests/unit/jest.setup.js'],
  globals: {
    'ts-jest': {
      astTransformers: ['ts-nameof']
    }
  }
};

globals ts-jest astTransformers seems to have no effect 😕

My tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "plugins": [{ "name": "typescript-tslint-plugin" }],
    "noUnusedLocals": true,
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "downlevelIteration": true,
    "removeComments": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

The project itself is working fine! Only jest test fails

[Shinigami92]

I found a terrifying workaround 😂

window.nameof = (o: Function) => {
  try {
    o();
  } catch (error) {
    const prefix = "Cannot read property '";
    const suffix = "' of undefined";
    const value = (error as Error).message.slice(prefix.length, -suffix.length);
    return value;
  }
};

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const name1 = "name1";
    const name2 = "name2";
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
    expect(wrapper.text()).toMatch(name1);
    expect(wrapper.text()).toMatch(name2);
  });
});

[Shinigami92]

I think I tried everything now :( Still no success

I tried:

• Using ttypescript

• Use script "test:unit": "cross-env TS_NODE_COMPILER='ttypescript' vue-cli-service test:unit"

• Run yarn cross-env TS_NODE_COMPILER="ttypescript" vue-cli-service test:unit

• Run npx cross-env TS_NODE_COMPILER="ttypescript" vue-cli-service test:unit

• Run yarn cross-env TS_NODE_COMPILER="ttypescript" jest

• Run npx cross-env TS_NODE_COMPILER="ttypescript" jest

• Merge jest.config.js in this way:

  
  const merge = require('merge');
  const vuePreset = require('@vue/cli-plugin-unit-jest/presets/typescript-and-babel/jest-preset');

module.exports = merge.recursive(vuePreset, { reporters: [ 'default', ['jest-junit', { outputDirectory: 'reports/unit' }], ['jest-html-reporter', { outputPath: 'reports/unit/test-report.html' }] ], collectCoverage: true, collectCoverageFrom: ['*/.ts'], coverageReporters: ['lcov'], setupFiles: ['./tests/unit/jest.dropmultivueinstancewarning.js'], setupFilesAfterEnv: ['./tests/unit/jest.setup.js'], globals: { 'ts-jest': { babelConfig: false, // also tried true compiler: 'ttypescript', astTransformers: ['ts-nameof'] } } });

- Also tried tsconfig.json

```json
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "plugins": [{ "transform": "ts-nameof", "type": "raw" }, { "name": "typescript-tslint-plugin" }],
    "noUnusedLocals": true,
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "downlevelIteration": true,
    "removeComments": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"],
  "plugins": [{ "transform": "ts-nameof", "type": "raw" }]
}

And I think I tried every combination of the above!

Still getting ReferenceError: nameof is not defined

Very frustrating

---

My mock is not a solution, because we also use nameof<MyComponent>() in some places

[dsherret]

@Shinigami92 maybe try using https://github.com/nonara/ts-patch/ and see if that fixes the problem.

[Shinigami92]

@Shinigami92 maybe try using https://github.com/nonara/ts-patch/ and see if that fixes the problem.

First we need to resolve some (macos?) bugs...

https://github.com/nonara/ts-patch/issues/3 https://github.com/nonara/ts-patch/issues/4

[Shinigami92]

YEEEEEESSSS 🎉 nuff said

[dsherret]

@Shinigami92 oh, it worked? I think I'm going to update the instructions to use it (#92). Seems like an easier setup.

[Shinigami92]

Yes, but there are some bugs with MacOS (we are working on fixes)

What I needed to do:

1. yarn add -D ts-patch

2. tsconfig.json

Add "plugins": [{ "transform": "ts-nameof", "type": "raw" }, /* ... */] to compilerOptions

3. jest.config.js

   // ...
   globals: {
   'ts-jest': {
   astTransformers: ['ts-nameof']
   }
   }
   // ...

Then Vue's "test:unit": "vue-cli-service test:unit" worked