question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using ts-nameof with Vue Unit Tests + jest

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
Shinigami92commented, Dec 18, 2019

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

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

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

1reaction
dsherretcommented, Dec 18, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Test your VueJS + TypeScript application - Medium
This tutorial is focused on testing a VueJS app using TypeScript. We will be using Jest (the TypeScript version “ts-jest”).
Read more >
Vue component testing with Jest error, TypeError: Cannot read ...
The ShowOrder component in <router-link> displays the individual order on its own page. I can't even get a snapshot test to work. I...
Read more >
Using with TypeScript - Vue Test Utils
In this guide, we'll walk through how to setup a testing setup for a TypeScript project using Jest and Vue Test Utils from...
Read more >
Unit Testing with Vue-test-utils - Section.io
Vue -test-utils is a testing library that is built on Jest. ... Create a file in the test/unit directory called detailsview.spec.js .
Read more >
Vue.js and Vuetify unit testing with Jest - IOBIO
Next, it will ask to select a “Unit testing solution”. Select “Jest” here. It will then ask to either save the configuration in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found