Can't get wallaby to work for Stencil

jagreehal commented 6 years ago

Issue description or question

See repo https://github.com/jagreehal/stencil-wallabyjs-example.

So running

npm test

works fine, but I can't get wallaby to work for Stencil (https://stenciljs.com).

When setting the module to be 'commonjs' I get the following error:

TypeError: core_1.Component is not a function
  at src/components/my-app/my-app.tsx:3
  at Object.<anonymous> src/components/my-app/my-app.tsx:7
  at Object.<anonymous> src/components/my-app/my-app.spec.tsx:2

When using default tsconfig, I get the error:

./src/components/my-app/my-app.spec.js:32
import { render } from '@stencil/core/testing';
^^^^^^

SyntaxError: Unexpected token import
    at ScriptTransformer._transformAndBuildScript

Wallaby.js configuration file

var compilerOptions = require('./tsconfig.json');
compilerOptions.module = 'CommonJs';
compilerOptions.target = 'ES5';
module.exports = function(wallaby) {
  return {
    debug: true,
    files: ['src/components/my-app/my-app.tsx', 'package.json'],

    tests: ['src/components/my-app/my-app.spec.tsx'],

    env: { type: 'node' },
    compilers: {
      '**/*.ts?(x)': wallaby.compilers.typeScript(compilerOptions)
    },

    setup: wallaby => {
      wallaby.testFramework.configure(require('./package.json').jest);
    },

    testFramework: 'jest'
  };
};

Code editor or IDE name and version

Visual Studio Code v1.19.2

OS name and version

OSX - Sierra

ArtemGovorov commented 6 years ago

Unfortunately Stencil doesn't support source maps, so code coverage tools based like Wallaby or Istanbul can't work with it.

And even though test runs with no coverage are possible with Jest, the lack of source maps also breaks all error reports. For example, if you add a new line boom at the end of your my-app.tsx file and run npm test, you'll see that the reported error stack lines are not correct.

Also, the lack of source maps support may be the first but not the only show stopper, because it looks like Stencil is using some heavily customized TypeScript compilation, so wallaby standard TypeScript compiler (or even a standard TypeScript compilation without wallaby), will not work, because looks Stencil compiler is collecting some metadata before the compilation and doing a few other things. So writing a custom wallaby Stencil compiler may be required.

simplyspoke commented 6 years ago

If we are looking at rapid unit test development, have we considered mocking stencil itself?

jest.mock('@stencil/core', () => {
  return {
    Component: jest.fn(),
    Element: jest.fn(),
    State: jest.fn(),
  }
});

Might not work for every situation, but it does help get out the gate.

MrGrigri commented 3 years ago

As of Stencil 2.9, they will now be supporting sourcemaps. https://github.com/ionic-team/stencil/issues/219 https://stenciljs.com/docs/config#sourcemap

MrGrigri commented 3 years ago

I suggest we reopen this issue and find a way to allow for StencilJs development with Wallaby

smcenlly commented 3 years ago

The stencil docs say that Stencil performs unit testing using jest, which means that Wallaby should work for you if jest works from the command line.

It looks like stencil has a custom setup for running tests instead of configuring jest to work via the CLI, which means that you will first need to configure jest to run from the CLI.

We used the stencil starter project (which includes some tests) and added jest.config.js to the root directory:

jest.config.js

module.exports = {
  preset: '@stencil/core/testing',
};

After doing that, jest ran from the CLI, and Wallaby also ran the tests successfully (without any configuration).

We're not all that familiar with stencil. If there are other things that the stencil CLI does before starting jest, you may need to update the jest configuration to do the same so that jest runs from the CLI. Alternatively, you could run Wallaby/Jest with a Wallaby configuration file and perform some other setup/hosting/etc. tasks there.

If you run into trouble and need help, please raise a new issue.

MrGrigri commented 3 years ago

This might be due to the fact that I'm using tsx and not jsx. But I cannot get it to run with Wallaby. But All of my tests work with the CLI.

./src/components/salt-icon/test/salt-icon.spec.tsx: 'Const declarations' require an initialization value. (11:14) 
   9 | describe('salt-icon', () => { 
  10 |   fit('Should render a proper SVG with the appropriate attributes and no opaque path', async () => { 
> 11 |     const icon: IconName = 'twitter';
     |               ^

alexandertrefz commented 3 years ago

This might be due to the fact that I'm using tsx and not jsx. But I cannot get it to run with Wallaby. But All of my tests work with the CLI.

I am using the .tsx files and it worked fine for me after adding the config file. I have kept my dependencies as up2date as possible:

"devDependencies": {
    "@babel/core": "7.15.8",
    "@stencil/core": "2.9.0",
    "@stencil/react-output-target": "0.1.0",
    "@stencil/sass": "1.5.2",
    "@types/jest": "26.0.24",
    "@types/prettier": "2.4.1",
    "@types/puppeteer": "5.4.4",
    "babel-loader": "8.2.2",
    "copy-webpack-plugin": "9.0.1",
    "jest": "26.6.3",
    "jest-cli": "26.6.3",
    "mutation-observer": "1.0.3",
    "prettier": "2.4.1",
    "puppeteer": "10.4.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-is": "16.13.1",
    "typescript": "4.4.3",
    "webpack": "5.58.1",
    "workbox-build": "6.3.0",
    "write-file-webpack-plugin": "4.5.1"
  }

Not all of these may be applicable to you.

smcenlly commented 3 years ago

@MrGrigri:

This might be due to the fact that I'm using tsx and not jsx. But I cannot get it to run with Wallaby. But All of my tests work with the CLI.

You will need to make sure that npx jest runs from the CLI. If you use stencil CLI to run your tests then there is no guarantee that Wallaby will work.

visma-zanas-stundys commented 2 years ago

jest.config.js

module.exports = {
  preset: '@stencil/core/testing',
};

Thank you for this, gotten me closer to final configuration. For others who got the error:

jasmine is not defined

You'll need to update your jest.config.js file to this:

module.exports = {
  preset: '@stencil/core/testing',
  globals: {
    jasmine: { getEnv: () => null }
  }
}

Which is a bit weird (since StencilJS uses Jest under-the-hood), but nonetheless makes WallabyJS compatible.

smcenlly commented 2 years ago

@visma-zanas-stundys - I believe that your problem may be related to using an older version of Wallaby with a newer version of Jest. There were some breaking changes in Jest v28, and I believe it could break with jasmine is not defined without our Wallaby fix.

Would you be able to provide your Wallaby Diagnostics report for us to confirm?

If your license has expired, you can try the latest version by requesting a trial license.

visma-zanas-stundys commented 2 years ago

Sure ;)

With "getEnv: () => null"

``` { editorVersion: '1.70.1', pluginVersion: '1.0.346', editorType: 'VSCode', osVersion: 'linux 5.15.0-43-generic', nodeVersion: 'v16.13.1', coreVersion: '1.0.1315', checksum: 'MDJmZDk4OWM5NjVkZWNjYWNkNzEzY2VjMTNjZjI2ZDAsMTY5MTE5MzYwMDAwMCww', config: { diagnostics: { angular: { workspace: { version: 1, projects: { components: { '$schema': '../../node_modules/nx/schemas/project-schema.json', root: 'libs/components', sourceRoot: 'libs/components/src', projectType: 'library', schematics: { '@nxext/stencil:component': { style: 'scss' } }, tags: [], architect: { test: { builder: '@nxext/stencil:test', outputs: [ '{options.outputPath}' ], options: { projectType: 'library', tsConfig: 'libs/components/tsconfig.lib.json', configPath: 'libs/components/stencil.config.ts', outputPath: 'dist/libs/components' }, configurations: { ci: { coverage: true } } }, build: { builder: '@nxext/stencil:build', outputs: [ '{options.outputPath}' ], options: { projectType: 'library', tsConfig: 'libs/components/tsconfig.lib.json', configPath: 'libs/components/stencil.config.ts', outputPath: 'dist/libs/components' }, configurations: { ci: { dev: false, prod: true } }, defaultConfiguration: 'ci' }, serve: { builder: '@nxext/stencil:build', outputs: [ '{options.outputPath}' ], options: { projectType: 'library', tsConfig: 'libs/components/tsconfig.lib.json', configPath: 'libs/components/stencil.config.ts', outputPath: 'dist/libs/components', serve: false, watch: true } }, e2e: { builder: '@nxext/stencil:e2e', outputs: [ '{options.outputPath}' ], options: { projectType: 'library', tsConfig: 'libs/components/tsconfig.lib.json', configPath: 'libs/components/stencil.config.ts', outputPath: 'dist/libs/components' }, configurations: { ci: {} } }, lint: { builder: '@nrwl/linter:eslint', outputs: [ '{options.outputFile}' ], options: { lintFilePatterns: [ 'libs/components/**/*.{ts,tsx}' ] } } } }, 'components-angular': { '$schema': '../../node_modules/nx/schemas/project-schema.json', projectType: 'library', root: 'libs/components-angular', sourceRoot: 'libs/components-angular/src', prefix: 'fresh-design-system', implicitDependencies: [ 'components' ], architect: { test: { builder: '@nrwl/jest:jest', outputs: [ 'coverage/apps/sandbox' ], dependsOn: [ { target: 'build', projects: 'self' } ], options: { jestConfig: 'libs/components-angular/jest.config.ts', passWithNoTests: true } }, build: { builder: '@nrwl/angular:package', outputs: [ 'dist/libs/components-angular' ], options: { project: 'libs/components-angular/ng-package.json' }, configurations: { ci: { tsConfig: 'libs/components-angular/tsconfig.lib.prod.json' }, production: { tsConfig: 'libs/components-angular/tsconfig.lib.prod.json' }, development: { tsConfig: 'libs/components-angular/tsconfig.lib.json' } }, defaultConfiguration: 'production' }, lint: { builder: '@nrwl/linter:eslint', options: { lintFilePatterns: [ 'libs/components-angular/src/**/*.ts', 'libs/components-angular/src/**/*.html' ] } } }, tags: [] }, 'components-react': { '$schema': '../../node_modules/nx/schemas/project-schema.json', root: 'libs/components-react', sourceRoot: 'libs/components-react/src', projectType: 'library', tags: [], implicitDependencies: [ 'components' ], architect: { build: { builder: '@nrwl/web:rollup', outputs: [ '{options.outputPath}' ], options: { outputPath: 'dist/libs/components-react', tsConfig: 'libs/components-react/tsconfig.lib.json', project: 'libs/components-react/package.json', entryFile: 'libs/components-react/src/index.ts', external: [ 'react/jsx-runtime' ], rollupConfig: '@nrwl/react/plugins/bundle-rollup', assets: [ { glob: 'libs/components-react/README.md', input: '.', output: '.' } ] }, configurations: { ci: {} } }, lint: { builder: '@nrwl/linter:eslint', outputs: [ '{options.outputFile}' ], options: { lintFilePatterns: [ 'libs/components-react/**/*.{ts,tsx,js,jsx}' ] } } } }, 'components-vue': { '$schema': '../../node_modules/nx/schemas/project-schema.json', root: 'libs/components-vue', sourceRoot: 'libs/components-vue/src', projectType: 'library', tags: [], implicitDependencies: [ 'components' ], architect: { build: { builder: 'nx:run-script', options: { script: 'build' } } } }, storybook: { '$schema': '../../node_modules/nx/schemas/project-schema.json', root: 'libs/storybook', projectType: 'library', implicitDependencies: [ 'components', 'theme' ], architect: { serve: { builder: '@nrwl/storybook:storybook', dependsOn: [ { target: 'build', projects: 'dependencies' } ], options: { uiFramework: '@storybook/react', host: '127.0.0.1', port: 6006, config: { configFolder: 'libs/storybook' } }, configurations: { ci: { quiet: true } } }, build: { builder: '@nrwl/storybook:build', outputs: [ '{options.outputPath}' ], options: { uiFramework: '@storybook/react', outputPath: 'public', config: { configFolder: 'libs/storybook' } }, configurations: { ci: { quiet: true } } }, test: { builder: 'nx:run-script', options: { script: 'backstop:test' }, configurations: { ci: { script: 'backstop:test:ci' } } }, approve: { builder: 'nx:run-script', options: { script: 'backstop:approve' } }, reference: { builder: 'nx:run-script', options: { script: 'backstop:reference' } } }, tags: [] }, theme: { '$schema': '../../node_modules/nx/schemas/project-schema.json', root: 'libs/theme', sourceRoot: 'libs/theme/src', projectType: 'library', architect: { build: { builder: 'nx:run-script', options: { script: 'theme:build' }, configurations: { ci: {} } }, lint: { builder: 'nx:run-script', options: { script: 'lint' } } }, tags: [] } }, '$schema': './node_modules/nx/schemas/workspace-schema.json', configFileName: '/sandbox/fresh-design-system/workspace.json', nxWorkspace: true } }, jest: { config: { configs: [ { automock: false, cache: true, cacheDirectory: '/tmp/jest_rs', clearMocks: false, coveragePathIgnorePatterns: [ '/node_modules/' ], cwd: '/sandbox/fresh-design-system/libs/components', dependencyExtractor: undefined, detectLeaks: false, detectOpenHandles: false, displayName: undefined, errorOnDeprecated: false, extensionsToTreatAsEsm: [], extraGlobals: [], filter: undefined, forceCoverageMatch: [], globalSetup: undefined, globalTeardown: undefined, globals: { jasmine: { getEnv: [Function: getEnv] } }, haste: { computeSha1: false, enableSymlinks: false, forceNodeFilesystemAPI: false, throwOnModuleCollision: false }, injectGlobals: true, moduleDirectories: [ 'node_modules' ], moduleFileExtensions: [ 'ts', 'tsx', 'js', 'mjs', 'jsx', 'json', 'd.ts' ], moduleLoader: undefined, moduleNameMapper: [ [ 'imask/esm/*', 'imask' ], [ '^@stencil/core/cli$', '/sandbox/fresh-design-system/node_modules/@stencil/core/cli/index.js' ], [ '^@stencil/core/compiler$', '/sandbox/fresh-design-system/node_modules/@stencil/core/compiler/stencil.js' ], [ '^@stencil/core/internal$', '/sandbox/fresh-design-system/node_modules/@stencil/core/internal/testing/index.js' ], [ '^@stencil/core/internal/app-data$', '/sandbox/fresh-design-system/node_modules/@stencil/core/internal/app-data/index.cjs' ], [ '^@stencil/core/internal/app-globals$', '/sandbox/fresh-design-system/node_modules/@stencil/core/internal/app-globals/index.js' ], [ '^@stencil/core/internal/testing$', '/sandbox/fresh-design-system/node_modules/@stencil/core/internal/testing/index.js' ], [ '^@stencil/core/mock-doc$', '/sandbox/fresh-design-system/node_modules/@stencil/core/mock-doc/index.cjs' ], [ '^@stencil/core/sys$', '/sandbox/fresh-design-system/node_modules/@stencil/core/sys/node/index.js' ], [ '^@stencil/core/testing$', '/sandbox/fresh-design-system/node_modules/@stencil/core/testing/index.js' ], [ '^@stencil/core$', '/sandbox/fresh-design-system/node_modules/@stencil/core/internal/testing/index.js' ] ], modulePathIgnorePatterns: [], modulePaths: undefined, name: 'b639b2994ef6fa63f32507e598ba0729', prettierPath: 'prettier', resetMocks: false, resetModules: false, resolver: undefined, restoreMocks: false, rootDir: '/sandbox/fresh-design-system/libs/components', roots: [ '/sandbox/fresh-design-system/libs/components' ], runner: '/sandbox/fresh-design-system/node_modules/jest-runner/build/index.js', setupFiles: [], setupFilesAfterEnv: [ '/sandbox/fresh-design-system/node_modules/@stencil/core/testing/jest-setuptestframework.js', '/sandbox/fresh-design-system/libs/components/jest-setup.js' ], skipFilter: false, skipNodeResolution: undefined, slowTestThreshold: 5, snapshotFormat: undefined, snapshotResolver: undefined, snapshotSerializers: [], testEnvironment: '/sandbox/fresh-design-system/node_modules/@stencil/core/testing/jest-environment.js', testEnvironmentOptions: {}, testLocationInResults: false, testMatch: [], testPathIgnorePatterns: [ '/.cache', '/.stencil', '/.vscode', '/dist', '/node_modules', '/www' ], testRegex: [ '(/__tests__/.*|\\.?(test|spec))\\.(ts|tsx|js|mjs|jsx)$' ], testRunner: '/sandbox/fresh-design-system/node_modules/jest-circus/runner.js', testURL: 'http://localhost', timers: 'real', transform: [ [ '^.+\\.svg$', '/sandbox/fresh-design-system/libs/components/__mocks__/svgTransform.js', {} ], [ '^.+\\.(ts|tsx|jsx|css)$', '/sandbox/fresh-design-system/node_modules/@stencil/core/testing/jest-preprocessor.js', {} ] ], transformIgnorePatterns: [ '/node_modules/', '\\.pnp\\.[^\\/]+$' ], unmockedModulePathPatterns: undefined, watchPathIgnorePatterns: [ '^.+\\.d\\.ts$' ] } ], globalConfig: { bail: 0, changedFilesWithAncestor: false, changedSince: undefined, collectCoverage: false, collectCoverageFrom: [], collectCoverageOnlyFrom: undefined, coverageDirectory: '/sandbox/fresh-design-system/libs/components/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: undefined, rootDir: '/sandbox/fresh-design-system/libs/components', runTestsByPath: false, silent: undefined, skipFilter: false, snapshotFormat: undefined, testFailureExitCode: 1, testNamePattern: undefined, testPathPattern: '', testResultsProcessor: undefined, testSequencer: '/sandbox/fresh-design-system/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/|/\\..+/', '/tmp/jest_rs', '^.+\\.d\\.ts$', '/.cache', '/.stencil', '/.vscode', '/dist', '/node_modules', '/www', '\\./coverage' ], testPathIgnorePatterns: [ '/node_modules/', '\\./dist/|\\./build/|\\./coverage/|\\./git/|/\\..+/', '/tmp/jest_rs', '^.+\\.d\\.ts$', '/.cache', '/.stencil', '/.vscode', '/dist', '/node_modules', '/www', '\\./coverage' ], testMatch: [], testRegex: [ '(/__tests__/.*|\\.?(test|spec))\\.(ts|tsx|js|mjs|jsx)$' ] } } } }, testFramework: { version: 'jest@24.8.0', configurator: 'jest@24.8.0', reporter: 'jest@24.8.0', starter: 'jest@24.8.0', autoDetected: true }, filesWithCoverageCalculated: [], filesWithNoCoverageCalculated: [], globalSetup: false, dot: true, files: [ { pattern: '/node_modules/', regexp: /\/node_modules\//, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '\\./dist/|\\./build/|\\./coverage/|\\./git/|/\\..+/', regexp: /\.\/dist\/|\.\/build\/|\.\/coverage\/|\.\/git\/|\/\..+\//, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '/tmp/jest_rs', regexp: /\/tmp\/jest_rs/, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '^.+\\.d\\.ts$', regexp: /^.+\.d\.ts$/, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '/.cache', regexp: /\/.cache/, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '/.stencil', regexp: /\/.stencil/, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '/.vscode', regexp: /\/.vscode/, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '/dist', regexp: /\/dist/, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '/node_modules', regexp: /\/node_modules/, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '/www', regexp: /\/www/, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '\\./coverage', regexp: /\.\/coverage/, ignore: true, trigger: true, load: true, file: true, test: true }, { pattern: '**/**', ignore: false, trigger: true, load: true, order: 1 }, { pattern: '(/__tests__/.*|\\.?(test|spec))\\.(ts|tsx|js|mjs|jsx)$', regexp: /(\/__tests__\/.*|\.?(test|spec))\.(ts|tsx|js|mjs|jsx)$/, ignore: true, trigger: true, load: true, file: true } ], tests: [ { pattern: '/node_modules/', regexp: /\/node_modules\//, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '\\./dist/|\\./build/|\\./coverage/|\\./git/|/\\..+/', regexp: /\.\/dist\/|\.\/build\/|\.\/coverage\/|\.\/git\/|\/\..+\//, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '/tmp/jest_rs', regexp: /\/tmp\/jest_rs/, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '^.+\\.d\\.ts$', regexp: /^.+\.d\.ts$/, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '/.cache', regexp: /\/.cache/, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '/.stencil', regexp: /\/.stencil/, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '/.vscode', regexp: /\/.vscode/, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '/dist', regexp: /\/dist/, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '/node_modules', regexp: /\/node_modules/, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '/www', regexp: /\/www/, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '\\./coverage', regexp: /\.\/coverage/, ignore: true, trigger: true, load: true, test: true, file: false }, { pattern: '(/__tests__/.*|\\.?(test|spec))\\.(ts|tsx|js|mjs|jsx)$', regexp: /(\/__tests__\/.*|\.?(test|spec))\.(ts|tsx|js|mjs|jsx)$/, ignore: false, trigger: true, load: true, test: true, order: 2 } ], runAllTestsInAffectedTestFile: false, updateNoMoreThanOneSnapshotPerTestFileRun: false, compilers: {}, logLimits: { inline: { depth: 5, elements: 5000 }, values: { default: { stringLength: 200 }, autoExpand: { elements: 5000, stringLength: 8192, depth: 10 } } }, 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: '/.nvm/versions/node/v16.13.1/bin/node', viewportSize: { width: 800, height: 600 }, options: { width: 800, height: 600 }, bundle: true }, reportUnhandledPromises: true, slowTestThreshold: 75, lowCoverageThreshold: 80, loose: true, configCode: 'auto.detect#1770409893' }, packageJSON: { dependencies: undefined, devDependencies: undefined }, fs: { numberOfFiles: 613 }, debug: [ '2022-08-11T06:34:44.582Z config Attempting automatic configuration for angular\n', '2022-08-11T06:34:44.601Z angular/cli config Detected Angular CLI.\n', '2022-08-11T06:34:44.604Z angular/cli config Angular currentDirPath: "/sandbox/fresh-design-system/libs/components", workspaceDirPath: "/sandbox/fresh-design-system"\n', '2022-08-11T06:34:44.604Z angular/cli config Error: The project components is not configured with `@angular-devkit/build-angular:karma`, `@angular-builders/jest:run`, or `@nrwl/jest:jest` builder as its test architect.\n' + ' at Object. (/.vscode/extensions/wallabyjs.wallaby-vscode-1.0.346/wallaby620ee0/server.js:16:11802)\n' + ' at r (/.vscode/extensions/wallabyjs.wallaby-vscode-1.0.346/wallaby620ee0/server.js:16:14398)\n' + ' at Object.next (/.vscode/extensions/wallabyjs.wallaby-vscode-1.0.346/wallaby620ee0/server.js:16:13693)\n' + ' at o (/.vscode/extensions/wallabyjs.wallaby-vscode-1.0.346/wallaby620ee0/server.js:16:13452)\n', '2022-08-11T06:34:44.607Z angular/cli config Angular.json: \n' + ' {\n' + ' version: 1,\n' + ' projects: {\n' + ' components: {\n' + " '$schema': '../../node_modules/nx/schemas/project-schema.json',\n" + " root: 'libs/components',\n" + " sourceRoot: 'libs/components/src',\n" + " projectType: 'library',\n" + " schematics: { '@nxext/stencil:component': { style: 'scss' } },\n" + ' tags: [],\n' + ' architect: {\n' + ' test: {\n' + " builder: '@nxext/stencil:test',\n" + " outputs: [ '{options.outputPath}' ],\n" + " options: { projectType: 'library', tsConfig: 'libs/components/tsconfig.lib.json', configPath: 'libs/components/stencil.config.ts', outputPath: 'dist/libs/components' },\n" + ' configurations: { ci: { coverage: true } }\n' + ' },\n' + ' build: {\n' + " builder: '@nxext/stencil:build',\n" + " outputs: [ '{options.outputPath}' ],\n" + " options: { projectType: 'library', tsConfig: 'libs/components/tsconfig.lib.json', configPath: 'libs/components/stencil.config.ts', outputPath: 'dist/libs/components' },\n" + ' configurations: { ci: { dev: false, prod: true } },\n' + " defaultConfiguration: 'ci'\n" + ' },\n' + ' serve: {\n' + " builder: '@nxext/stencil:build',\n" + " outputs: [ '{options.outputPath}' ],\n" + ' options: {\n' + " projectType: 'library',\n" + " tsConfig: 'libs/components/tsconfig.lib.json',\n" + " configPath: 'libs/components/stencil.config.ts',\n" + " outputPath: 'dist/libs/components',\n" + ' serve: false,\n' + ' watch: true\n' + ' }\n' + ' },\n' + ' e2e: {\n' + " builder: '@nxext/stencil:e2e',\n" + " outputs: [ '{options.outputPath}' ],\n" + " options: { projectType: 'library', tsConfig: 'libs/components/tsconfig.lib.json', configPath: 'libs/components/stencil.config.ts', outputPath: 'dist/libs/components' },\n" + ' configurations: { ci: {} }\n' + ' },\n' + " lint: { builder: '@nrwl/linter:eslint', outputs: [ '{options.outputFile}' ], options: { lintFilePatterns: [ 'libs/components/**/*.{ts,tsx}' ] } }\n" + ' }\n' + ' },\n' + " 'components-angular': {\n" + " '$schema': '../../node_modules/nx/schemas/project-schema.json',\n" + " projectType: 'library',\n" + " root: 'libs/components-angular',\n" + " sourceRoot: 'libs/components-angular/src',\n" + " prefix: 'fresh-design-system',\n" + " implicitDependencies: [ 'components' ],\n" + ' architect: {\n' + ' test: {\n' + " builder: '@nrwl/jest:jest',\n" + " outputs: [ 'coverage/apps/sandbox' ],\n" + " dependsOn: [ { target: 'build', projects: 'self' } ],\n" + " options: { jestConfig: 'libs/components-angular/jest.config.ts', passWithNoTests: true }\n" + ' },\n' + ' build: {\n' + " builder: '@nrwl/angular:package',\n" + " outputs: [ 'dist/libs/components-angular' ],\n" + " options: { project: 'libs/components-angular/ng-package.json' },\n" + ' configurations: {\n' + " ci: { tsConfig: 'libs/components-angular/tsconfig.lib.prod.json' },\n" + " production: { tsConfig: 'libs/components-angular/tsconfig.lib.prod.json' },\n" + " development: { tsConfig: 'libs/components-angular/tsconfig.lib.json' }\n" + ' },\n' + " defaultConfiguration: 'production'\n" + ' },\n' + " lint: { builder: '@nrwl/linter:eslint', options: { lintFilePatterns: [ 'libs/components-angular/src/**/*.ts', 'libs/components-angular/src/**/*.html' ] } }\n" + ' },\n' + ' tags: []\n' + ' },\n' + " 'components-react': {\n" + " '$schema': '../../node_modules/nx/schemas/project-schema.json',\n" + " root: 'libs/components-react',\n" + " sourceRoot: 'libs/components-react/src',\n" + " projectType: 'library',\n" + ' tags: [],\n' + " implicitDependencies: [ 'components' ],\n" + ' architect: {\n' + ' build: {\n' + " builder: '@nrwl/web:rollup',\n" + " outputs: [ '{options.outputPath}' ],\n" + ' options: {\n' + " outputPath: 'dist/libs/components-react',\n" + " tsConfig: 'libs/components-react/tsconfig.lib.json',\n" + " project: 'libs/components-react/package.json',\n" + " entryFile: 'libs/components-react/src/index.ts',\n" + " external: [ 'react/jsx-runtime' ],\n" + " rollupConfig: '@nrwl/react/plugins/bundle-rollup',\n" + " assets: [ { glob: 'libs/components-react/README.md', input: '.', output: '.' } ]\n" + ' },\n' + ' configurations: { ci: {} }\n' + ' },\n' + " lint: { builder: '@nrwl/linter:eslint', outputs: [ '{options.outputFile}' ], options: { lintFilePatterns: [ 'libs/components-react/**/*.{ts,tsx,js,jsx}' ] } }\n" + ' }\n' + ' },\n' + " 'components-vue': {\n" + " '$schema': '../../node_modules/nx/schemas/project-schema.json',\n" + " root: 'libs/components-vue',\n" + " sourceRoot: 'libs/components-vue/src',\n" + " projectType: 'library',\n" + ' tags: [],\n' + " implicitDependencies: [ 'components' ],\n" + " architect: { build: { builder: 'nx:run-script', options: { script: 'build' } } }\n" + ' },\n' + ' storybook: {\n' + " '$schema': '../../node_modules/nx/schemas/project-schema.json',\n" + " root: 'libs/storybook',\n" + " projectType: 'library',\n" + " implicitDependencies: [ 'components', 'theme' ],\n" + ' architect: {\n' + ' serve: {\n' + " builder: '@nrwl/storybook:storybook',\n" + " dependsOn: [ { target: 'build', projects: 'dependencies' } ],\n" + " options: { uiFramework: '@storybook/react', host: '127.0.0.1', port: 6006, config: { configFolder: 'libs/storybook' } },\n" + ' configurations: { ci: { quiet: true } }\n' + ' },\n' + ' build: {\n' + " builder: '@nrwl/storybook:build',\n" + " outputs: [ '{options.outputPath}' ],\n" + " options: { uiFramework: '@storybook/react', outputPath: 'public', config: { configFolder: 'libs/storybook' } },\n" + ' configurations: { ci: { quiet: true } }\n' + ' },\n' + " test: { builder: 'nx:run-script', options: { script: 'backstop:test' }, configurations: { ci: { script: 'backstop:test:ci' } } },\n" + " approve: { builder: 'nx:run-script', options: { script: 'backstop:approve' } },\n" + " reference: { builder: 'nx:run-script', options: { script: 'backstop:reference' } }\n" + ' },\n' + ' tags: []\n' + ' },\n' + ' theme: {\n' + " '$schema': '../../node_modules/nx/schemas/project-schema.json',\n" + " root: 'libs/theme',\n" + " sourceRoot: 'libs/theme/src',\n" + " projectType: 'library',\n" + " architect: { build: { builder: 'nx:run-script', options: { script: 'theme:build' }, configurations: { ci: {} } }, lint: { builder: 'nx:run-script', options: { script: 'lint' } } },\n" + ' tags: []\n' + ' }\n' + ' },\n' + " '$schema': './node_modules/nx/schemas/workspace-schema.json',\n" + " configFileName: '/sandbox/fresh-design-system/workspace.json',\n" + ' nxWorkspace: true\n' + '}\n', '2022-08-11T06:34:44.607Z angular/cli config Error: The project components is not configured with `@angular-devkit/build-angular:karma`, `@angular-builders/jest:run`, or `@nrwl/jest:jest` builder as its test architect.\n' + ' at Object. (/.vscode/extensions/wallabyjs.wallaby-vscode-1.0.346/wallaby620ee0/server.js:16:11802)\n' + ' at r (/.vscode/extensions/wallabyjs.wallaby-vscode-1.0.346/wallaby620ee0/server.js:16:14398)\n' + ' at Object.next (/.vscode/extensions/wallabyjs.wallaby-vscode-1.0.346/wallaby620ee0/server.js:16:13693)\n' + ' at o (/.vscode/extensions/wallabyjs.wallaby-vscode-1.0.346/wallaby620ee0/server.js:16:13452)\n', '2022-08-11T06:34:44.607Z config Finished attempting automatic configuration for angular (25ms)\n', '2022-08-11T06:34:44.607Z config Attempting automatic configuration for jest\n', '2022-08-11T06:34:46.389Z jest/config Detected Jest.\n', '2022-08-11T06:34:46.389Z jest/config Configured Jest.\n', '2022-08-11T06:34:46.389Z config Finished attempting automatic configuration for jest (1782ms)\n', '2022-08-11T06:34:46.391Z project Wallaby Node version: v16.13.1\n', '2022-08-11T06:34:46.391Z project Wallaby config: /sandbox/fresh-design-system/libs/components/auto.detect\n', '2022-08-11T06:34:46.416Z fs File system starting\n', '2022-08-11T06:34:46.617Z fs File system scan completed\n', '2022-08-11T06:34:46.625Z project File cache: /.vscode/extensions/wallabyjs.wallaby-vscode-1.0.346/projects/2410de9b93990c31\n', '2022-08-11T06:34:46.702Z uiService Listening port 51235\n', '2022-08-11T06:34:46.750Z workers Parallelism for initial run: 10, for regular run: 5\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #0\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #1\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #2\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #3\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #4\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #5\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #6\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #7\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #8\n', '2022-08-11T06:34:46.751Z workers Starting run worker instance #9\n', '2022-08-11T06:34:46.753Z workers Web server is listening at 42969\n', '2022-08-11T06:34:46.873Z project File cache requires some updates, waiting required files from IDE\n', '2022-08-11T06:34:46.902Z project Stopping process pool\n', '2022-08-11T06:34:46.903Z project Test run started; run priority: 3\n', '2022-08-11T06:34:46.906Z project Running all tests\n', '2022-08-11T06:34:46.918Z workers Starting test run, priority: 3\n', '2022-08-11T06:34:46.919Z workers Distributing tests between 10 workers\n', '2022-08-11T06:34:46.924Z workers Running tests in parallel\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #0, session #aqf5v]\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #1, session #6y30w]\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #2, session #rkuvm]\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #3, session #1mmdh]\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #4, session #eoj5p]\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #5, session #digk9]\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #6, session #b02gl]\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #7, session #kllwd]\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #8, session #kuodc]\n', '2022-08-11T06:34:46.925Z nodeRunner Starting sandbox [worker #9, session #r1grh]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #0, session #aqf5v]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #1, session #6y30w]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #2, session #rkuvm]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #3, session #1mmdh]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #4, session #eoj5p]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #5, session #digk9]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #6, session #b02gl]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #7, session #kllwd]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #8, session #kuodc]\n', '2022-08-11T06:34:46.926Z nodeRunner Preparing sandbox [worker #9, session #r1grh]\n', '2022-08-11T06:34:46.955Z workers Started run worker instance (delayed) #1\n', '2022-08-11T06:34:46.955Z nodeRunner Prepared sandbox [worker #1, session #6y30w]\n', '2022-08-11T06:34:46.955Z workers [worker #1, session #6y30w] Running tests in sandbox\n', '2022-08-11T06:34:46.991Z workers Started run worker instance (delayed) #2\n', '2022-08-11T06:34:46.991Z nodeRunner Prepared sandbox [worker #2, session #rkuvm]\n', '2022-08-11T06:34:46.992Z workers [worker #2, session #rkuvm] Running tests in sandbox\n', '2022-08-11T06:34:47.000Z workers Started run worker instance (delayed) #0\n', '2022-08-11T06:34:47.000Z nodeRunner Prepared sandbox [worker #0, session #aqf5v]\n', '2022-08-11T06:34:47.000Z workers [worker #0, session #aqf5v] Running tests in sandbox\n', '2022-08-11T06:34:47.017Z workers Started run worker instance (delayed) #4\n', '2022-08-11T06:34:47.018Z nodeRunner Prepared sandbox [worker #4, session #eoj5p]\n', '2022-08-11T06:34:47.018Z workers [worker #4, session #eoj5p] Running tests in sandbox\n', '2022-08-11T06:34:47.031Z workers Started run worker instance (delayed) #3\n', '2022-08-11T06:34:47.032Z nodeRunner Prepared sandbox [worker #3, session #1mmdh]\n', '2022-08-11T06:34:47.032Z workers [worker #3, session #1mmdh] Running tests in sandbox\n', '2022-08-11T06:34:47.038Z workers Started run worker instance (delayed) #6\n', '2022-08-11T06:34:47.038Z nodeRunner Prepared sandbox [worker #6, session #b02gl]\n', '2022-08-11T06:34:47.038Z workers [worker #6, session #b02gl] Running tests in sandbox\n', '2022-08-11T06:34:47.055Z workers Started run worker instance (delayed) #5\n', '2022-08-11T06:34:47.055Z nodeRunner Prepared sandbox [worker #5, session #digk9]\n', '2022-08-11T06:34:47.055Z workers [worker #5, session #digk9] Running tests in sandbox\n', '2022-08-11T06:34:47.067Z workers Started run worker instance (delayed) #8\n', '2022-08-11T06:34:47.067Z nodeRunner Prepared sandbox [worker #8, session #kuodc]\n', '2022-08-11T06:34:47.067Z workers [worker #8, session #kuodc] Running tests in sandbox\n', '2022-08-11T06:34:47.074Z workers Started run worker instance (delayed) #7\n', '2022-08-11T06:34:47.074Z nodeRunner Prepared sandbox [worker #7, session #kllwd]\n', '2022-08-11T06:34:47.074Z workers [worker #7, session #kllwd] Running tests in sandbox\n', '2022-08-11T06:34:47.107Z workers Started run worker instance (delayed) #9\n', '2022-08-11T06:34:47.107Z nodeRunner Prepared sandbox [worker #9, session #r1grh]\n', '2022-08-11T06:34:47.108Z workers [worker #9, session #r1grh] Running tests in sandbox\n', '2022-08-11T06:34:58.170Z workers Scheduling Jest Test Run (rkuvm): 2022-08-11T06:34:54.068Z\n', '2022-08-11T06:34:58.325Z workers Scheduling Jest Test Run (kllwd): 2022-08-11T06:34:54.092Z\n', '2022-08-11T06:34:59.137Z workers Scheduling Jest Test Run (b02gl): 2022-08-11T06:34:53.885Z\n', '2022-08-11T06:34:59.591Z workers Scheduling Jest Test Run (aqf5v): 2022-08-11T06:34:54.006Z\n', '2022-08-11T06:34:59.732Z workers Scheduling Jest Test Run (r1grh): 2022-08-11T06:34:54.198Z\n', '2022-08-11T06:34:59.736Z workers Scheduling Jest Test Run (6y30w): 2022-08-11T06:34:54.262Z\n', '2022-08-11T06:35:00.695Z workers Scheduling Jest Test Run (1mmdh): 2022-08-11T06:34:54.049Z\n', '2022-08-11T06:35:01.310Z workers Scheduling Jest Test Run (kuodc): 2022-08-11T06:34:54.001Z\n', '2022-08-11T06:35:01.753Z workers Scheduling Jest Test Run (eoj5p): 2022-08-11T06:34:53.982Z\n', '2022-08-11T06:35:01.814Z workers Scheduling Jest Test Run (digk9): 2022-08-11T06:34:54.301Z\n', '2022-08-11T06:35:06.377Z workers [rkuvm] Loaded unknown number of test(s)\n', '2022-08-11T06:35:06.378Z workers [rkuvm] Test executed: renders with default values\n', '2022-08-11T06:35:06.378Z workers [rkuvm] Test executed: renders "info" variant with "$expected" class and "info" icon\n', '2022-08-11T06:35:06.380Z workers [rkuvm] Test executed: renders "warning" variant with "$expected" class and "alert-circle" icon\n', '2022-08-11T06:35:06.381Z workers [rkuvm] Test executed: renders "danger" variant with "$expected" class and "error" icon\n', '2022-08-11T06:35:06.382Z workers [rkuvm] Test executed: renders "success" variant with "$expected" class and "approved-action" icon\n', '2022-08-11T06:35:06.382Z workers [rkuvm] Test executed: renders without icon, when hide-icon=true is set\n', '2022-08-11T06:35:06.414Z workers [rkuvm] Loaded unknown number of test(s)\n', '2022-08-11T06:35:06.415Z workers [rkuvm] Test executed: renders\n', '2022-08-11T06:35:06.498Z workers [rkuvm] Loaded unknown number of test(s)\n', '2022-08-11T06:35:06.499Z workers [rkuvm] Test executed: renders\n', '2022-08-11T06:35:06.500Z workers [rkuvm] Test executed: emits a yearchange event on year selection\n', '2022-08-11T06:35:06.501Z workers [rkuvm] Test executed: emits a monthchange event with previous month on back button click\n', '2022-08-11T06:35:06.501Z workers [rkuvm] Test executed: emits a monthchange event with previous month on next button click\n', '2022-08-11T06:35:06.514Z workers [rkuvm] Loaded unknown number of test(s)\n', '2022-08-11T06:35:06.521Z workers [rkuvm] Test executed: should return 1 weeks (2021-12-27 to 2022-01-02) for range {"from": "2022-01-01", "to": "2022-01-01"}\n', '2022-08-11T06:35:06.522Z workers [rkuvm] Test executed: should return 1 weeks (2022-01-03 to 2022-01-09) for range {"from": "2022-01-03", "to": "2022-01-05"}\n', '2022-08-11T06:35:06.531Z workers [rkuvm] Test executed: should return 2 weeks (2022-01-03 to 2022-01-16) for range {"from": "2022-01-03", "to": "2022-01-15"}\n', '2022-08-11T06:35:06.532Z workers [rkuvm] Test executed: should return 6 weeks (2021-12-27 to 2022-02-06) for range {"from": "2022-01-01", "to": "2022-01-31"}\n', '2022-08-11T06:35:06.532Z workers [rkuvm] Test executed: should return 10 weeks (2021-12-27 to 2022-03-06) for range {"from": "2022-01-01", "to": "2022-02-28"}\n', '2022-08-11T06:35:06.543Z workers [rkuvm] Test executed: should return array of days in a given month\n', '2022-08-11T06:35:06.544Z workers [rkuvm] Test executed: should return 31x12 grid of days in a given year\n', '2022-08-11T06:35:06.553Z workers [rkuvm] Test executed: should return a 6-week calendar\n', '2022-08-11T06:35:06.553Z workers [rkuvm] Test executed: should return [2021-07-26 ... 2021-09-05] for month starting on Sunday (2021-08-01)\n', '2022-08-11T06:35:06.554Z workers [rkuvm] Test executed: should return [2021-04-26 ... 2021-06-06] for month starting on Saturday (2021-05-01)\n', '2022-08-11T06:35:06.554Z workers [rkuvm] Test executed: should return [2021-09-27 ... 2021-11-07] for month starting on Friday (2021-10-01)\n', '2022-08-11T06:35:06.554Z workers [rkuvm] Test executed: should return [2021-06-28 ... 2021-08-08] for month starting on Thursday (2021-07-01)\n', '2022-08-11T06:35:06.556Z workers [rkuvm] Test executed: should return [2021-11-29 ... 2022-01-09] for month starting on Wednesday (2021-12-01)\n', '2022-08-11T06:35:06.556Z workers [rkuvm] Test executed: should return [2021-05-31 ... 2021-07-11] for month starting on Tuesday (2021-06-01)\n', '2022-08-11T06:35:06.557Z workers [rkuvm] Test executed: should return [2021-10-25 ... 2021-12-05] for month starting on Monday (2021-11-01)\n', '2022-08-11T06:35:06.561Z workers [rkuvm] Test executed: should return a 3x4 grid of months for a given year\n', '2022-08-11T06:35:06.562Z workers [rkuvm] Test executed: should return a 3x4 grid of years for a given decade\n', '2022-08-11T06:35:06.562Z workers [rkuvm] Test executed: should return 1990 for year 1996\n', '2022-08-11T06:35:06.562Z workers [rkuvm] Test executed: should return 2010 for year 2011\n', '2022-08-11T06:35:06.562Z workers [rkuvm] Test executed: should return 2010 for year 2015\n', '2022-08-11T06:35:06.563Z workers [rkuvm] Test executed: should return 2010 for year 2019\n', '2022-08-11T06:35:06.563Z workers [rkuvm] Test executed: should return 2020 for year 2020\n', '2022-08-11T06:35:06.563Z workers [rkuvm] Test executed: should return 2020 for year 2024\n', '2022-08-11T06:35:06.568Z workers [rkuvm] Loaded unknown number of test(s)\n', '2022-08-11T06:35:06.570Z workers [rkuvm] Test executed: renders\n', '2022-08-11T06:35:06.576Z workers [rkuvm] Test executed: renders an tag if href is provided\n', '2022-08-11T06:35:06.577Z workers [rkuvm] Test executed: renders a

Without jasmine mock

jagreehal commented 2 years ago

I have wallaby working in my repo https://github.com/jagreehal/stencil-how-to-test-components

wallabyjs / public