Corey Brooks

Corey Brooks

1661736583

Build a CRUD API with TypeScript, Express, MongoDB, Zod and Jest

This tutorial shows how to build a CRUD API with TypeScript, Express, MongoDB, Zod and Jest

00:00:00 Intro
00:00:09 Hello Friends
00:01:00 Project Template
00:01:40 Clone Template
00:02:21 Template Overview
00:05:00 Typescript with Express
00:07:23 How to find Typescript libraries
00:09:21 Install zod and mongodb
00:09:43 Folder Structure
00:11:36 Create a schema with zod
00:14:39 Create todos router
00:18:59 zod default values
00:19:20 Restructure tests
00:21:31 Our first test
00:25:35 mongodb setup 
00:29:23 collection / model setup
00:31:00 findAll handler
00:33:22 test beforeAll collection drop
00:34:47 close database connection after tests
00:36:23 jest and supertest explained
00:38:01 refactor request handlers
00:39:57 Service / Controller / DAL explained / best practices
00:43:25 Express Error Handling
00:46:18 createOne handler
00:49:55 createOne tests
00:58:30 tests are nice
00:59:01 request validation middleware refactor 
01:07:40 findOne handler
01:13:09 findOne tests
01:16:00 zod ObjectId validation
01:20:43 updateOne handler setup
01:22:57 updateOne tests
01:27:23 updateOne handler implementation
01:29:02 deleteOne handler setup
01:30:28 deleteOne tests 
01:32:29 deleteOne handler implementation
01:36:13 we did it
01:36:44 findAll correction
01:37:49 Thank You!
01:38:40 catJAM


Express API Starter with Typescript

How to use this template:

npx create-express-api --typescript --directory my-api-name

Includes API Server utilities:

  • morgan
    • HTTP request logger middleware for node.js
  • helmet
    • Helmet helps you secure your Express apps by setting various HTTP headers. It's not a silver bullet, but it can help!
  • dotenv
    • Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env
  • cors
    • CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.

Development utilities:

  • typescript
    • TypeScript is a language for application-scale JavaScript.
  • ts-node
    • TypeScript execution and REPL for node.js, with source map and native ESM support.
  • nodemon
    • nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
  • eslint
    • ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
  • typescript-eslint
    • Tooling which enables ESLint to support TypeScript.
  • jest
    • Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
  • supertest
    • HTTP assertions made easy via superagent.

Setup

npm install

Lint

npm run lint

Test

npm run test

Development

npm run dev

View the code here: https://github.com/CodingGarden/intro-to-typescript/tree/examples/examples/express-api

#typescript #expressjs #mongodb #zod #jest #api #crud 

Build a CRUD API with TypeScript, Express, MongoDB, Zod and Jest
藤本  結衣

藤本 結衣

1660393320

Jest を使用した Vuex モジュールの単体テスト

中規模から大規模の SPA を構築している場合、Vue コンポーネントの状態をより適切に処理したい状況に遭遇する可能性があります。

どのアプリケーションでも、複数のコンポーネントが同じ状態に依存しています。異なるコンポーネントからの複数のアクションが同じ状態を変更したいと考えてみましょう。これらの課題を克服するために、Vuexはアプリケーション全体で状態を維持するのに役立ちます。

この記事では、TypeScript で Vuex モジュールを実装し、Jest を使用してユニット テストを行う方法を説明します。このチュートリアルの完全なコードは、vuex-test GitHub リポジトリで入手できます。気軽にフォークしてください。始めましょう!

Vuexとは?

Vuex は、Vue アプリケーションの状態管理パターンおよびライブラリであり、アプリケーションで集中状態管理を使用できるようにし、Flux のようなアーキテクチャを活用するのに役立ちます。Vuex ストアには、次の4 つのコア コンセプトが含まれています。

  1. ゲッター
  2. 突然変異
  3. 行動

状態オブジェクトには、すべてのアプリケーション レベルの状態を含め、ストアに保持するデータが含まれており、信頼できる唯一の情報源として機能します。状態で定義されるプロパティは、文字列、数値、オブジェクト、配列など、任意のデータ型にすることができます。

アイテムのリストを数えたり、コレクションをフィルタリングしたり、他のモジュールやコンポーネントで同じ一連の派生状態を使用したりするなど、ストアの状態に基づいて派生状態が必要な場合は、getter を定義できます。

一方、突然変異は、状態を変更できる唯一の方法です。ミューテーションは常に同期的であり、ペイロードはオプションです。コミット、つまり、MUTATION_NAMEまたはを介し​​てミューテーションを呼び出すことができますpayload。アクションからミューテーションを呼び出すことを常にお勧めします。

アクションは、非同期操作を実行し、ミューテーションをコミットできます。アクション ハンドラーは、ストア インスタンスで同じメソッドまたはプロパティのセットを公開するコンテキスト オブジェクトを受け取ります。

とを使用context.getterscontext.stateて状態を取得し、context.commitミューテーションを呼び出すことができます。action-nameとを使用してアクション ハンドラーを呼び出すことができますpayload。これらは、ストア内の他のアクションから呼び出されます。

Vuex モジュール図

Vuex アーキテクチャ

Vuex モジュールを作成する

アプリケーションのサイズが大きくなると、ストアが肥大化する可能性があります。これを防ぐために、Vuex ではストアをモジュールに分割できます。各モジュールには、独自の状態、ゲッター、ミューテーション、およびアクションを含めることができます。

例として、To Do リストを管理するアプリケーションを作成してみましょう。まず、To Do 操作用の新しいモジュールを作成します。このモジュールは、すべての To Do アイテムを取得し、必要に応じて状態を更新します。

私たちの目標は、中規模から大規模なアプリケーション用のモジュールを構築することです。したがって、ミューテーション タイプ、関数と呼ばれるアクション、およびモジュールの実装を別々のファイルに分割することをお勧めします。

  • mutation-types.ts: すべての関数名が含まれます
  • actions.ts: すべての非同期操作を担当
  • index.ts: モジュールの実装
import { IToDo } from '@/types/todo';
import {Module, VuexModule, Mutation, Action} from 'vuex-module-decorators';
import TodoActions from './actions';
import * as mutationTypes from './mutation-types';

@Module({namespaced: true, name: "Todos"})
export class ToDoModule extends VuexModule {
  todos:Array<IToDo> = [];
  loading = false;
  get completedTodos(){
    return this.todos.filter((todo:IToDo)=> todo.completed);
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_STARTED]() {
    this.loading = true;
  }
  @Mutation
  \[mutationTypes.ON_FETCH_TODOS_SUCCESS\](data: Array<IToDo>) {
    this.loading = false;
    this.todos = data;
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_FAILED]() {
    this.loading = false;
    this.todos = [];
  }

  @Action({rawError: true})
  public async fetchTodos():Promise<void> {
      try {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_STARTED);
          const response: Array<IToDo> = await TodoActions.fetchTodos();
          this.context.commit(mutationTypes.ON_FETCH_TODOS_SUCCESS, response);
        } catch (error) {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_FAILED);
        }
  }

}

上記のコード スニペットには、次の実装が含まれています。

  • fetchTodos Action: REST API から To Do アイテムを取得し、ミューテーションをコミットします。
  • ON_FETCH_TODOS_STARTED突然変異:loading状態属性を更新します
  • ON_FETCH_TODOS_SUCCESS突然変異:todos状態配列を更新します
  • ON_FETCH_TODOS_FAILED突然変異: をリセットし、false としてtodos更新しますloading
  • completedTodosgetter: 完了した ToDo 項目のみを取得します

テストの初期化

単体テストには Jest フレームワークを使用します。Jest は、npm や Yarn などのノードベースのパッケージ マネージャーで簡単にインストールできる JavaScript テスト フレームワークです。Jest を使用する利点はほとんどありません。たとえば、Jest テストは並列で実行され、組み込みのコード カバレッジが含まれ、分離されたテスト、モック、およびスナップショット テストがサポートされます。

ストアを作成し、Vuex を Vue にアタッチし、ストアを登録することで、テストを初期化できます。localVueグローバル Vue コンストラクターに影響を与えずに変更できる、スコープ付きの Vue コンストラクターです。以下のコード スニペットはストアを初期化します。

describe('Todos Module', function() {
    let store: any;
    let todosInstance: ToDoModule;

    beforeEach(function() {
      localVue.use(Vuex);
      store = new Vuex.Store({});
      registerStoreModules(store);
      todosInstance = getModule(ToDoModule, store);
    });

    it('should exists', function() {
      expect(todosInstance).toBeDefined();
    });
});

アクションのテスト

todosモジュールでは、REST API からデータをフェッチし、ミューテーションを使用して状態を埋めるアクションを作成しましたfetchTodos。REST API は外部呼び出しであるため、Jest 関数を使用してそれをモックし、それが呼び出されて状態が更新されているかどうかを検証できます。

it('fetchTodos action should fill todos state', async function() {
      // arrange
      const todosMocked = todos as Array<IToDo>;
       // act
      jest.spyOn(TodoActions, 'fetchTodos').mockImplementation(
        (): Promise<Array<IToDo>> => {
          return Promise.resolve(todosMocked);
        }
      );
      await todosInstance.fetchTodos();
      // assert
      expect(todosInstance.todos.length >0).toEqual(true);
      expect(TodoActions.fetchTodos).toHaveBeenCalled();
});

ゲッターのテスト

ゲッター関数は単に状態オブジェクトを返します。completedTodosこの例では、完了した To-Do 項目を返すゲッター関数 が 1 つあります。

  it('completedTodos getter should return only completed todos', async function() {
      // arrange
      const completedTodos = todosInstance.completedTodos;
      // assert
      expect(completedTodos.every((todo:IToDo)=> todo.completed)).toEqual(true);
    });

変異のテスト

すでに知っているように、ミューテーションは状態を変更する唯一の方法です。ON_FETCH_TODOS_SUCCESSモック ToDo タスクを送信し、状態が変更されているかどうかを検証することで、ミューテーションをテストできます。

以下のコード スニペットは successミューテーション用です。started同じことがおよびerrorミューテーションにも当てはまります。

it('ON_FETCH_TODOS_SUCCESS mutation should update given todos',  function() {
      // arrange 
      const todosTest = [
        {
          userId: 13,
          id: 12,
          title: "Move to new city",
          completed: false
        },
        {
          userId: 15,
          id: 21,
          title: "Finish a novel",
          completed: true
        },
      ];
      // act
      todosInstance.ON_FETCH_TODOS_SUCCESS(todosTest);
      // assert
      expect(todosInstance.todos.length).toEqual(2);
      expect(todosInstance.todos).toEqual(todosTest);
    });

結論

このチュートリアルでは、TypeScript と Jest を使用して Vuex モジュールを作成し、ユニット テストすることで、Vuex について学びました。状態、ゲッター、ミューテーション、アクションを含む、Vuex ストアの 4 つの主要な概念について説明しました。Vuex の集中状態管理により、アプリケーションを簡素化し、Flux のようなアーキテクチャを活用できます。

何か新しいことを学んでいただければ幸いです。ご不明な点がありましたら、コメントを残してください。ハッピーコーディング! 

ソース: https://blog.logrocket.com/unit-testing-vuex-modules-jest/ 

#jest #vuex 

Jest を使用した Vuex モジュールの単体テスト
曾 俊

曾 俊

1660310669

使用 Jest 对 Vuex 模块进行单元测试

如果您正在构建一个中型到大型的 SPA,您很可能会遇到想要更好地处理 Vue 组件状态的情况。

在任何应用程序中,多个组件都依赖于同一个状态。让我们假设来自不同组件的多个动作想要改变相同的状态。为了克服这些挑战,Vuex帮助我们维护整个应用程序的状态。

在本文中,我将指导您在TypeScript 中实现一个 Vuex 模块,然后使用 Jest 对其进行单元测试。本教程的完整代码可在vuex-test GitHub 存储库中获得;随意分叉它。让我们开始吧!

什么是 Vuex?

Vuex 是Vue 应用程序的状态管理模式和库,允许您在应用程序中使用集中状态管理,帮助您利用类似 Flux 的架构。Vuex store包含四个核心概念:

  1. 状态
  2. 吸气剂
  3. 突变
  4. 行动

状态对象包含您希望在存储中拥有的数据,包括您的所有应用程序级状态,作为唯一的事实来源。状态中定义的属性可以是任何数据类型,包括字符串、数字、对象或数组。

如果您想根据存储状态获得派生状态,例如,计算项目列表、过滤集合或在其他模块或组件中使用相同的派生状态集,您可以定义 getters

另一方面,突变是我们改变状态的唯一方法。突变总是同步的,有效载荷是可选的。您可以通过提交,即MUTATION_NAMEpayload. 始终建议从动作中调用突变。

动作可以执行异步操作并提交突变。动作处理程序接收一个上下文对象,该对象在存储实例上公开相同的方法或属性集。

您可以使用context.gettersandcontext.state来获取状态并context.commit调用突变。action-name您可以使用和调用动作处理程序payload,它们是从商店中的其他动作调用的。

Vuex 模块图

Vuex 架构

创建一个 Vuex 模块

随着应用程序大小的增加,您的商店可能会变得臃肿。为了防止这种情况,Vuex 允许您将 store 拆分为 modules。每个模块都可以包含自己的状态、getter、突变和动作。

例如,让我们创建一个用于管理待办事项列表的应用程序。首先,新建一个待办事项模块,负责获取所有待办事项并根据需要更新状态。

我们的目标是为中大型应用程序构建模块,因此,最好将突变类型、称为函数的操作和模块实现拆分到单独的文件中:

  • mutation-types.ts: 包含所有函数名
  • actions.ts: 负责所有异步操作
  • index.ts: 模块实现
import { IToDo } from '@/types/todo';
import {Module, VuexModule, Mutation, Action} from 'vuex-module-decorators';
import TodoActions from './actions';
import * as mutationTypes from './mutation-types';

@Module({namespaced: true, name: "Todos"})
export class ToDoModule extends VuexModule {
  todos:Array<IToDo> = [];
  loading = false;
  get completedTodos(){
    return this.todos.filter((todo:IToDo)=> todo.completed);
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_STARTED]() {
    this.loading = true;
  }
  @Mutation
  \[mutationTypes.ON_FETCH_TODOS_SUCCESS\](data: Array<IToDo>) {
    this.loading = false;
    this.todos = data;
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_FAILED]() {
    this.loading = false;
    this.todos = [];
  }

  @Action({rawError: true})
  public async fetchTodos():Promise<void> {
      try {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_STARTED);
          const response: Array<IToDo> = await TodoActions.fetchTodos();
          this.context.commit(mutationTypes.ON_FETCH_TODOS_SUCCESS, response);
        } catch (error) {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_FAILED);
        }
  }

}

上面的代码片段包含以下实现:

  • fetchTodos Action:从 REST API 中获取待办事项并提交变更
  • ON_FETCH_TODOS_STARTED突变:更新loading状态属性
  • ON_FETCH_TODOS_SUCCESS突变:更新todos状态数组
  • ON_FETCH_TODOS_FAILED突变:重置todos和更新loading为假
  • completedTodosgetter:仅获取已完成的待办事项

初始化测试

我们将使用Jest 框架进行单元测试;Jest 只是一个 JavaScript 测试框架,可以使用任何基于节点的包管理器(如 npm 或 Yarn)轻松安装。使用 Jest 的优势很少,例如,Jest 测试并行运行,包括内置代码覆盖,并支持隔离测试、模拟和快照测试。

您可以通过创建商店、将 Vuex 附加到 Vue 并注册商店来初始化测试。localVue是作用域的 Vue 构造函数,我们可以在不影响全局 Vue 构造函数的情况下对其进行更改。下面的代码片段将初始化商店:

describe('Todos Module', function() {
    let store: any;
    let todosInstance: ToDoModule;

    beforeEach(function() {
      localVue.use(Vuex);
      store = new Vuex.Store({});
      registerStoreModules(store);
      todosInstance = getModule(ToDoModule, store);
    });

    it('should exists', function() {
      expect(todosInstance).toBeDefined();
    });
});

测试动作

todos模块中,我们创建了fetchTodos从 REST API 获取数据并使用突变填充状态的操作。由于 REST API 是一个外部调用,我们可以使用 Jest 函数模拟它,然后验证它是否被调用以及状态是否正在更新:

it('fetchTodos action should fill todos state', async function() {
      // arrange
      const todosMocked = todos as Array<IToDo>;
       // act
      jest.spyOn(TodoActions, 'fetchTodos').mockImplementation(
        (): Promise<Array<IToDo>> => {
          return Promise.resolve(todosMocked);
        }
      );
      await todosInstance.fetchTodos();
      // assert
      expect(todosInstance.todos.length >0).toEqual(true);
      expect(TodoActions.fetchTodos).toHaveBeenCalled();
});

测试吸气剂

Getter 函数只返回状态对象。在我们的示例中,我们有一个 getter 函数,completedTodos它应该返回已完成的待办事项:

  it('completedTodos getter should return only completed todos', async function() {
      // arrange
      const completedTodos = todosInstance.completedTodos;
      // assert
      expect(completedTodos.every((todo:IToDo)=> todo.completed)).toEqual(true);
    });

测试突变

正如我们已经知道的,突变是改变状态的唯一方法。我们可以ON_FETCH_TODOS_SUCCESS通过发送模拟待办任务并验证状态是否被修改来测试突变。

下面的代码片段用于 success突变。这同样适用于startedanderror突变:

it('ON_FETCH_TODOS_SUCCESS mutation should update given todos',  function() {
      // arrange 
      const todosTest = [
        {
          userId: 13,
          id: 12,
          title: "Move to new city",
          completed: false
        },
        {
          userId: 15,
          id: 21,
          title: "Finish a novel",
          completed: true
        },
      ];
      // act
      todosInstance.ON_FETCH_TODOS_SUCCESS(todosTest);
      // assert
      expect(todosInstance.todos.length).toEqual(2);
      expect(todosInstance.todos).toEqual(todosTest);
    });

结论

在本教程中,我们通过使用 TypeScript 和 Jest 创建和单元测试 Vuex 模块来了解 Vuex。我们介绍了 Vuex 存储的四个核心概念,包括状态、getter、突变和动作。借助 Vuex 的集中状态管理,您可以简化应用程序并利用类似 Flux 的架构。

我希望你学到了一些新东西,如果你有任何问题,一定要发表评论。快乐编码! 

来源:https ://blog.logrocket.com/unit-testing-vuex-modules-jest/

 #jest #vuex 

使用 Jest 对 Vuex 模块进行单元测试
Léon  Peltier

Léon Peltier

1660306812

Test Unitaire Des Modules Vuex Avec Jest

Si vous construisez un SPA de moyenne à grande échelle, il y a de fortes chances que vous rencontriez des situations où vous souhaitez mieux gérer l'état de vos composants Vue.

Dans toute application, plusieurs composants dépendent du même élément d'état. Imaginons que plusieurs actions de différents composants voudraient faire muter le même état. Pour surmonter ces défis, Vuex nous aide à maintenir l'état de l'application.

Dans cet article, je vais vous guider dans l'implémentation d'un module Vuex dans TypeScript, puis le tester unitairement à l'aide de Jest . Le code complet de ce didacticiel est disponible dans le référentiel GitHub de vuex-test ; n'hésitez pas à le bifurquer. Commençons!

Qu'est-ce que Vuex ?

Vuex est un modèle de gestion d'état et une bibliothèque pour les applications Vue qui vous permet d'utiliser la gestion d'état centralisée dans vos applications, vous aidant à tirer parti de l'architecture de type Flux. Le magasin Vuex contient quatre concepts de base :

  1. État
  2. Getters
  3. mutation
  4. Actions

L' objet d'état contient les données que vous souhaitez avoir dans le magasin, y compris tout votre état au niveau de l'application, servant de source unique de vérité. Les propriétés définies dans l'état peuvent être n'importe quel type de données, y compris une chaîne, un nombre, un objet ou un tableau.

Si vous souhaitez avoir un état dérivé basé sur l'état du magasin, par exemple, compter la liste des éléments, filtrer la collection ou utiliser le même ensemble d'états dérivés dans d'autres modules ou composants, vous pouvez définir des getters .

D'un autre côté, les mutations sont le seul moyen de changer l'état. Les mutations sont toujours synchrones et la charge utile est facultative. Vous pouvez appeler une mutation via le commit, c'est-à-dire MUTATION_NAMEou payload. Il est toujours recommandé d'appeler des mutations à partir d'actions.

Les actions peuvent effectuer des opérations asynchrones et valider les mutations. Les gestionnaires d'action reçoivent un objet de contexte qui expose le même ensemble de méthodes ou de propriétés sur l'instance de magasin.

Vous pouvez utiliser context.getterset context.statepour obtenir l'état et context.commitappeler des mutations. Vous pouvez appeler des gestionnaires d'action à l'aide de action-nameet payload, et ils sont appelés à partir d'autres actions du magasin.

Schéma des modules Vuex

Architecture Vuex

Créer un module Vuex

À mesure que la taille de votre application augmente, votre magasin peut devenir gonflé. Pour éviter cela, Vuex vous permet de diviser le magasin en modules . Chaque module peut contenir son propre état, getters, mutations et actions.

A titre d'exemple, créons une application pour gérer une liste de tâches. Tout d'abord, créez un nouveau module pour les opérations à faire, qui est responsable de l'obtention de tous les éléments à faire et de la mise à jour de l'état si nécessaire.

Notre objectif est de construire le module pour des applications à moyenne et grande échelle, par conséquent, il est préférable de diviser les types de mutation, les actions appelées fonctions et l'implémentation du module dans des fichiers séparés :

  • mutation-types.ts: Contient tous les noms de fonction
  • actions.ts: Responsable de toutes les opérations asynchrones
  • index.ts: L'implémentation du module
import { IToDo } from '@/types/todo';
import {Module, VuexModule, Mutation, Action} from 'vuex-module-decorators';
import TodoActions from './actions';
import * as mutationTypes from './mutation-types';

@Module({namespaced: true, name: "Todos"})
export class ToDoModule extends VuexModule {
  todos:Array<IToDo> = [];
  loading = false;
  get completedTodos(){
    return this.todos.filter((todo:IToDo)=> todo.completed);
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_STARTED]() {
    this.loading = true;
  }
  @Mutation
  \[mutationTypes.ON_FETCH_TODOS_SUCCESS\](data: Array<IToDo>) {
    this.loading = false;
    this.todos = data;
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_FAILED]() {
    this.loading = false;
    this.todos = [];
  }

  @Action({rawError: true})
  public async fetchTodos():Promise<void> {
      try {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_STARTED);
          const response: Array<IToDo> = await TodoActions.fetchTodos();
          this.context.commit(mutationTypes.ON_FETCH_TODOS_SUCCESS, response);
        } catch (error) {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_FAILED);
        }
  }

}

L'extrait de code ci-dessus contient l'implémentation suivante :

  • fetchTodos Action: Récupère les éléments à faire de l'API REST et valide les mutations
  • ON_FETCH_TODOS_STARTEDmutation : met à jour l' loadingattribut d'état
  • ON_FETCH_TODOS_SUCCESSmutation : met à jour le todostableau d'état
  • ON_FETCH_TODOS_FAILEDmutation : Réinitialise todoset met à jour loadingcomme faux
  • completedTodosgetter : Obtient uniquement les éléments à faire qui sont terminés

Initialiser les tests

Nous utiliserons le framework Jest pour les tests unitaires ; Jest est simplement un framework de test JavaScript qui peut être facilement installé avec n'importe quel gestionnaire de packages basé sur un nœud, comme npm ou Yarn. L'utilisation de Jest présente peu d'avantages, par exemple, les tests Jest s'exécutent en parallèle, incluent une couverture de code intégrée et prennent en charge les tests isolés, les simulations et les tests instantanés.

Vous pouvez initialiser le test en créant un magasin, en attachant Vuex à Vue et en enregistrant le magasin. localVueest le constructeur Vue scoped que nous pouvons modifier sans affecter le constructeur Vue global. L'extrait de code ci-dessous initialisera le magasin :

describe('Todos Module', function() {
    let store: any;
    let todosInstance: ToDoModule;

    beforeEach(function() {
      localVue.use(Vuex);
      store = new Vuex.Store({});
      registerStoreModules(store);
      todosInstance = getModule(ToDoModule, store);
    });

    it('should exists', function() {
      expect(todosInstance).toBeDefined();
    });
});

Actions de test

Dans le todosmodule, nous avons créé l' fetchTodosaction, qui récupère les données d'une API REST et remplit l'état à l'aide de mutations. Étant donné que l'API REST est un appel externe, nous pouvons la simuler à l'aide d'une fonction Jest, puis valider si elle est appelée et si l'état est mis à jour :

it('fetchTodos action should fill todos state', async function() {
      // arrange
      const todosMocked = todos as Array<IToDo>;
       // act
      jest.spyOn(TodoActions, 'fetchTodos').mockImplementation(
        (): Promise<Array<IToDo>> => {
          return Promise.resolve(todosMocked);
        }
      );
      await todosInstance.fetchTodos();
      // assert
      expect(todosInstance.todos.length >0).toEqual(true);
      expect(TodoActions.fetchTodos).toHaveBeenCalled();
});

Tester les getters

Les fonctions getter renvoient simplement l'objet d'état. Dans notre exemple, nous avons une fonction getter, completedTodos, qui doit renvoyer les tâches à faire terminées :

  it('completedTodos getter should return only completed todos', async function() {
      // arrange
      const completedTodos = todosInstance.completedTodos;
      // assert
      expect(completedTodos.every((todo:IToDo)=> todo.completed)).toEqual(true);
    });

Tester les mutations

Comme nous le savons déjà, les mutations sont le seul moyen de changer l'état. Nous pouvons tester la ON_FETCH_TODOS_SUCCESSmutation en envoyant des tâches fictives et en validant si l'état est modifié.

L'extrait de code ci-dessous est pour la  successmutation. Il en va de même pour les mutations startedet :error

it('ON_FETCH_TODOS_SUCCESS mutation should update given todos',  function() {
      // arrange 
      const todosTest = [
        {
          userId: 13,
          id: 12,
          title: "Move to new city",
          completed: false
        },
        {
          userId: 15,
          id: 21,
          title: "Finish a novel",
          completed: true
        },
      ];
      // act
      todosInstance.ON_FETCH_TODOS_SUCCESS(todosTest);
      // assert
      expect(todosInstance.todos.length).toEqual(2);
      expect(todosInstance.todos).toEqual(todosTest);
    });

Conclusion

Dans ce didacticiel, nous avons découvert Vuex en créant et en testant un module Vuex avec TypeScript et Jest. Nous avons couvert les quatre concepts de base d'un magasin Vuex, y compris l'état, les getters, les mutations et les actions. Avec la gestion d'état centralisée de Vuex, vous pouvez simplifier votre application et tirer parti de l'architecture de type Flux.

J'espère que vous avez appris quelque chose de nouveau, et assurez-vous de laisser un commentaire si vous avez des questions. Bon codage ! 

Source : https://blog.logrocket.com/unit-testing-vuex-modules-jest/

 #jest #vuex 

Test Unitaire Des Modules Vuex Avec Jest
Mélanie  Faria

Mélanie Faria

1660306440

Testes Unitários De Módulos Vuex Com Jest

Se você estiver construindo um SPA de médio a grande porte, é provável que você se depare com situações em que deseja lidar melhor com o estado de seus componentes Vue.

Em qualquer aplicação, vários componentes dependem do mesmo estado. Vamos imaginar que várias ações de diferentes componentes gostariam de alterar o mesmo estado. Para superar esses desafios, o Vuex nos ajuda a manter o estado em todo o aplicativo.

Neste artigo, orientarei você na implementação de um módulo Vuex no TypeScript e, em seguida, no teste de unidade usando Jest . O código completo deste tutorial está disponível no repositório GitHub vuex-test ; sinta-se livre para bifurcá-lo. Vamos começar!

O que é Vuex?

Vuex é um padrão e biblioteca de gerenciamento de estado para aplicativos Vue que permite usar o gerenciamento de estado centralizado em seus aplicativos, ajudando você a aproveitar a arquitetura semelhante ao Flux. A loja Vuex contém quatro conceitos principais:

  1. Estado
  2. Getters
  3. Mutações
  4. Ações

O objeto de estado contém os dados que você deseja ter no armazenamento, incluindo todo o estado no nível do aplicativo, servindo como a única fonte de verdade. As propriedades definidas no estado podem ser qualquer tipo de dados, incluindo uma string, número, objeto ou array.

Se você quiser ter um estado derivado baseado no estado da loja, por exemplo, contando a lista de itens, filtrando a coleção ou usando o mesmo conjunto de estado derivado em outros módulos ou componentes, você pode definir getters .

Por outro lado, as mutações são a única maneira de mudar o estado. As mutações são sempre síncronas e a carga útil é opcional. Você pode chamar uma mutação por meio do commit, ou seja, MUTATION_NAMEou payload. É sempre recomendado chamar mutações de ações.

As ações podem realizar operações assíncronas e confirmar as mutações. Os manipuladores de ação recebem um objeto de contexto que expõe o mesmo conjunto de métodos ou propriedades na instância de armazenamento.

Você pode usar context.getterse context.statepara obter o estado e context.commitchamar mutações. Você pode chamar manipuladores de ação usando action-namee payload, e eles são chamados de outras ações dentro da loja.

Diagrama de Módulos Vuex

Arquitetura Vuex

Criar um módulo Vuex

À medida que o tamanho do seu aplicativo aumenta, sua loja pode ficar inchada. Para evitar isso, o Vuex permite dividir a loja em módulos . Cada módulo pode conter seu próprio estado, getters, mutações e ações.

Como exemplo, vamos criar um aplicativo para gerenciar uma lista de tarefas. Primeiro, crie um novo módulo para operações de pendências, que é responsável por obter todas as pendências e atualizar o estado conforme necessário.

Nosso objetivo é construir o módulo para aplicações de médio a grande porte, portanto, é melhor dividir os tipos de mutação, ações chamadas funções e a implementação do módulo em arquivos separados:

  • mutation-types.ts: Contém todos os nomes de funções
  • actions.ts: Responsável por todas as operações assíncronas
  • index.ts: A implementação do módulo
import { IToDo } from '@/types/todo';
import {Module, VuexModule, Mutation, Action} from 'vuex-module-decorators';
import TodoActions from './actions';
import * as mutationTypes from './mutation-types';

@Module({namespaced: true, name: "Todos"})
export class ToDoModule extends VuexModule {
  todos:Array<IToDo> = [];
  loading = false;
  get completedTodos(){
    return this.todos.filter((todo:IToDo)=> todo.completed);
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_STARTED]() {
    this.loading = true;
  }
  @Mutation
  \[mutationTypes.ON_FETCH_TODOS_SUCCESS\](data: Array<IToDo>) {
    this.loading = false;
    this.todos = data;
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_FAILED]() {
    this.loading = false;
    this.todos = [];
  }

  @Action({rawError: true})
  public async fetchTodos():Promise<void> {
      try {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_STARTED);
          const response: Array<IToDo> = await TodoActions.fetchTodos();
          this.context.commit(mutationTypes.ON_FETCH_TODOS_SUCCESS, response);
        } catch (error) {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_FAILED);
        }
  }

}

O snippet de código acima contém a seguinte implementação:

  • fetchTodos Action: busca os itens de tarefas da API REST e confirma as mutações
  • ON_FETCH_TODOS_STARTEDmutação: atualiza o loadingatributo de estado
  • ON_FETCH_TODOS_SUCCESSmutação: atualiza a todosmatriz de estado
  • ON_FETCH_TODOS_FAILEDmutação: redefine o todose atualiza loadingcomo falso
  • completedTodosgetter: Obtém apenas os itens de tarefas que foram concluídos

Inicializar testes

Usaremos o framework Jest para testes unitários ; Jest é simplesmente uma estrutura de teste JavaScript que pode ser facilmente instalada com qualquer gerenciador de pacotes baseado em nó, como npm ou Yarn. Há poucas vantagens de usar o Jest, por exemplo, os testes do Jest são executados em paralelo, incluem cobertura de código integrada e dão suporte a testes isolados, simulações e testes de instantâneos.

Você pode inicializar o teste criando uma loja, anexando Vuex ao Vue e registrando a loja. localVueé o construtor Vue com escopo que podemos alterar sem afetar o construtor Vue global. O snippet de código abaixo inicializará a loja:

describe('Todos Module', function() {
    let store: any;
    let todosInstance: ToDoModule;

    beforeEach(function() {
      localVue.use(Vuex);
      store = new Vuex.Store({});
      registerStoreModules(store);
      todosInstance = getModule(ToDoModule, store);
    });

    it('should exists', function() {
      expect(todosInstance).toBeDefined();
    });
});

Ações de teste

No todosmódulo, criamos a fetchTodosação, que busca os dados de uma API REST e preenche o estado usando mutações. Como a API REST é uma chamada externa, podemos zombar dela usando uma função Jest e validar se ela está sendo chamada e o estado está sendo atualizado:

it('fetchTodos action should fill todos state', async function() {
      // arrange
      const todosMocked = todos as Array<IToDo>;
       // act
      jest.spyOn(TodoActions, 'fetchTodos').mockImplementation(
        (): Promise<Array<IToDo>> => {
          return Promise.resolve(todosMocked);
        }
      );
      await todosInstance.fetchTodos();
      // assert
      expect(todosInstance.todos.length >0).toEqual(true);
      expect(TodoActions.fetchTodos).toHaveBeenCalled();
});

Testando getters

As funções getter simplesmente retornam o objeto de estado. Em nosso exemplo, temos uma função getter, completedTodos, que deve retornar os itens de pendências concluídos:

  it('completedTodos getter should return only completed todos', async function() {
      // arrange
      const completedTodos = todosInstance.completedTodos;
      // assert
      expect(completedTodos.every((todo:IToDo)=> todo.completed)).toEqual(true);
    });

Testando mutações

Como já sabemos, as mutações são a única maneira de mudar o estado. Podemos testar a ON_FETCH_TODOS_SUCCESSmutação enviando tarefas simuladas e validando se o estado foi modificado.

O trecho de código abaixo é para a  successmutação. O mesmo se aplica para as mutações startede também:error

it('ON_FETCH_TODOS_SUCCESS mutation should update given todos',  function() {
      // arrange 
      const todosTest = [
        {
          userId: 13,
          id: 12,
          title: "Move to new city",
          completed: false
        },
        {
          userId: 15,
          id: 21,
          title: "Finish a novel",
          completed: true
        },
      ];
      // act
      todosInstance.ON_FETCH_TODOS_SUCCESS(todosTest);
      // assert
      expect(todosInstance.todos.length).toEqual(2);
      expect(todosInstance.todos).toEqual(todosTest);
    });

Conclusão

Neste tutorial, aprendemos sobre o Vuex criando e testando a unidade de um módulo Vuex com TypeScript e Jest. Cobrimos os quatro conceitos principais de uma loja Vuex, incluindo estado, getters, mutações e ações. Com o gerenciamento de estado centralizado do Vuex, você pode simplificar seu aplicativo e aproveitar a arquitetura semelhante ao Flux.

Espero que você tenha aprendido algo novo, e não se esqueça de deixar um comentário se tiver alguma dúvida. Boa codificação! 

Fonte: https://blog.logrocket.com/unit-testing-vuex-modules-jest/

 #jest #vuex 

Testes Unitários De Módulos Vuex Com Jest

Unidad De Prueba De Módulos Vuex Con Jest

Si está construyendo un SPA de mediana a gran escala, es probable que se encuentre con situaciones en las que desee manejar mejor el estado de sus componentes de Vue.

En cualquier aplicación, varios componentes dependen del mismo estado. Imaginemos que varias acciones de diferentes componentes quisieran mutar el mismo estado. Para superar estos desafíos, Vuex nos ayuda a mantener el estado en toda la aplicación.

En este artículo, lo guiaré a través de la implementación de un módulo Vuex en TypeScript, luego lo probaré unitariamente usando Jest . El código completo de este tutorial está disponible en el repositorio de GitHub de vuex-test ; siéntete libre de bifurcarlo. ¡Empecemos!

¿Qué es Vuex?

Vuex es un patrón de gestión de estado y una biblioteca para aplicaciones Vue que le permite utilizar la gestión de estado centralizada en sus aplicaciones, ayudándole a aprovechar la arquitectura similar a Flux. La tienda Vuex contiene cuatro conceptos básicos:

  1. Estado
  2. captadores
  3. Mutaciones
  4. Comportamiento

El objeto de estado contiene los datos que desea tener en el almacén, incluido todo el estado de su aplicación, y actúa como la única fuente de verdad. Las propiedades definidas en el estado pueden ser de cualquier tipo de datos, incluida una cadena, un número, un objeto o una matriz.

Si desea tener un estado derivado basado en el estado de la tienda, por ejemplo, contar la lista de elementos, filtrar la colección o usar el mismo conjunto de estados derivados en otros módulos o componentes, puede definir captadores .

Por otro lado, las mutaciones son la única forma en que podemos cambiar el estado. Las mutaciones siempre son síncronas y la carga útil es opcional. Puede llamar a una mutación a través de la confirmación, es decir, MUTATION_NAMEo payload. Siempre se recomienda llamar mutaciones desde acciones.

Las acciones pueden realizar operaciones asincrónicas y cometer las mutaciones. Los controladores de acciones reciben un objeto de contexto que expone el mismo conjunto de métodos o propiedades en la instancia de la tienda.

Puede usar context.gettersy context.statepara obtener el estado y context.commitpara llamar mutaciones. Puede llamar a los controladores de acciones usando action-namey payload, y se llaman desde otras acciones dentro de la tienda.

Diagrama de módulos Vuex

arquitectura vuex

Crear un módulo Vuex

A medida que aumenta el tamaño de su aplicación, su tienda puede inflarse. Para evitar esto, Vuex te permite dividir la tienda en módulos . Cada módulo puede contener su propio estado, captadores, mutaciones y acciones.

Como ejemplo, vamos a crear una aplicación para administrar una lista de tareas pendientes. Primero, cree un nuevo módulo para las operaciones pendientes, que es responsable de obtener todos los elementos pendientes y actualizar el estado según sea necesario.

Nuestro objetivo es construir el módulo para aplicaciones de mediana a gran escala, por lo tanto, es mejor dividir los tipos de mutación, las acciones llamadas funciones y la implementación del módulo en archivos separados:

  • mutation-types.ts: Contiene todos los nombres de funciones
  • actions.ts: Responsable de todas las operaciones asíncronas
  • index.ts: La implementación del módulo
import { IToDo } from '@/types/todo';
import {Module, VuexModule, Mutation, Action} from 'vuex-module-decorators';
import TodoActions from './actions';
import * as mutationTypes from './mutation-types';

@Module({namespaced: true, name: "Todos"})
export class ToDoModule extends VuexModule {
  todos:Array<IToDo> = [];
  loading = false;
  get completedTodos(){
    return this.todos.filter((todo:IToDo)=> todo.completed);
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_STARTED]() {
    this.loading = true;
  }
  @Mutation
  \[mutationTypes.ON_FETCH_TODOS_SUCCESS\](data: Array<IToDo>) {
    this.loading = false;
    this.todos = data;
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_FAILED]() {
    this.loading = false;
    this.todos = [];
  }

  @Action({rawError: true})
  public async fetchTodos():Promise<void> {
      try {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_STARTED);
          const response: Array<IToDo> = await TodoActions.fetchTodos();
          this.context.commit(mutationTypes.ON_FETCH_TODOS_SUCCESS, response);
        } catch (error) {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_FAILED);
        }
  }

}

El fragmento de código anterior contiene la siguiente implementación:

  • fetchTodos Action: Obtiene los elementos pendientes de la API REST y confirma las mutaciones
  • ON_FETCH_TODOS_STARTEDmutación: Actualiza el loadingatributo de estado
  • ON_FETCH_TODOS_SUCCESSmutación: actualiza la todosmatriz de estado
  • ON_FETCH_TODOS_FAILEDmutación: restablece todosy actualiza loadingcomo falso
  • completedTodoscaptador: obtiene solo las tareas pendientes que se han completado

Inicializar pruebas

Usaremos el marco Jest para pruebas unitarias ; Jest es simplemente un marco de prueba de JavaScript que se puede instalar fácilmente con cualquier administrador de paquetes basado en nodos, como npm o Yarn. Hay pocas ventajas de usar Jest, por ejemplo, las pruebas de Jest se ejecutan en paralelo, incluyen cobertura de código integrada y admiten pruebas aisladas, simulacros y pruebas de instantáneas.

Puede inicializar la prueba creando una tienda, adjuntando Vuex a Vue y registrando la tienda. localVuees el constructor de Vue con ámbito que podemos cambiar sin afectar al constructor global de Vue. El fragmento de código a continuación inicializará la tienda:

describe('Todos Module', function() {
    let store: any;
    let todosInstance: ToDoModule;

    beforeEach(function() {
      localVue.use(Vuex);
      store = new Vuex.Store({});
      registerStoreModules(store);
      todosInstance = getModule(ToDoModule, store);
    });

    it('should exists', function() {
      expect(todosInstance).toBeDefined();
    });
});

Acciones de prueba

En el todosmódulo, creamos la fetchTodosacción, que obtiene datos de una API REST y completa el estado mediante mutaciones. Dado que la API REST es una llamada externa, podemos simularla usando una función Jest, luego validar si se está llamando y el estado se está actualizando:

it('fetchTodos action should fill todos state', async function() {
      // arrange
      const todosMocked = todos as Array<IToDo>;
       // act
      jest.spyOn(TodoActions, 'fetchTodos').mockImplementation(
        (): Promise<Array<IToDo>> => {
          return Promise.resolve(todosMocked);
        }
      );
      await todosInstance.fetchTodos();
      // assert
      expect(todosInstance.todos.length >0).toEqual(true);
      expect(TodoActions.fetchTodos).toHaveBeenCalled();
});

prueba de captadores

Las funciones getter simplemente devuelven el objeto de estado. En nuestro ejemplo, tenemos una función captadora completedTodos, que debería devolver los elementos pendientes que se completaron:

  it('completedTodos getter should return only completed todos', async function() {
      // arrange
      const completedTodos = todosInstance.completedTodos;
      // assert
      expect(completedTodos.every((todo:IToDo)=> todo.completed)).toEqual(true);
    });

Probando mutaciones

Como ya sabemos, las mutaciones son la única forma de cambiar el estado. Podemos probar la ON_FETCH_TODOS_SUCCESSmutación enviando tareas pendientes simuladas y validando si el estado se modifica.

El fragmento de código a continuación es para la  successmutación. Lo mismo se aplica para las mutaciones startedy también:error

it('ON_FETCH_TODOS_SUCCESS mutation should update given todos',  function() {
      // arrange 
      const todosTest = [
        {
          userId: 13,
          id: 12,
          title: "Move to new city",
          completed: false
        },
        {
          userId: 15,
          id: 21,
          title: "Finish a novel",
          completed: true
        },
      ];
      // act
      todosInstance.ON_FETCH_TODOS_SUCCESS(todosTest);
      // assert
      expect(todosInstance.todos.length).toEqual(2);
      expect(todosInstance.todos).toEqual(todosTest);
    });

Conclusión

En este tutorial, aprendimos sobre Vuex al crear y probar un módulo de Vuex con TypeScript y Jest. Cubrimos los cuatro conceptos básicos de una tienda Vuex, incluidos el estado, los captadores, las mutaciones y las acciones. Con la administración de estado centralizada de Vuex, puede simplificar su aplicación y aprovechar la arquitectura similar a Flux.

Espero que hayas aprendido algo nuevo, y asegúrate de dejar un comentario si tienes alguna pregunta. ¡Feliz codificación! 

Fuente: https://blog.logrocket.com/unit-testing-vuex-modules-jest/

 #jest #vuex 

Unidad De Prueba De Módulos Vuex Con Jest
Hong  Nhung

Hong Nhung

1660302960

Kiểm Tra đơn Vị Mô-đun Vuex Với Jest

Nếu bạn đang xây dựng một SPA quy mô vừa đến lớn, rất có thể bạn sẽ gặp phải những tình huống mà bạn muốn xử lý tốt hơn trạng thái của các thành phần Vue của mình.

Trong bất kỳ ứng dụng nào, nhiều thành phần phụ thuộc vào cùng một trạng thái. Hãy tưởng tượng rằng nhiều hành động từ các thành phần khác nhau muốn thay đổi cùng một trạng thái. Để vượt qua những thách thức này, Vuex giúp chúng tôi duy trì trạng thái trên toàn ứng dụng.

Trong bài viết này, tôi sẽ hướng dẫn bạn triển khai mô-đun Vuex trong TypeScript, sau đó đơn vị kiểm tra nó bằng Jest . Mã hoàn chỉnh cho hướng dẫn này có sẵn tại kho lưu trữ GitHub vuex-test ; cảm thấy tự do để phân nhánh nó. Bắt đầu nào!

Vuex là gì?

Vuex là một mẫu và thư viện quản lý trạng thái cho các ứng dụng Vue cho phép bạn sử dụng quản lý trạng thái tập trung trong các ứng dụng của mình, giúp bạn tận dụng lợi thế của kiến ​​trúc giống như Flux. Cửa hàng Vuex chứa bốn khái niệm cốt lõi:

  1. Tiểu bang
  2. Getters
  3. Đột biến
  4. Hành động

Đối tượng trạng thái chứa dữ liệu bạn muốn có trong cửa hàng, bao gồm tất cả trạng thái cấp ứng dụng của bạn, đóng vai trò là nguồn chân lý duy nhất. Các thuộc tính được xác định trong trạng thái có thể là bất kỳ kiểu dữ liệu nào, bao gồm một chuỗi, số, đối tượng hoặc mảng.

Nếu bạn muốn có một trạng thái dẫn xuất dựa trên trạng thái lưu trữ, ví dụ: đếm danh sách các mục, lọc bộ sưu tập hoặc sử dụng cùng một nhóm trạng thái dẫn xuất trong các mô-đun hoặc thành phần khác, bạn có thể xác định getters .

Mặt khác, đột biến là cách duy nhất chúng ta có thể thay đổi trạng thái. Các đột biến luôn đồng bộ và tải trọng là tùy chọn. Bạn có thể gọi một đột biến thông qua cam kết, tức là, MUTATION_NAMEhoặc payload. Nó luôn được khuyến khích để gọi các đột biến từ các hành động.

Các hành động có thể thực hiện các hoạt động không đồng bộ và thực hiện các đột biến. Trình xử lý hành động nhận được một đối tượng ngữ cảnh hiển thị cùng một tập hợp các phương thức hoặc thuộc tính trên phiên bản store.

Bạn có thể sử dụng context.getterscontext.stateđể có được trạng thái và context.commitgọi các đột biến. Bạn có thể gọi các trình xử lý hành động bằng cách sử dụng action-namepayloadvà chúng được gọi từ các hành động khác trong cửa hàng.

Sơ đồ mô-đun Vuex

Kiến trúc Vuex

Tạo mô-đun Vuex

Khi kích thước ứng dụng của bạn tăng lên, cửa hàng của bạn có thể trở nên cồng kềnh. Để ngăn chặn điều này, Vuex cho phép bạn chia cửa hàng thành các mô-đun . Mỗi mô-đun có thể chứa trạng thái, nhận diện, đột biến và hành động của riêng nó.

Ví dụ, hãy tạo một ứng dụng để quản lý danh sách việc cần làm. Đầu tiên, hãy tạo một mô-đun mới cho các hoạt động cần làm, mô-đun này chịu trách nhiệm nhận tất cả các mục cần làm và cập nhật trạng thái khi cần thiết.

Mục tiêu của chúng tôi là xây dựng mô-đun cho các ứng dụng quy mô vừa đến lớn, do đó, tốt hơn là nên chia các loại đột biến, hành động được gọi là chức năng và triển khai mô-đun thành các tệp riêng biệt:

  • mutation-types.ts: Chứa tất cả các tên hàm
  • actions.ts: Chịu trách nhiệm cho tất cả các hoạt động không đồng bộ
  • index.ts: Triển khai mô-đun
import { IToDo } from '@/types/todo';
import {Module, VuexModule, Mutation, Action} from 'vuex-module-decorators';
import TodoActions from './actions';
import * as mutationTypes from './mutation-types';

@Module({namespaced: true, name: "Todos"})
export class ToDoModule extends VuexModule {
  todos:Array<IToDo> = [];
  loading = false;
  get completedTodos(){
    return this.todos.filter((todo:IToDo)=> todo.completed);
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_STARTED]() {
    this.loading = true;
  }
  @Mutation
  \[mutationTypes.ON_FETCH_TODOS_SUCCESS\](data: Array<IToDo>) {
    this.loading = false;
    this.todos = data;
  }
  @Mutation
  [mutationTypes.ON_FETCH_TODOS_FAILED]() {
    this.loading = false;
    this.todos = [];
  }

  @Action({rawError: true})
  public async fetchTodos():Promise<void> {
      try {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_STARTED);
          const response: Array<IToDo> = await TodoActions.fetchTodos();
          this.context.commit(mutationTypes.ON_FETCH_TODOS_SUCCESS, response);
        } catch (error) {
          this.context.commit(mutationTypes.ON_FETCH_TODOS_FAILED);
        }
  }

}

Đoạn mã ở trên chứa cách triển khai sau:

  • fetchTodos Action: Tìm nạp các mục việc cần làm từ API REST và thực hiện các đột biến
  • ON_FETCH_TODOS_STARTEDđột biến: Cập nhật loadingthuộc tính trạng thái
  • ON_FETCH_TODOS_SUCCESSđột biến: Cập nhật todosmảng trạng thái
  • ON_FETCH_TODOS_FAILEDđột biến: Đặt lại todosvà cập nhật loadinglà sai
  • completedTodosgetter: Chỉ nhận các mục việc cần làm đã hoàn thành

Khởi tạo các bài kiểm tra

Chúng tôi sẽ sử dụng khuôn khổ Jest để thử nghiệm đơn vị ; Jest chỉ đơn giản là một khung kiểm tra JavaScript có thể dễ dàng cài đặt với bất kỳ trình quản lý gói dựa trên nút nào, như npm hoặc Yarn. Có một số lợi ích khi sử dụng Jest, ví dụ, các bài kiểm tra Jest chạy song song, bao gồm khả năng phủ mã tích hợp và hỗ trợ các bài kiểm tra riêng biệt, kiểm tra mô phỏng và ảnh chụp nhanh.

Bạn có thể khởi tạo thử nghiệm bằng cách tạo cửa hàng, gắn Vuex vào Vue và đăng ký cửa hàng. localVuelà hàm tạo Vue phạm vi mà chúng ta có thể thay đổi mà không ảnh hưởng đến hàm tạo Vue toàn cục. Đoạn mã dưới đây sẽ khởi tạo cửa hàng:

describe('Todos Module', function() {
    let store: any;
    let todosInstance: ToDoModule;

    beforeEach(function() {
      localVue.use(Vuex);
      store = new Vuex.Store({});
      registerStoreModules(store);
      todosInstance = getModule(ToDoModule, store);
    });

    it('should exists', function() {
      expect(todosInstance).toBeDefined();
    });
});

Kiểm tra các hành động

Trong todosmô-đun, chúng tôi đã tạo fetchTodoshành động tìm nạp dữ liệu từ API REST và lấp đầy trạng thái bằng cách sử dụng các đột biến. Vì REST API là một lệnh gọi bên ngoài, chúng ta có thể mô phỏng nó bằng cách sử dụng hàm Jest, sau đó xác thực xem nó có đang được gọi hay không và trạng thái đang được cập nhật:

it('fetchTodos action should fill todos state', async function() {
      // arrange
      const todosMocked = todos as Array<IToDo>;
       // act
      jest.spyOn(TodoActions, 'fetchTodos').mockImplementation(
        (): Promise<Array<IToDo>> => {
          return Promise.resolve(todosMocked);
        }
      );
      await todosInstance.fetchTodos();
      // assert
      expect(todosInstance.todos.length >0).toEqual(true);
      expect(TodoActions.fetchTodos).toHaveBeenCalled();
});

Kiểm tra getters

Các hàm Getter chỉ đơn giản là trả về đối tượng trạng thái. Trong ví dụ của chúng tôi, chúng tôi có một hàm getter, hàm completedTodosnày sẽ trả về các mục việc cần làm đã hoàn thành:

  it('completedTodos getter should return only completed todos', async function() {
      // arrange
      const completedTodos = todosInstance.completedTodos;
      // assert
      expect(completedTodos.every((todo:IToDo)=> todo.completed)).toEqual(true);
    });

Kiểm tra đột biến

Như chúng ta đã biết, đột biến là cách duy nhất để thay đổi trạng thái. Chúng tôi có thể kiểm tra sự ON_FETCH_TODOS_SUCCESSđột biến bằng cách gửi các nhiệm vụ cần làm giả và xác nhận xem trạng thái có được sửa đổi hay không.

Đoạn mã dưới đây dành cho  successđột biến. Điều tương tự cũng áp dụng cho các đột biến startederror:

it('ON_FETCH_TODOS_SUCCESS mutation should update given todos',  function() {
      // arrange 
      const todosTest = [
        {
          userId: 13,
          id: 12,
          title: "Move to new city",
          completed: false
        },
        {
          userId: 15,
          id: 21,
          title: "Finish a novel",
          completed: true
        },
      ];
      // act
      todosInstance.ON_FETCH_TODOS_SUCCESS(todosTest);
      // assert
      expect(todosInstance.todos.length).toEqual(2);
      expect(todosInstance.todos).toEqual(todosTest);
    });

Sự kết luận

Trong hướng dẫn này, chúng ta đã tìm hiểu về Vuex bằng cách tạo và thử nghiệm đơn vị mô-đun Vuex với TypeScript và Jest. Chúng tôi đã đề cập đến bốn khái niệm cốt lõi của cửa hàng Vuex, bao gồm trạng thái, getters, đột biến và hành động. Với quản lý trạng thái tập trung của Vuex, bạn có thể đơn giản hóa ứng dụng của mình và tận dụng lợi thế của kiến ​​trúc giống Flux.

Tôi hy vọng bạn đã học được điều gì đó mới và hãy để lại bình luận nếu bạn có bất kỳ câu hỏi nào. Chúc bạn viết mã vui vẻ! 

Nguồn: https://blog.logrocket.com/unit-testing-vuex-modules-jest/

 #jest #vuex 

Kiểm Tra đơn Vị Mô-đun Vuex Với Jest

Unit Testing Vuex Modules with Jest

If you’re building a medium to large-scale SPA, chances are you’ll run into situations where you want to better handle the state of your Vue components.

In any application, multiple components depend on the same piece of state. Let’s imagine that multiple actions from different components would like to mutate the same state. To overcome these challenges, Vuex helps us to maintain state across the application.

In this article, I’ll guide you through implementing a Vuex module in TypeScript, then unit testing it using Jest. The complete code for this tutorial is available at the vuex-test GitHub repository; feel free to fork it. Let’s get started!

See more at: https://blog.logrocket.com/unit-testing-vuex-modules-jest/

#jest #vuex 

Unit Testing Vuex Modules with Jest

Give A Simple Example Of Jest Test Case for React Testing ?

In this brief guide, We will share A Simple Example Of Jest Test Case for React Testing.

Let's write a test for a function that adds two numbers in sum.js file:

const sum = (a, b) => a + b

export default sum

Create a file named sum.test.js which contains actual test:

import sum from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

And then add the following section to your package.json:

{
  "scripts": {
    "test": "jest"
  }
}

Finally, run yarn test or npm test and Jest will print a result:

$ yarn test
PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (2ms)

Link: https://github.com/sudheerj/reactjs-interview-questions

#react #reactjs #javascript #jest

Give A Simple Example Of Jest Test Case for React Testing ?
Nat  Grady

Nat Grady

1658905560

The Easiest Way to Run and Debug Test Cases in Electron with Jest

jest-electron

Easiest way to run jest unit test cases in electron.

When we run unit test in Jest, it is actually running in the node environment, or virtual browser environment(e.g. JSDOM) mocked by NodeJS. Sometimes we need a lot of Jest mocks for running code with no throw, such as: jest-canvas-mock, jest-storage-mock, @jest/fake-timers and so on. This is solved by Jest-Electron.  

  1. Technological ecology of Jest.
  2. Complete and real browser environment.
  3. Multi-renderer for running performance.
  4. Running and debug is better then mock.

Installation

  • Add into devDependencies
$ npm i --save-dev jest-electron
  • Update Jest config
{
  "jest": {
+    "runner": "jest-electron/runner",
+    "testEnvironment": "jest-electron/environment"
  }
}

Notice: update the runner configure, not testRunner.

Related

Those will be helpful when run test case with jest-electron.

CI

Run test cases with jest-electron for continuous integration.

  • GitHub action

Running on macOS will be ok.

- runs-on: ubuntu-latest
+ runs-on: macOS-latest
  • travis

Update .travis.yml with electron supported.

language: node_js
node_js:
  - "8"
  - "9"
  - "10"
  - "11"
  - "12"
+ addons:
+   apt:
+     packages:
+       - xvfb
+ install:
+   - export DISPLAY=':99.0'
+   - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+   - npm install
script:
  - npm run test

Depending on your executor, you might need to disable sandbox and shared memory usage:

export JEST_ELECTRON_STARTUP_ARGS='--disable-dev-shm-usage --no-sandbox'
npm run test

Env

  • debug mode

Keep the electron browser window for debugging, set process env DEBUG_MODE=1.

DEBUG_MODE=1 jest
  • additional startup arguments

Run electron with arbitrary arguments.

JEST_ELECTRON_STARTUP_ARGS='--disable-dev-shm-usage'

Run electron with --no-sandbox, set process env JEST_ELECTRON_STARTUP_ARGS='--no-sandbox'.

JEST_ELECTRON_STARTUP_ARGS='--no-sandbox' jest

Author: Hustcc
Source Code: https://github.com/hustcc/jest-electron 
License: MIT license

#electron #jest #debugger 

The Easiest Way to Run and Debug Test Cases in Electron with Jest

Jest Preview: Never Debug FE Tests By Reading The HTML on Terminal

jest-preview

Debug your Jest tests. Effortlessly.🛠🖼

Why jest-preview

When writing tests using Jest, we usually debug by reading the HTML code. Sometimes, the HTML is too complicated to visualize the UI in our head. jest-preview initiates a server and serve your HTML in a browser, then you can see your actual UI visually, which helps you debug jest tests faster.

jest-preview is initially designed to work with jest and react-testing-library. The package is framework-agnostic, and you can use it with any testing libraries.

Features

How to use jest-preview in 2 lines of code

+import preview from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
+    preview.debug();
  });
});

Or:

+import { debug } from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
+    debug();
  });
});

You also need to start the Jest Preview Server by running the CLI jest-preview. Please continue to read Usage for the details instructions.

Examples

Feedback

Your feedback is very important to us. Please help jest-preview becomes a better software by submitting a feedback here.

Installation

See the Installation Guide on Jest Preview official website.

Usage

See the Usage Guide on Jest Preview official website.

Advanced configurations

Jest Preview comes with Pre-configured transformation. However, in more advanced use cases where you have custom code transformation, check out the Code Transformation Guide.

Upcoming features

  • Support more css-in-js libraries.
  • Multiple preview.
  • You name it.

Download details:
Author: nvh95
Source code: https://github.com/nvh95/jest-preview
License: MIT license

#next #nextjs #react #reactjs #jest

Jest Preview: Never Debug FE Tests By Reading The HTML on Terminal
Laura  Fox

Laura Fox

1658440380

The Utilities for Making Testing NestJS Applications Easier

A collection of Badass modules and utilities to help you level up your NestJS application.

 

PackageDescriptionVersionChangelog
@golevelup/nestjs-commonCommon types, mixinsversionchangelog
@golevelup/nestjs-discoveryDiscoveryModule for finding providers, controllers and method handlers from your NestJS app that have certain metadataversionchangelog
@golevelup/nestjs-rabbitmqA NestJS native module for RabbitMQ that supports both RPC and Publish/Subscribe messaging patternsversionchangelog
@golevelup/nestjs-modulesA Dynamic Module helper. Useful for configuring once and importing anywhere elseversionchangelog
@golevelup/nestjs-hasuraSuper charged Hasura Event Handlers and other utilities for seamlessly integrating Hasura with NestJSversionchangelog
@golevelup/nestjs-graphql-requestDependency Injection for GraphQLClient. Make type safe requests to third party GQL APIsversionchangelog
@golevelup/nestjs-webhooksMiddlewares and helpers for processing webhooksversionchangelog
@golevelup/nestjs-stripeStripe client and webhook processingversionchangelog

Contribute

Contributions welcome! Read the contribution guidelines first.

Download Details:
Author: golevelup
Source Code: https://github.com/golevelup/nestjs
License: MIT license

#nest #nestjs #node #javascript #jest

The Utilities for Making Testing NestJS Applications Easier
Hong  Nhung

Hong Nhung

1657283880

Cách Thiết Lập Môi Trường Kiểm Tra ứng Dụng TypeScript Với Jest

Cách thiết lập môi trường thử nghiệm của bạn

Có năm bước để thiết lập môi trường thử nghiệm cho ứng dụng typeScript của bạn và chúng được đánh dấu bên dưới:

  1. Cài đặt các khung và phụ thuộc: cài đặt Jest , ts-jest ts-node làm phụ thuộc phát triển bằng lệnh dưới đây:
npm i --save dev jest ts-jest ts-node
ts-jest is a dependency that allows you to use jest to test applications written in typeScript while ts-node is a typeScript REPL for node js.

2. Cài đặt định nghĩa kiểu: sau khi cài đặt thành công các khung như được chỉ ra trong lệnh npm ban đầu, hãy cài đặt định nghĩa kiểu cho Jest bằng lệnh dưới đây:

npm i --save dev @types/jest

3. Cấu hình jest: tạo một tệp cấu hình jest có phần mở rộng là typeScript trong thư mục gốc của dự án của bạn (như trong hình bên dưới).

jest.config.ts file in the root of a project.> jest.config.tsimport type { Config } from "@jest/types";export default async (): Promise<Config.InitialOptions> => {
  return {
    preset: "ts-jest",
     displayName: {
     name: "placeNameOfYourAppHere",
     color: "greenBright",
   },
   verbose: true,
   setupFiles: ["dotenv/config"],
   testMatch: ["**/**/*.test.ts"],
   testEnvironment: "node",
   detectOpenHandles: true,
   collectCoverage: true,
   transform: { "^.+\\.tsx?$": "ts-jest" },
   globalTeardown: "<rootDir>/src/tests/jest-globals-teardown.ts",
   forceExit: true,
 };
};

Bạn cũng có thể truy cập tài liệu khung jest để xem những cách khác có thể đạt được điều này.
Lưu ý rằng trong tệp jest.config.ts , có thuộc tính globalTeardown trỏ đến tệp jest-global-teardown.ts bên trong thư mục / src / tests . Jes t global teardown đang được thực thi sau khi thực thi bộ thử nghiệm. Điều này đơn giản có nghĩa là jest sẽ thoát ngay sau khi thực thi bộ / trường hợp thử nghiệm.

Để tạo một giọt toàn cục, hãy điều hướng vào / src và tạo một thư mục / tests , nơi chứa tệp jest-global-teardown.ts (như hình bên dưới). Theo tùy chọn, bạn có thể tạo các thư mục / helpers, / integration_tests/ unit_tests . Các thư mục này sẽ chứa các chức năng trợ giúp, kiểm tra tích hợp và kiểm tra đơn vị tương ứng.

jest-globals-teardown.ts file in a test folder.> jest-globals-teardown.tsexport default () => {
 process.exit(0);
};

4. Đặt lệnh npm kiểm tra: bước cuối cùng là đặt lệnh npm test scripts trong tệp package.json . Các lệnh này được đặt bên trong đối tượng “scripts” của tệp package.json cho phép bạn thực thi trình chạy thử nghiệm của khuôn khổ jest .

"scripts": {
  "test": "jest --runInBand",
  "test:watch": "jest --runInBand --watchAll",
}

- runInBand: bí danh:. -ichạy tất cả các thử nghiệm nối tiếp trong quy trình hiện tại, thay vì tạo một nhóm công nhân gồm các quy trình con chạy thử nghiệm. Điều này có thể hữu ích cho việc gỡ lỗi.

5. Định cấu hình môi trường nút của bạn: Đặt môi trường nút của bạn để kiểm tra như bên dưới:

> .env NODE_ENV='test'

Để chạy và thoát khỏi jest test runner ngay lập tức, hãy sử dụng lệnh:

npm run test

Để chạy và tiếp tục theo dõi thử nghiệm để tìm các thay đổi mà không cần thoát khỏi trình chạy thử, hãy sử dụng lệnh:

npm run test:watch

Trường hợp thử nghiệm đầu tiên của bạn

Cho đến nay, chúng tôi đã trình bày các bước để thiết lập môi trường thử nghiệm của bạn. Để tạo thử nghiệm đầu tiên của chúng tôi, hãy điều hướng vào / src / tests / unit_tests và sau đó tạo tệp test.test.ts có chứa một trường hợp thử nghiệm đơn giản như sau:

test("My first test", () => {
  const res = 1;
  expect(res).toBe(1);
});

Sau đó thực hiện chạy thử nghiệm bằng lệnh npm:

npm run test

Tất cả mọi thứ đều bình đẳng, người chạy thử nghiệm sẽ trả về một điểm vượt qua trong khi báo cáo thời gian chạy trường hợp thử nghiệm, số lượng bộ thử nghiệm và trường hợp thử nghiệm như được hiển thị bên dưới:

Người chạy thử nghiệm báo cáo trường hợp thử nghiệm đã thông qua.

NB: .test  sau tên tệp thử nghiệm của bạn và trước  phần mở rộng .ts là quan trọng, ví dụ: (nameOfFile. Test .ts). Nó báo hiệu rằng đây là một tệp thử nghiệm và bạn nên chạy nó như vậy. Nếu không có dấu hiệu rằng đây là một tệp thử nghiệm (với  .test ), người chạy jest sẽ trả về lỗi; “Không tìm thấy bài kiểm tra nào, đang thoát ra với mã 1”.

Liên kết: https://medium.com/faun/how-to-setupyour-typescript-app-test-enosystemwith-jest-b41c481a2c

#typescript #jest

Cách Thiết Lập Môi Trường Kiểm Tra ứng Dụng TypeScript Với Jest

Как настроить среду тестирования приложения TypeScript с помощью Jest

Как настроить тестовую среду

Существует пять шагов для настройки тестовой среды для вашего приложения typeScript, и они выделены ниже:

  1. Установите фреймворки и зависимости: установите Jest , ts-jest и ts-node в качестве зависимостей для разработки с помощью следующей команды:
npm i --save dev jest ts-jest ts-node
ts-jest is a dependency that allows you to use jest to test applications written in typeScript while ts-node is a typeScript REPL for node js.

2. Установите определение типа: после успешной установки фреймворков, как указано в начальной команде npm, установите определение типа для Jest с помощью следующей команды:

npm i --save dev @types/jest

3. Настройте jest: создайте файл конфигурации jest с расширением typeScript в корневом каталоге вашего проекта (как показано на изображении ниже).

jest.config.ts file in the root of a project.> jest.config.tsimport type { Config } from "@jest/types";export default async (): Promise<Config.InitialOptions> => {
  return {
    preset: "ts-jest",
     displayName: {
     name: "placeNameOfYourAppHere",
     color: "greenBright",
   },
   verbose: true,
   setupFiles: ["dotenv/config"],
   testMatch: ["**/**/*.test.ts"],
   testEnvironment: "node",
   detectOpenHandles: true,
   collectCoverage: true,
   transform: { "^.+\\.tsx?$": "ts-jest" },
   globalTeardown: "<rootDir>/src/tests/jest-globals-teardown.ts",
   forceExit: true,
 };
};

Вы также можете посетить документацию jest framework , чтобы увидеть другие способы достижения этого.
Обратите внимание, что в файле jest.config.ts есть свойство globalTeardown , указывающее на файл jest-globals-teardown.ts внутри папки /src/tests . Глобальный демонтаж Jest выполняется после выполнения набора тестов. Это просто означает, что шутка должна завершиться сразу после выполнения набора тестов/кейса.

Чтобы создать глобальный разрыв, перейдите в /src и создайте папку /tests , в которой будет находиться файл jest-globals-teardown.ts (как показано ниже). При желании вы можете создать папки /helpers , /integration_tests и /unit_tests . Эти папки будут содержать вспомогательные функции, интеграционные тесты и модульные тесты соответственно.

jest-globals-teardown.ts file in a test folder.> jest-globals-teardown.tsexport default () => {
 process.exit(0);
};

4. Задайте тестовые команды npm: последним шагом будет установка команды npm test scripts в файле package.json . Эти команды, размещенные внутри объекта «скрипты» файла package.json , позволяют вам запускать тест-раннер фреймворка jest .

"scripts": {
  "test": "jest --runInBand",
  "test:watch": "jest --runInBand --watchAll",
}

— runInBand: псевдоним: -i. запускать все тесты последовательно в текущем процессе, а не создавать рабочий пул дочерних процессов, которые запускают тесты. Это может быть полезно для отладки.

5. Настройте среду своего узла: Настройте среду своего узла для тестирования, как показано ниже:

> .env NODE_ENV='test'

Чтобы запустить и немедленно выйти из средства запуска тестов jest , используйте команду:

npm run test

Чтобы запустить и отслеживать изменения теста без выхода из бегуна тестов, используйте команду:

npm run test:watch

Ваш первый тестовый пример

До сих пор мы рассмотрели шаги по настройке вашей тестовой среды. Чтобы создать наш первый тест, перейдите в /src/tests/unit_tests, а затем создайте файл test.test.ts , содержащий простой тестовый пример:

test("My first test", () => {
  const res = 1;
  expect(res).toBe(1);
});

Затем запустите средство запуска тестов с помощью команды npm:

npm run test

При прочих равных средство выполнения тестов jest вернет результат, сообщая о времени выполнения тестового примера, количестве наборов тестов и тестовых случаях, как показано ниже:

Test runner сообщает о пройденном тестовом наборе.

NB: .test  после имени вашего тестового файла и перед  расширением .ts имеет важное значение, например (nameOfFile. test .ts). В шутку это сигнализирует отом, что это тестовый файл, и вы должны запустить его как таковой. Не указывая, что это тестовый файл (с  .test ), шутник вернет ошибку; «Тесты не найдены, выход с кодом 1».

Ссылка: https://medium.com/faun/how-to-setupyour-typescript-app-test-environmentwith-jest-b41c481a2c

#typescript #jest

Как настроить среду тестирования приложения TypeScript с помощью Jest
井上  康弘

井上 康弘

1657265760

如何使用 Jest 設置 TypeScript 應用程序測試環境

如何設置您的測試環境

為您的 typeScript 應用程序設置測試環境有五個步驟,它們在下面突出顯示:

  1. 安裝框架和依賴項:使用以下命令安裝Jest ts-jestts-node作為開發依賴項:
npm i --save dev jest ts-jest ts-node
ts-jest is a dependency that allows you to use jest to test applications written in typeScript while ts-node is a typeScript REPL for node js.

2. 安裝類型定義:按照初始 npm 命令的指示成功安裝框架後,使用以下命令為Jest安裝類型定義:

npm i --save dev @types/jest

3. 配置 jest:在項目的根目錄中創建一個帶有 typeScript 擴展名的jest配置文件(如下圖所示)。

jest.config.ts file in the root of a project.> jest.config.tsimport type { Config } from "@jest/types";export default async (): Promise<Config.InitialOptions> => {
  return {
    preset: "ts-jest",
     displayName: {
     name: "placeNameOfYourAppHere",
     color: "greenBright",
   },
   verbose: true,
   setupFiles: ["dotenv/config"],
   testMatch: ["**/**/*.test.ts"],
   testEnvironment: "node",
   detectOpenHandles: true,
   collectCoverage: true,
   transform: { "^.+\\.tsx?$": "ts-jest" },
   globalTeardown: "<rootDir>/src/tests/jest-globals-teardown.ts",
   forceExit: true,
 };
};

您還可以訪問jest 框架文檔以查看可以實現此目的的其他方法。
請注意,在jest.config.ts文件中,有一個globalTeardown屬性指向/src/tests文件夾中的jest-globals-teardown.ts文件。Jes t global teardown 是在測試套件執行後執行的。這僅僅意味著jest應該在執行測試套件/用例後立即退出。

要創建全局拆卸,請導航到/src 並創建一個/tests文件夾,該文件夾將容納jest-globals-teardown.ts文件(如下所示)。或者,您可以創建/helpers、 /integration_tests/unit_tests文件夾。這些文件夾將分別包含輔助函數、集成測試和單元測試。

jest-globals-teardown.ts file in a test folder.> jest-globals-teardown.tsexport default () => {
 process.exit(0);
};

4. 設置測試npm命令:最後一步是在package.json文件中設置npm測試腳本命令這些放置在package.json文件的“腳本”對像中的命令允許您執行jest框架的測試運行程序。

"scripts": {
  "test": "jest --runInBand",
  "test:watch": "jest --runInBand --watchAll",
}

— runInBand:別名:-i。在當前進程中連續運行所有測試,而不是創建運行測試的子進程的工作池。這對於調試很有用。

5. 配置你的節點環境:將你的節點環境設置為測試,如下所示:

> .env NODE_ENV='test'

要立即運行並退出jest測試運行程序,請使用以下命令:

npm run test

要在不退出測試運行器的情況下運行並繼續跟踪測試的更改,請使用以下命令:

npm run test:watch

你的第一個測試用例

到目前為止,我們已經介紹了設置測試環境的步驟。要創建我們的第一個測試,請導航到/src/tests/unit_tests,然後創建一個test.test.ts文件,其中包含一個簡單的測試用例,如下所示:

test("My first test", () => {
  const res = 1;
  expect(res).toBe(1);
});

然後使用 npm 命令執行測試運行器:

npm run test

在所有條件相同的情況下,jest測試運行器將在報告測試用例運行時間、測試套件數量和測試用例時返回通過,如下所示:

測試運行程序報告測試用例通過。

注意:測試文件名稱之後和 .ts擴展名之前的 .test很重要,例如(nameOfFile.test.ts)。它開玩笑說這是一個測試文件,你應該這樣運行它。在不表示這是一個測試文件(帶有 .test)的情況下, jest runner 將返回錯誤;“未找到測試,以代碼 1 退出”。

鏈接:https ://medium.com/faun/how-to-setupyour-typescript-app-test-environmentwith-jest-b41c481a2c

#typescript #jest

如何使用 Jest 設置 TypeScript 應用程序測試環境