All Projects → vuejs → Vue Jest

vuejs / Vue Jest

Licence: mit
Jest Vue transformer

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Vue Jest

Gatsby Starter
Gatsby 2.0 starter with typescript and many cools dev tools
Stars: ✭ 385 (-28.04%)
Mutual labels:  jest
Opensource
Delivering delightful digital solutions. Open Source packages with combined ~85M/month downloads, semantically versioned following @conventional-commits. Fully powered by Jest, @Babel TypeScript, @Airbnb @ESLint + @Prettier, @YarnPKG + @Lerna independent versioning, GH @Actions & automated dep updates with @RenovateBot.
Stars: ✭ 459 (-14.21%)
Mutual labels:  jest
React Typescript Web Extension Starter
🖥 A Web Extension starter kit built with React, TypeScript, SCSS, Storybook, Jest, EsLint, Prettier, Webpack and Bootstrap. Supports Google Chrome + Mozilla Firefox + Brave Browser 🔥
Stars: ✭ 510 (-4.67%)
Mutual labels:  jest
Jest Cheat Sheet
Jest cheat sheet
Stars: ✭ 4,309 (+705.42%)
Mutual labels:  jest
Entria Fullstack
Monorepo Playground with GraphQL, React, React Native, Relay Modern, TypeScript and Jest
Stars: ✭ 434 (-18.88%)
Mutual labels:  jest
Laravel Vue Boilerplate
🐘 A Laravel 6 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.
Stars: ✭ 472 (-11.78%)
Mutual labels:  jest
Js Stack From Scratch
🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
Stars: ✭ 18,814 (+3416.64%)
Mutual labels:  jest
React Screenshot Test
A dead simple library to screenshot test React components
Stars: ✭ 519 (-2.99%)
Mutual labels:  jest
Gatsby Starter Ecommerce
Gatsby starter for creating an eCommerce site using the Moltin eCommerce Api
Stars: ✭ 448 (-16.26%)
Mutual labels:  jest
Snowflake
❄️ A React-Native Android iOS Starter App/ BoilerPlate / Example with Redux, RN Router, & Jest with the Snowflake Hapi Server running locally or on RedHat OpenShift for the backend, or a Parse Server running locally or remotely on Heroku
Stars: ✭ 4,576 (+755.33%)
Mutual labels:  jest
Graphql Dataloader Boilerplate
Very simple boilerplate using GraphQL and DataLoader
Stars: ✭ 405 (-24.3%)
Mutual labels:  jest
Youtube React
A Youtube clone built in React, Redux, Redux-saga
Stars: ✭ 421 (-21.31%)
Mutual labels:  jest
Ts Jest
A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.
Stars: ✭ 5,380 (+905.61%)
Mutual labels:  jest
Jest Runner Eslint
An ESLint runner for Jest
Stars: ✭ 401 (-25.05%)
Mutual labels:  jest
Pepperoni App Kit
Pepperoni - React Native App Starter Kit for Android and iOS
Stars: ✭ 4,657 (+770.47%)
Mutual labels:  jest
Enzyme
JavaScript Testing utilities for React
Stars: ✭ 19,781 (+3597.38%)
Mutual labels:  jest
Ts Monorepo
Template for setting up a TypeScript monorepo
Stars: ✭ 459 (-14.21%)
Mutual labels:  jest
Native Testing Library
🐳 Simple and complete React Native testing utilities that encourage good testing practices.
Stars: ✭ 526 (-1.68%)
Mutual labels:  jest
Jest Clean Console Reporter
A Jest Reporter to group, hide and prettify spammy console warnings
Stars: ✭ 520 (-2.8%)
Mutual labels:  jest
Snapshot Diff
Diffing snapshot utility for Jest
Stars: ✭ 490 (-8.41%)
Mutual labels:  jest

vue-jest

Jest transformer for Vue single file components

NOTE: This is documentation for [email protected]. View the [email protected] documentation

Usage

npm install --save-dev vue-jest
yarn add vue-jest --dev

Usage with Babel 7

If you use jest > 24.0.0 and babel-jest make sure to install [email protected]

npm install --save-dev [email protected]
yarn add [email protected] --dev

Setup

To use vue-jest as a transformer for your .vue files, map them to the vue-jest module:

{
  "jest": {
    "transform": {
      "^.+\\.vue$": "vue-jest"
    }
  }
}

A full config will look like this.

{
  "jest": {
    "moduleFileExtensions": ["js", "json", "vue"],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "vue-jest"
    }
  }
}

Examples

Example repositories testing Vue components with jest and vue-jest:

Supported langs

vue-jest compiles <script />, <template />, and <style /> blocks with supported lang attributes into JavaScript that Jest can run.

Supported script languages

  • typescript (lang="ts", lang="typescript")
  • coffeescript (lang="coffee", lang="coffeescript")

Global Jest options

You can change the behavior of vue-jest by using jest.globals.

Supporting custom blocks

A great feature of the Vue SFC compiler is that it can support custom blocks. You might want to use those blocks in your tests. To render out custom blocks for testing purposes, you'll need to write a transformer. Once you have your transformer, you'll add an entry to vue-jest's transform map. This is how vue-i18n's <i18n> custom blocks are supported in unit tests.

A package.json Example

{
  "jest": {
    "moduleFileExtensions": ["js", "json", "vue"],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "vue-jest"
    },
    "globals": {
      "vue-jest": {
        "transform": {
          "your-custom-block": "./custom-block-processor.js"
        }
      }
    }
  }
}

Tip: Need programmatic configuration? Use the --config option in Jest CLI, and export a .js file

A jest.config.js Example - If you're using a dedicated configuration file like you can reference and require your processor in the config file instead of using a file reference.

module.exports = {
  globals: {
    'vue-jest': {
      transform: {
        'your-custom-block': require('./custom-block-processor')
      }
    }
  }
}

Writing a processor

Processors must return an object with a "process" method, like so...

module.exports = {
  /**
   * Process the content inside of a custom block and prepare it for execution in a testing environment
   * @param {SFCCustomBlock[]} blocks All of the blocks matching your type, returned from `@vue/component-compiler-utils`
   * @param {string} vueOptionsNamespace The internal namespace for a component's Vue Options in vue-jest
   * @param {string} filename The SFC file being processed
   * @param {Object} config The full Jest config
   * @returns {string} The code to be output after processing all of the blocks matched by this type
   */
  process({ blocks, vueOptionsNamespace, filename, config }) {}
}

templateCompiler

You can provide TemplateCompileOptions in templateCompiler section like this:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "templateCompiler": {
          "transpileOptions": {
            "transforms": {
              "dangerousTaggedTemplateString": true
            }
          }
        }
      }
    }
  }
}

Supported template languages

  • pug (lang="pug")

    • To give options for the Pug compiler, enter them into the Jest configuration. The options will be passed to pug.compile().
    {
      "jest": {
        "globals": {
          "vue-jest": {
            "pug": {
              "basedir": "mybasedir"
            }
          }
        }
      }
    }
    
  • jade (lang="jade")

  • haml (lang="haml")

Supported style languages

  • stylus (lang="stylus", lang="styl")

  • sass (lang="sass"), and

  • scss (lang="scss")

    • The Sass compiler supports Jest's moduleNameMapper which is the suggested way of dealing with Webpack aliases. Webpack's sass-loader uses a special syntax for indicating non-relative imports, so you'll likely need to copy this syntax into your moduleNameMapper entries if you make use of it. For aliases of bare imports (imports that require node module resolution), the aliased value must also be prepended with this ~ or vue-jest's custom resolver won't recognize it.

      {
        "jest": {
          "moduleNameMapper": {
            "^~foo/(.*)": "<rootDir>/foo/$1",
            // @import '~foo'; -> @import 'path/to/project/foo';
            "^~bar/(.*)": "~baz/lib/$1"
            // @import '~bar/qux'; -> @import 'path/to/project/node_modules/baz/lib/qux';
            // Notice how the tilde (~) was needed on the bare import to baz.
          }
        }
      }
      
    • To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at jest.globals['vue-jest'].resources.scss:

      {
        "jest": {
          "globals": {
            "vue-jest": {
              "resources": {
                "scss": [
                  "./node_modules/package/_mixins.scss",
                  "./src/assets/css/globals.scss"
                ]
              }
            }
          }
        }
      }
      

CSS options

experimentalCSSCompile: Boolean Default true. Turn off CSS compilation hideStyleWarn: Boolean Default false. Hide warnings about CSS compilation resources:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "hideStyleWarn": true,
        "experimentalCSSCompile": true
      }
    }
  }
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].