search

wallabyjs / public

Repository for Wallaby.js questions and issues
http://wallabyjs.com
757 stars 45 forks source link

Support for vite-jest preset with wallaby autodetect #2778

Closed egriff38 closed 3 years ago

egriff38 commented 3 years ago

Issue description or question

I'd like to use the vite-jest preset to run my tests (my repo is a modified version of the example here). I can run my project tests directly via the vite-jest command, and it picks up the single test file, and generates the proper snapshot (not included). But starting up wallaby does not show any tests to be run.

Below are my files.

wallaby.conf.js

module.exports = function (w) {
  return {
    autoDetect: true,
    testFramework: {
      configFile: "./jest.config.js",
    },
  }
}

jest.config.js

module.exports = {
  preset: 'vite-jest',

  testMatch: [
    'src/**/*.test.ts?(x)',
    'src/**/__tests__/*.ts?(x)'
  ],
  rootDir: ".",

  testEnvironment: 'jest-environment-jsdom'
}

src/components/uploadSpreadsheet/uploadSpreadsheet.test.tsx

import { mount } from "@vue/test-utils";
import UploadSpreadsheet from "./uploadSpreadsheet.vue";

test("hello world", async () => {
  const wrapper = mount(UploadSpreadsheet);
  expect(wrapper.html()).toMatchSnapshot();
});

package.json

{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test:generate-output": "vite-jest --json --outputFile=.jest-test-results.json",
    "test": "vite-jest"
  },
  "dependencies": {
    "@vueuse/core": "^5.3.0",
    "element-plus": "^1.0.2-beta.70",
    "vite-jest": "0.0.3",
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@storybook/addon-actions": "^6.4.0-alpha.18",
    "@storybook/addon-essentials": "^6.4.0-alpha.18",
    "@storybook/addon-jest": "^6.3.7",
    "@storybook/addon-links": "^6.4.0-alpha.18",
    "@storybook/vue3": "^6.4.0-alpha.18",
    "@types/jest": "^27.0.1",
    "@vitejs/plugin-vue": "^1.2.5",
    "@vitejs/plugin-vue-jsx": "^1.1.7",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/test-utils": "^2.0.0-rc.12",
    "babel-loader": "^8.2.2",
    "jest": "^27.0.6",
    "sass": "^1.37.5",
    "storybook-builder-vite": "^0.0.12",
    "ts-jest": "^27.0.5",
    "typescript": "^4.3.2",
    "vite": "^2.4.2",
    "vite-plugin-style-import": "^1.1.1",
    "vue-loader": "^16.3.1",
    "vue-tsc": "^0.0.24"
  }
}

Wallaby diagnostics report

{
  editorVersion: '1.59.0',
  pluginVersion: '1.0.308',
  editorType: 'VSCode',
  osVersion: 'darwin 20.6.0',
  nodeVersion: 'v14.3.0',
  coreVersion: '1.0.1130',
  checksum: 'MDNmMmFhMjRiMWU0ZWQ5ZDY0ZTVjZjAyMmNmZDdmZDcsMTY1MTk2ODAwMDAwMCww',
  config: {
    testFramework: { version: 'jest@24.8.0', configurator: 'jest@24.8.0', reporter: 'jest@24.8.0', starter: 'jest@24.8.0', configFile: './jest.config.js', autoDetected: true },
    diagnostics: {
      jest: {
        config: {
          configs: [
            {
              automock: false,
              cache: true,
              cacheDirectory: '/private/var/folders/73/65d_r24n0dd1dxt0sh_9yxkc0000gp/T/jest_dy',
              clearMocks: false,
              coveragePathIgnorePatterns: [ '/node_modules/' ],
              cwd: '<homeDir>/Documents/vite-storybook',
              dependencyExtractor: undefined,
              detectLeaks: false,
              detectOpenHandles: false,
              displayName: undefined,
              errorOnDeprecated: false,
              extensionsToTreatAsEsm: [ '.jsx', '.vue', '.ts', '.tsx' ],
              extraGlobals: [],
              filter: undefined,
              forceCoverageMatch: [],
              globalSetup: undefined,
              globalTeardown: undefined,
              globals: {},
              haste: { computeSha1: false, enableSymlinks: false, forceNodeFilesystemAPI: false, throwOnModuleCollision: false },
              injectGlobals: true,
              moduleDirectories: [ 'node_modules' ],
              moduleFileExtensions: [
                'js',   'jsx',
                'json', 'vue',
                'mjs',  'ts',
                'tsx'
              ],
              moduleLoader: undefined,
              moduleNameMapper: [
                [
                  '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$',
                  '<homeDir>/Documents/vite-storybook/node_modules/jest-transform-stub/index.js'
                ]
              ],
              modulePathIgnorePatterns: [],
              modulePaths: undefined,
              name: '95478c18fe9a102f85e71276996960b3',
              prettierPath: 'prettier',
              resetMocks: false,
              resetModules: false,
              resolver: undefined,
              restoreMocks: false,
              rootDir: '<homeDir>/Documents/vite-storybook',
              roots: [ '<homeDir>/Documents/vite-storybook' ],
              runner: '<homeDir>/Documents/vite-storybook/node_modules/jest-runner/build/index.js',
              setupFiles: [],
              setupFilesAfterEnv: [],
              skipFilter: false,
              skipNodeResolution: undefined,
              slowTestThreshold: 5,
              snapshotResolver: undefined,
              snapshotSerializers: [],
              testEnvironment: '<homeDir>/Documents/vite-storybook/node_modules/jest-environment-jsdom/build/index.js',
              testEnvironmentOptions: {},
              testLocationInResults: false,
              testMatch: [ '**/*.test.ts?(x)', '**/__tests__/*.ts?(x)' ],
              testPathIgnorePatterns: [ '/node_modules/' ],
              testRegex: [],
              testRunner: '<homeDir>/Documents/vite-storybook/node_modules/jest-circus/runner.js',
              testURL: 'http://localhost',
              timers: 'real',
              transform: [ [ '^.+\\.(js|mjs|jsx|json|vue|ts|tsx)$', '<homeDir>/Documents/vite-storybook/node_modules/vite-jest/index.js', {} ] ],
              transformIgnorePatterns: [ '!/node_modules/\\.vite/' ],
              unmockedModulePathPatterns: undefined,
              watchPathIgnorePatterns: []
            }
          ],
          globalConfig: {
            bail: 0,
            changedFilesWithAncestor: false,
            changedSince: undefined,
            collectCoverage: false,
            collectCoverageFrom: [],
            collectCoverageOnlyFrom: undefined,
            coverageDirectory: '<homeDir>/Documents/vite-storybook/coverage',
            coverageProvider: 'babel',
            coverageReporters: [ 'json', 'text', 'lcov', 'clover' ],
            coverageThreshold: undefined,
            detectLeaks: false,
            detectOpenHandles: false,
            errorOnDeprecated: false,
            expand: false,
            filter: undefined,
            findRelatedTests: false,
            forceExit: false,
            globalSetup: undefined,
            globalTeardown: undefined,
            json: false,
            lastCommit: false,
            listTests: false,
            logHeapUsage: false,
            maxConcurrency: 5,
            maxWorkers: 11,
            noSCM: undefined,
            noStackTrace: false,
            nonFlagArgs: undefined,
            notify: false,
            notifyMode: 'failure-change',
            onlyChanged: false,
            onlyFailures: false,
            outputFile: undefined,
            passWithNoTests: false,
            projects: [],
            replname: undefined,
            reporters: [ 'default', '<homeDir>/Documents/vite-storybook/node_modules/vite-jest/reporter.cjs' ],
            rootDir: '<homeDir>/Documents/vite-storybook',
            runTestsByPath: false,
            silent: undefined,
            skipFilter: false,
            testFailureExitCode: 1,
            testNamePattern: undefined,
            testPathPattern: '',
            testResultsProcessor: undefined,
            testSequencer: '<homeDir>/Documents/vite-storybook/node_modules/@jest/test-sequencer/build/index.js',
            testTimeout: undefined,
            updateSnapshot: 'new',
            useStderr: false,
            verbose: undefined,
            watch: false,
            watchAll: false,
            watchPlugins: undefined,
            watchman: true
          },
          hasDeprecationWarnings: false,
          wallaby: {
            roots: [],
            watchPathIgnorePatterns: [ '/node_modules/', '\\./dist/|\\./build/|\\./coverage/|\\./git/|/\\..+/' ],
            testPathIgnorePatterns: [ '/node_modules/', '\\./dist/|\\./build/|\\./coverage/|\\./git/|/\\..+/' ],
            testMatch: [ '**/*.test.ts?(x)', '**/__tests__/*.ts?(x)' ],
            testRegex: []
          }
        }
      }
    },
    filesWithCoverageCalculated: [],
    filesWithNoCoverageCalculated: [],
    globalSetup: false,
    micromatch: true,
    files: [
      { pattern: '/node_modules/', regexp: /\/node_modules\//, ignore: true, trigger: true, load: true },
      { pattern: '\\./dist/|\\./build/|\\./coverage/|\\./git/|/\\..+/', regexp: /\.\/dist\/|\.\/build\/|\.\/coverage\/|\.\/git\/|\/\..+\//, ignore: true, trigger: true, load: true },
      { pattern: '**/**', ignore: false, trigger: true, load: true, order: 1 },
      { pattern: '**/*.test.ts?(x)', ignore: true, trigger: true, load: true },
      { pattern: '**/__tests__/*.ts?(x)', ignore: true, trigger: true, load: true }
    ],
    tests: [
      { pattern: '/node_modules/', regexp: /\/node_modules\//, ignore: true, trigger: true, load: true, test: true },
      {
        pattern: '\\./dist/|\\./build/|\\./coverage/|\\./git/|/\\..+/',
        regexp: /\.\/dist\/|\.\/build\/|\.\/coverage\/|\.\/git\/|\/\..+\//,
        ignore: true,
        trigger: true,
        load: true,
        test: true
      },
      { pattern: '**/*.test.ts?(x)', ignore: false, trigger: true, load: true, test: true, order: 2 },
      { pattern: '**/__tests__/*.ts?(x)', ignore: false, trigger: true, load: true, test: true, order: 3 }
    ],
    runAllTestsInAffectedTestFile: false,
    updateNoMoreThanOneSnapshotPerTestFileRun: false,
    addModifiedTestFileToExclusiveTestRun: true,
    compilers: {},
    preprocessors: {},
    maxConsoleMessagesPerTest: 100,
    autoConsoleLog: true,
    delays: { run: 0, edit: 100, update: 0 },
    workers: { initial: 0, regular: 0, recycle: false },
    teardown: undefined,
    hints: {
      ignoreCoverage: '__REGEXP /ignore coverage|istanbul ignore/',
      ignoreCoverageForFile: '__REGEXP /ignore file coverage/',
      commentAutoLog: '?',
      testFileSelection: { include: '__REGEXP /file\\.only/', exclude: '__REGEXP /file\\.skip/' }
    },
    automaticTestFileSelection: true,
    runSelectedTestsOnly: false,
    mapConsoleMessagesStackTrace: false,
    extensions: {},
    env: {
      type: 'node',
      params: {},
      runner: '<homeDir>/.nvm/versions/node/v14.3.0/bin/node',
      viewportSize: { width: 800, height: 600 },
      options: { width: 800, height: 600 },
      bundle: true
    },
    reportUnhandledPromises: true,
    slowTestThreshold: 75,
    lowCoverageThreshold: 80,
    loose: true,
    configCode: 'module.exports = function (w) {\n' +
      '  return {\n' +
      '    // tell wallaby to use automatic configuration\n' +
      '    autoDetect: true,\n' +
      '\n' +
      '    testFramework: {\n' +
      '      // the jest configuration file path\n' +
      '      // (relative to project root)\n' +
      '      configFile: "./jest.config.js",\n' +
      '    },\n' +
      '  }\n' +
      '}\n'
  },
  packageJSON: {
    dependencies: { '@vueuse/core': '^5.3.0', 'element-plus': '^1.0.2-beta.70', 'vite-jest': '0.0.3', vue: '^3.0.5' },
    devDependencies: {
      '@babel/core': '^7.14.6',
      '@storybook/addon-actions': '^6.4.0-alpha.18',
      '@storybook/addon-essentials': '^6.4.0-alpha.18',
      '@storybook/addon-jest': '^6.3.7',
      '@storybook/addon-links': '^6.4.0-alpha.18',
      '@storybook/vue3': '^6.4.0-alpha.18',
      '@types/jest': '^27.0.1',
      '@vitejs/plugin-vue': '^1.2.5',
      '@vitejs/plugin-vue-jsx': '^1.1.7',
      '@vue/compiler-sfc': '^3.0.5',
      '@vue/test-utils': '^2.0.0-rc.12',
      'babel-loader': '^8.2.2',
      jest: '^27.0.6',
      sass: '^1.37.5',
      'storybook-builder-vite': '^0.0.12',
      'ts-jest': '^27.0.5',
      typescript: '^4.3.2',
      vite: '^2.4.2',
      'vite-plugin-style-import': '^1.1.1',
      'vue-loader': '^16.3.1',
      'vue-tsc': '^0.0.24'
    }
  },
  fs: { numberOfFiles: 45 },
  debug: [
    '2021-08-18T18:09:41.012Z angular/cli config Angular CLI not found.\n',
    '2021-08-18T18:09:41.193Z jest/config Detected Jest.\n',
    '2021-08-18T18:09:41.193Z jest/config Configured Jest.\n',
    '2021-08-18T18:09:41.195Z project Wallaby Node version: v14.3.0\n',
    '2021-08-18T18:09:41.195Z project Wallaby config: <homeDir>/Documents/vite-storybook/wallaby.conf.js\n',
    '2021-08-18T18:09:41.270Z project File cache: <homeDir>/.vscode/extensions/wallabyjs.wallaby-vscode-1.0.308/projects/a0af2b84759bcb64\n',
    '2021-08-18T18:09:41.397Z uiService Listening port 51235\n',
    '2021-08-18T18:09:41.400Z project package.json file change detected, invalidating local cache\n',
    '2021-08-18T18:09:41.419Z workers Parallelism for initial run: 10, for regular run: 5\n',
    '2021-08-18T18:09:41.419Z workers Starting run worker instance #0\n',
    '2021-08-18T18:09:41.419Z workers Starting run worker instance #1\n',
    '2021-08-18T18:09:41.419Z workers Starting run worker instance #2\n',
    '2021-08-18T18:09:41.419Z workers Starting run worker instance #3\n',
    '2021-08-18T18:09:41.419Z workers Starting run worker instance #4\n',
    '2021-08-18T18:09:41.420Z workers Starting run worker instance #5\n',
    '2021-08-18T18:09:41.420Z workers Starting run worker instance #6\n',
    '2021-08-18T18:09:41.420Z workers Starting run worker instance #7\n',
    '2021-08-18T18:09:41.420Z workers Starting run worker instance #8\n',
    '2021-08-18T18:09:41.420Z workers Starting run worker instance #9\n',
    '2021-08-18T18:09:41.420Z workers Web server is listening at 51753\n',
    '2021-08-18T18:09:41.420Z project File cache requires some updates, waiting required files from IDE\n',
    '2021-08-18T18:09:41.603Z project Stopping process pool\n',
    '2021-08-18T18:09:41.605Z project Test run started; run priority: 3\n',
    '2021-08-18T18:09:41.606Z project Running all tests\n',
    '2021-08-18T18:09:41.609Z workers Starting test run, priority: 3\n',
    '2021-08-18T18:09:41.609Z nodeRunner Starting sandbox [worker #0, session #t88qw]\n',
    '2021-08-18T18:09:41.610Z nodeRunner Preparing sandbox [worker #0, session #t88qw]\n',
    '2021-08-18T18:09:41.635Z workers Started run worker instance (delayed) #0\n',
    '2021-08-18T18:09:41.635Z nodeRunner Prepared sandbox [worker #0, session #t88qw]\n',
    '2021-08-18T18:09:41.635Z workers [worker #0, session #t88qw] Running tests in sandbox\n',
    '2021-08-18T18:09:41.708Z workers Started run worker instance (delayed) #1\n',
    '2021-08-18T18:09:41.721Z workers Started run worker instance (delayed) #2\n',
    '2021-08-18T18:09:41.730Z workers Started run worker instance (delayed) #4\n',
    '2021-08-18T18:09:41.736Z workers Started run worker instance (delayed) #5\n',
    '2021-08-18T18:09:41.752Z workers Started run worker instance (delayed) #6\n',
    '2021-08-18T18:09:41.753Z workers Started run worker instance (delayed) #3\n',
    '2021-08-18T18:09:41.797Z workers Started run worker instance (delayed) #7\n',
    '2021-08-18T18:09:41.809Z workers Started run worker instance (delayed) #8\n',
    '2021-08-18T18:09:41.837Z workers Started run worker instance (delayed) #9\n',
    '2021-08-18T18:09:43.612Z workers Scheduling Jest Test Run (t88qw): 2021-08-18T18:09:43.593Z\n',
    '2021-08-18T18:09:43.618Z workers Jest Test Error: 2021-08-18T18:09:43.617Z\n',
    '2021-08-18T18:09:43.619Z workers Jest Test Run Complete (t88qw): 2021-08-18T18:09:43.617Z\n',
    '2021-08-18T18:09:43.620Z workers [t88qw] Run 0 test(s), skipped 0 test(s)\n',
    '2021-08-18T18:09:43.621Z workers [t88qw] Sandbox is responsive, closing it\n',
    '2021-08-18T18:09:43.622Z project Test run finished\n',
    '2021-08-18T18:09:43.622Z project Processed console.log entries\n',
    '2021-08-18T18:09:43.622Z project Processed loading sequences\n',
    '2021-08-18T18:09:43.622Z project Processed executed tests\n',
    '2021-08-18T18:09:43.623Z project Processed code coverage\n',
    '2021-08-18T18:09:43.627Z project Test run result processed and sent to IDE\n',
    '2021-08-18T18:11:50.860Z project Requested to run some tests\n',
    '2021-08-18T18:11:50.862Z project Test run started; run priority: 1\n',
    '2021-08-18T18:11:50.862Z testTask Test files from affected: 0, from deleted or manually requested: 1, from recently changed: 0, from loaded by: 0, from failing: 0\n',
    '2021-08-18T18:11:50.863Z workers Starting test run, priority: 1\n',
    '2021-08-18T18:11:50.863Z nodeRunner Starting sandbox [worker #0, session #yk8vy]\n',
    '2021-08-18T18:11:50.864Z nodeRunner Preparing sandbox [worker #0, session #yk8vy]\n',
    '2021-08-18T18:11:50.864Z nodeRunner Prepared sandbox [worker #0, session #yk8vy]\n',
    '2021-08-18T18:11:50.864Z workers [worker #0, session #yk8vy] Running tests in sandbox\n',
    '2021-08-18T18:11:50.869Z workers Scheduling Jest Test Run (yk8vy): 2021-08-18T18:11:50.866Z\n',
    '2021-08-18T18:11:50.869Z workers Jest Test Error: 2021-08-18T18:11:50.868Z\n',
    '2021-08-18T18:11:50.870Z workers Jest Test Run Complete (yk8vy): 2021-08-18T18:11:50.868Z\n',
    '2021-08-18T18:11:50.870Z workers [yk8vy] Run 0 test(s), skipped 0 test(s)\n',
    '2021-08-18T18:11:50.871Z workers [yk8vy] Sandbox is responsive, closing it\n',
    '2021-08-18T18:11:50.872Z project Test run finished\n',
    '2021-08-18T18:11:50.872Z project Processed console.log entries\n',
    '2021-08-18T18:11:50.872Z project Processed loading sequences\n',
    '2021-08-18T18:11:50.872Z project Processed executed tests\n',
    '2021-08-18T18:11:50.872Z project Processed code coverage\n',
    '2021-08-18T18:11:50.873Z project Test run result processed and sent to IDE\n',
    '2021-08-18T18:19:14.571Z fs No metadata for added file found: .git/FETCH_HEAD\n',
    '2021-08-18T18:22:28.697Z fs File changed: .git/FETCH_HEAD\n',
    '2021-08-18T18:22:28.697Z fs No metadata for changed file found: .git/FETCH_HEAD\n',
    '2021-08-18T18:25:53.625Z fs File changed: .git/FETCH_HEAD\n',
    '2021-08-18T18:25:53.625Z fs No metadata for changed file found: .git/FETCH_HEAD\n',
    '2021-08-18T18:29:48.746Z fs File changed: .git/FETCH_HEAD\n',
    '2021-08-18T18:29:48.746Z fs No metadata for changed file found: .git/FETCH_HEAD\n'
  ]
}
smcenlly commented 3 years ago

Unfortunately we can't get the example running. Does it require special setup? e.g. yarn berry?

Would you be able to create a working sample repo for us with instructions to configure it?

We've spent a bit of time playing around and were able to get the react-app-ts example working but ran into a few problems. We needed to add --experimental-vm-modules to our Wallaby.js configuration (see below) but I don't think this has anything to do with your problem.

wallaby.js configuration

module.exports = () => ({
  autoDetect: true,
  env: {
    type: 'node',
    params: {
      runner: '--experimental-vm-modules'
    }
  }
});

We also ran into some problems with source mapping not working properly and when trying to diagnose vite-jest --collectCoverage causes jest to crash (outside of Wallaby) so not quite sure what's going on there or if this is expected (or just not supported).

smcenlly commented 3 years ago

@egriff38 - are you able to provide us with a working sample so we can see your problem?

If we don't hear back in the next day or so, we'll close out the issue for now.

egriff38 commented 3 years ago

https://github.com/egriff38/vite-storybook-template Here is a sample for my repo. Sorry for the delay.

smcenlly commented 3 years ago

I added the wallaby.js configuration file suggested above and Wallaby runs your project but it's doing some strange things (not behaving correctly). I also see some weird behavior in your tests outside of Wallaby. If I change your test to:

import { mount } from "@vue/test-utils";
import UploadSpreadsheet from "./uploadSpreadsheet.vue";

test("hello world", async () => {
  const wrapper = mount(UploadSpreadsheet);
+ console.log(wrapper.html());
  expect(wrapper.html()).toMatchSnapshot();
});

The test/snapshot fails. This doesn't look right. Additionally, it looks like adding the console.log actually forces wrapper.html() to produce the correct value (previous value looks wrong unless I'm missing something).

Before we start troubleshooting Wallaby, I want to make sure that we correctly identify the behavior when not running Wallaby (and fix that if required).

smcenlly commented 3 years ago

@egriff38 - were you able to take a look at the strange behavior when using vite-jest from the CLI?

egriff38 commented 3 years ago

I’ll be reviewing it today On Sep 1, 2021, 5:49 PM -0400, Simon McEnlly @.***>, wrote:

@egriff38 - were you able to take a look at the strange behavior when using vite-jest from the CLI? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

smcenlly commented 3 years ago

Closing this issue as we haven't heard back. Will re-open if/when we receive a reply.