使Angular能夠使用Jest

2 年 ago

科, 雅

2 minutes

首先

最近在接触 React 的同时尝试了一下 Jest，发现非常舒适，所以也想在 Angular 上试试看。
暂时先试试看能不能跑起来。

太长了，不看。

源代码

安装

在开始创建项目之前，先安装所需的软件包。
安装步骤如下：

$ npm install -g @briebug/jest-schematic
# あとはいつも通りプロジェクトを作って
$ ng new ng-jest
> 聞かれるのはお好みで
$ cd ng-jest
# さっきインストールしたパッケージを使ってjestに変える
$ ng g @briebug/jest-schematic:add
$ ng add @briebug/jest-schematic
> karma用のファイルが削除され、jest用のファイルが作成される

修改tsconfig.spec.json

将 types 中的 jasmine 更改为 Jest。
即使不进行更改也可以一快运行。

...
"types": [
    "jest",
    "node"
],
...

尝试移动一下

只要到这一步，执行 npm test 就可以运行使用 jest 进行的测试了。

$ npm test
> > ng-jest@0.0.0 test .../ng-jest
> > jest
>  PASS  src/app/app.component.spec.ts
>  AppComponent
>     ✓ should create the app (132ms)
>     ✓ should have as title 'ng-jest' (30ms)
>     ✓ should render title in a h1 tag (28ms)
> Test Suites: 1 passed, 1 total
> Tests:       3 passed, 3 total
> Snapshots:   0 total
> Time:        2.808s, estimated 5s
> Ran all test suites.

顺便提一下，ng test无法运行。
默认情况下，尝试使用karma会失败。

$ ng test
> An unhandled exception occurred: Cannot find module 'karma'
> Require stack:
> ...

附加内容：如果非要在ng test中运行，请问原因是什么？

需要安装软件包并对angular.json进行修改。
安装和修改angular.json的步骤如下。

# @types/jestはなくても可
$ npm i -D jest @angular-builders/jest  @types/jest

...
"test": {
    // @angular-devkit/build-angular:karmaを下記に変更
    "builder": "@angular-builders/jest:run",
...

尝试进行快照测试。

既然已经使用 Jest，所以就顺便尝试一下快照测试。
暂时先添加快照测试的项并进行执行。

it('snapshot test', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled).toMatchSnapshot();
});

如果__snapshots__文件夹中有一个名为app.component.spec.ts.snap的文件，那就可以了。
该文件的内容如下所示。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AppComponent snapshot test 1`] = `
<div
  id="root3"
  ng-version="8.2.9"
>
  <div
    style="text-align:center"
  >
    <h1>
       Welcome to ng-jest! 
    </h1>
    <img
      alt="Angular Logo"
      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
      width="300"
    />
  </div>
  <h2>
    Here are some links to help you start: 
  </h2>
  <ul>
    <li>
      <h2>
        <a
          href="https://angular.io/tutorial"
          rel="noopener"
          target="_blank"
        >
          Tour of Heroes
        </a>
      </h2>
    </li>
    <li>
      <h2>
        <a
          href="https://angular.io/cli"
          rel="noopener"
          target="_blank"
        >
          CLI Documentation
        </a>
      </h2>
    </li>
    <li>
      <h2>
        <a
          href="https://blog.angular.io/"
          rel="noopener"
          target="_blank"
        >
          Angular blog
        </a>
      </h2>
    </li>
  </ul>
</div>
`;

如果想要消除测试代码警告，可以通过更改代码的方式来避免测试失败。

如果添加”jest”导入的话就可以了。
虽然这可能不是一个正规的解决办法，但是暂时用这个方法可以解决，就先这样吧。

总结

我希望以Angular使用Jest。因为它能生成快照并且给出易于理解的信息（我认为）。所以，我想以后都使用Jest。就到这里，谢谢大家。

请参考以下网站

AngularのテスティングフレームワークにJestを利用する