vuejs / test-utils

Vue Test Utils for Vue 3
https://test-utils.vuejs.org
MIT License
1.04k stars 244 forks source link

Bug: _ctx is missing functions that are returned from the setup functions #2118

Closed kyrylo93 closed 1 year ago

kyrylo93 commented 1 year ago

Describe the bug When I run tests for component I receive an error _ctx.getClasses is not a function TypeError: _ctx.getClasses is not a function

To Reproduce jest.config.ts

import { pathsToModuleNameMapper } from 'ts-jest';
import { compilerOptions } from './tsconfig.json';

const jestConfig = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coveragePathIgnorePatterns: [
    '/node_modules/',
    '/dist/',
  ],

  coverageProvider: 'v8',

  // A set of global variables that need to be available in all test environments
  globals: {
    'vue-jest': {
      compilerOptions: {
        propsDestructureTransform: true,
      },
    },
  },

  // An array of file extensions your modules use
  moduleFileExtensions: [
    'js',
    'ts',
    'json',
    'vue',
  ],

  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
  moduleNameMapper: {
    ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>' }),
  },

  // A preset that is used as a base for Jest's configuration
  preset: 'ts-jest',

  // Use this configuration option to add custom reporters to Jest
  reporters: [
    'default',
    ['jest-junit', { outputDirectory: 'coverage' }],
  ],

  // A list of paths to modules that run some code to configure or set up the testing framework before each test
  setupFilesAfterEnv: ['./setup-tests.ts'],

  // The test environment that will be used for testing
  testEnvironment: 'jsdom',

  // Options that will be passed to the testEnvironment
  testEnvironmentOptions: {
    customExportConditions: ['node', 'node-addons'],
  },

  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
  testPathIgnorePatterns: [
    'node_modules',
    'dist',
  ],

  // A map from regular expressions to paths to transformers
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': '@vue/vue3-jest',
  },

  transformIgnorePatterns: [],
};

export default jestConfig;

Test itself

import { mount } from '@vue/test-utils';
import GraphTab from '../components/GraphTab.vue';
import { TabItemInstance } from '@/modules/results/TabItemClass';

describe('GraphTab.vue', () => {
  it('exists', () => {

    const wrapper = mount(GraphTab, {
      props: { tab: new TabItemInstance({ label: 'Tab test', id: '1' }) },
    });

    expect(wrapper.exists()).toBe(true);
  });
});

Expected behavior I expect to receive true in that case

Related information:

"@types/jest": "^29.5.2",
"@vue/test-utils": "^2.4.0",
"@vue/vue3-jest": "^29.1.1",
"jest": "^29.5.0",
"ts-jest": "^29.1.0",

Additional context

cexbrayat commented 1 year ago

Hi @kyrylo93

Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look. As it is, your issue is not enough to understand what's going on.

cexbrayat commented 1 year ago

We had no answer from the OP. If the issue persists, feel free to ping me with a repro and I'll take a look!