Nuxt Testable

Nuxt Testable is a GitHub repository and tutorial that demonstrates how to write testable Nuxt.js applications using TypeScript, class-based Vue components, and Jest as the test runner. It walks through building a modular todo application step by step, with tests written before implementation, so you can see a realistic TDD workflow for a Nuxt + Vuex project.

What is Nuxt Testable?

Nuxt Testable is a community-written guide and starter project (author: nesterow) based on the Nuxt Community typescript-template. Its core function is to show concrete patterns for unit-testing Vuex stores and Vue components in a Nuxt app. The project takes a fresh Nuxt TypeScript skeleton as input and produces a modular application structure with Jest configuration, dependency injection, and mocked API calls as output.

Key Features

• Class-based Vue and Vuex components — Uses nuxt-property-decorator and vuex-module-decorators to write components and store modules as TypeScript classes, enabling inheritance and OOP patterns.
• Complete Jest setup configuration — Includes package.json Jest settings for vue-jest, ts-jest, and babel-jest transforms, plus testRegex for spec files and testURL: http://localhost/.
• Babel dynamic-import plugin — Recommended setup for universal Nuxt apps to load libraries only on the client side, avoiding server-side window/document references.
• Modular directory structure — Replaces boilerplate components and middleware directories with a modules folder, where each module groups its own components, store, types, tests, and index.vue.
• Dependency injection with provide-consume-decorator — Provides @provideVuex / @consume decorators to inject an axios instance (or any dependency) into Vuex modules and components, making them configurable and abstracted from concrete implementations.
• State factory option — Uses stateFactory: true in vuex-module-decorators to avoid module caching issues that cause shared state across test instances and SSR clients.
• Axios mock adapter for tests — Uses axios-mock-adapter to create a fake REST API (/todos endpoints) so actions can be tested without a real server.
• Reusable test factory functions — A __factory.ts helper mounts Vue components with a configured Vuex store and injected dependencies, so the same setup can be reused across component specs.

Who is it for?

• Nuxt developers new to testing — They can follow the step-by-step setup to configure Jest with TypeScript and Vue single-file components in a Nuxt project.
• Vuex store developers — They get a pattern for testing mutations and asynchronous actions using getModule() from vuex-module-decorators and a mocked axios adapter.
• Vue component authors — They learn to test components with @vue/test-utils, using factory functions and provided/injected store instances.
• Team leads and architects — They can adopt the modular directory structure and dependency injection approach to make large Vue applications more maintainable and portable between projects.

What can you do with Nuxt Testable?

• Set up a testable Nuxt boilerplate — Generate a project with vue init nuxt-community/typescript-template, then follow the instructions to add Jest, Babel plugins, and the required dependencies.
• Write TDD specs for a Vuex store — Start with a failing test that expects a store instance, implement the Vuex module with @Module and @Mutation/@Action decorators, and iterate until tests pass.
• Mock a backend API in tests — Use axios-mock-adapter to stub GET/POST/PUT/DELETE /todos routes, so actions can be tested against realistic responses.
• Test Vue components in isolation — Mount AddTodo.vue and TodoList.vue with a factory that injects a mocked Vuex store, then assert that component state and store state update correctly after calling methods.

How does Nuxt Testable work?

The tutorial is organized as a sequence of steps: first, generate the Nuxt TypeScript skeleton and install dependencies (vuex-module-decorators, provide-consume-decorator, axios-mock-adapter, and Jest-related packages). Next, add Jest and Babel configuration to package.json and tsconfig.json. Then define a TypeScript interface for the store, write a failing spec, and implement the Vuex module using class decorators. Component testing follows the same pattern: write a spec, run it, and make it pass by adding component logic. Finally, connect the module to the Nuxt app via ~/store/index.ts and mount the parent component on a page.

FAQ

What is Nuxt Testable?

Nuxt Testable is a public GitHub repository (17 stars) that contains a tutorial and example code for building Nuxt applications with testable TypeScript code. It focuses on unit-testing Vuex stores and Vue components using Jest, class-based components, and dependency injection.

Which testing libraries does it use?

The project uses Jest as the test runner with vue-jest, ts-jest, and babel-jest for transformation. It also uses @vue/test-utils for mounting components, vuex-module-decorators for store classes, and axios-mock-adapter for mocking HTTP requests.

Does it use class-based components?

Yes. Both Vue components and Vuex modules are written as TypeScript classes using nuxt-property-decorator and vuex-module-decorators. This allows the author to apply inheritance, decorators, and OOP patterns instead of the options-object style.

Is the repository free to use?

The repository is publicly available on GitHub without any stated license restrictions, and the tutorial code can be freely used as a reference or starter. The setup commands use standard npm install steps that are common to open-source projects.