🧪

SharePoint Framework で自動テストを実行してみる (2023 年最新版)

2023/08/11に公開

TypeScript

SharePoint

tech

はじめに

SharePoint Framework を使って (厳密には gulp test を使って) 自動テストを実施する記事を書いていました。

そのときの SharePoint Framework の最新バージョンは 1.11 だったのですが、それから 2 年が経過し、現時点での最新バージョンは 1.17.4 です。(なおプレビューとして 1.18 が出ています) この間に、Node のバージョンが新しくなったり、TypeScript のバージョンが新しくなったり、TSLint をやめて ESLint になったりと、さまざまな変更が入っており、以前の記事と状況が大きく変わっています。そこで、最新の 1.17.4 での手順を確認してみたいと思います。

サンプルコード

実行手順

インストールおよび確認

前提として最新の SharePoint Framework 開発環境にしたがっているものとします。

あとはコンポーネントを WebPart、テンプレートを React でプロジェクトを作成します。

yo @microsoft/sharepoint

プロジェクトが作成されたら Jest のバージョンを確認してみます。Jest はバージョンにより破壊的変更が入っているのでバージョン違いで動かないことはよくあります。Jest のバージョンを確認しておくことは大事です。

npx jest --version
25.4.0

あとは npm list で検索すると、babel-jest が入っていることが確認できます。これは使えそうですね。

npm list --all | grep -- -jest
│ │ │ │ ├─┬ babel-jest@25.5.1
│ │ │ │ │ ├─┬ babel-preset-jest@25.5.0
│ │ │ │ │ │ ├─┬ babel-plugin-jest-hoist@25.5.0

コードの修正

さて実際にコードを修正していきます。

テストのために必要なパッケージをインストールします。@testing-library/react の最新版は 14 ですが React のバージョンが合わないため 12 をインストールします。

npm install @babel/preset-env @babel/preset-react @babel/preset-typescript @testing-library/react@12 identity-obj-proxy --save-dev

tsconfig.json で Jest が型解決できるようにします。

    "types": [
      "webpack-env",
+     "jest"
    ],

babel.config.json を追加します。

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

jest.config.json を追加します。

{
  "testMatch": [
    "**/*.test.ts",
    "**/*.test.tsx"
  ],
  "transform": {
    "^.+\\.[tj]sx?$": "babel-jest"
  },
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/stylemock.js",
    "\\.(css|scss)$": "identity-obj-proxy"
  }
}

config/jest.json を追加します。

{
  "isEnabled": true,
  "coverage": false
}

__mocks__/stylemocks.js を追加します。

module.exports = '';

テストコードを追加します。

import * as React from 'react';

import { render } from '@testing-library/react';
import SampleApplication from './SampleApplication';

it('snapshot', () => {
  const params = {
    description: 'SampleApplication',
    isDarkTheme: false,
    environmentMessage: 'Unkwown',
    hasTeamsContext: false,
    userDisplayName: 'Megan Bowen'
  };
  const { asFragment } = render(<SampleApplication {...params} />);
  expect(asFragment).toMatchSnapshot();
});

実行結果

実行してみます。

npm run test

> sample-application@0.0.1 test
> gulp test

...
[00:00:00] Starting subtask 'jest'...
 PASS  lib/webparts/sample-application/components/SampleApplication.test.js
[00:00:00] Finished subtask 'jest' after 1.25 s
...

実行できてますね！ちなみにこの状態で npx jest を実行しても動作します。

おわりに

2 年前と比べて簡単になったなという印象です。以前はバージョン指定がかなりシビアで苦労したのですが、その点がかなり楽になりましたし、全体的にも困ることなく、普通の React プロジェクトで Jest を使えるようにした人であれば、すんなり実現できるのではないかと思います。