Skip to content

docs: update Jest website links (fix #1133) #1134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 7, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/guides/choosing-a-test-runner.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ There are many popular JavaScript test runners, and Vue Test Utils works with al

There are a few things to consider when choosing a test runner though: feature set, performance, and support for single-file component (SFC) pre-compilation. After carefully comparing existing libraries, here are two test runners that we recommend:

- [Jest](https://facebook.github.io/jest/docs/en/getting-started.html#content) is the most fully featured test runner. It requires the least configuration, sets up JSDOM by default, provides built-in assertions, and has a great command line user experience. However, you will need a preprocessor to be able to import SFC components in your tests. We have created the `vue-jest` preprocessor which can handle most common SFC features, but it currently does not have 100% feature parity with `vue-loader`.
- [Jest](https://jestjs.io/docs/en/getting-started.html#content) is the most fully featured test runner. It requires the least configuration, sets up JSDOM by default, provides built-in assertions, and has a great command line user experience. However, you will need a preprocessor to be able to import SFC components in your tests. We have created the `vue-jest` preprocessor which can handle most common SFC features, but it currently does not have 100% feature parity with `vue-loader`.

- [mocha-webpack](https://github.com/zinserjan/mocha-webpack) is a wrapper around webpack + Mocha, but with a more streamlined interface and watch mode. The benefits of this setup is that we can get complete SFC support via webpack + `vue-loader`, but it requires more configuration upfront.

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/testing-async-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

To simplify testing, Vue Test Utils applies DOM updates _synchronously_. However, there are some techniques you need to be aware of when testing a component with asynchronous behavior such as callbacks or promises.

One of the most common asynchronous behaviors is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example uses Jest to run the test and to mock the HTTP library `axios`. More about Jest manual mocks can be found [here](https://facebook.github.io/jest/docs/en/manual-mocks.html#content).
One of the most common asynchronous behaviors is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example uses Jest to run the test and to mock the HTTP library `axios`. More about Jest manual mocks can be found [here](https://jestjs.io/docs/en/manual-mocks.html#content).

The implementation of the `axios` mock looks like this:

Expand Down
16 changes: 8 additions & 8 deletions docs/guides/testing-single-file-components-with-jest.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

> An example project for this setup is available on [GitHub](https://github.com/vuejs/vue-test-utils-jest-example).

Jest is a test runner developed by Facebook, aiming to deliver a battery-included unit testing solution. You can learn more about Jest on its [official documentation](https://facebook.github.io/jest/).
Jest is a test runner developed by Facebook, aiming to deliver a battery-included unit testing solution. You can learn more about Jest on its [official documentation](https://jestjs.io/).

#### Setting up Jest

Expand Down Expand Up @@ -122,15 +122,15 @@ Example `.babelrc`:

### Placing Test Files

By default, Jest will recursively pick up all files that have a `.spec.js` or `.test.js` extension in the entire project. If this does not fit your needs, it's possible [to change the `testRegex`](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string) in the config section in the `package.json` file.
By default, Jest will recursively pick up all files that have a `.spec.js` or `.test.js` extension in the entire project. If this does not fit your needs, it's possible [to change the `testRegex`](https://jestjs.io/docs/en/configuration.html#testregex-string-array-string) in the config section in the `package.json` file.

Jest recommends creating a `__tests__` directory right next to the code being tested, but feel free to structure your tests as you see fit. Just beware that Jest would create a `__snapshots__` directory next to test files that performs snapshot testing.

### Coverage

Jest can be used to generate coverage reports in multiple formats. The following is a simple example to get started with:

Extend your `jest` config (usually in `package.json` or `jest.config.js`) with the [`collectCoverage`](https://facebook.github.io/jest/docs/en/configuration.html#collectcoverage-boolean) option, and then add the [`collectCoverageFrom`](https://facebook.github.io/jest/docs/en/configuration.html#collectcoveragefrom-array) array to define the files for which coverage information should be collected.
Extend your `jest` config (usually in `package.json` or `jest.config.js`) with the [`collectCoverage`](https://jestjs.io/docs/en/configuration.html#collectcoverage-boolean) option, and then add the [`collectCoverageFrom`](https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array) array to define the files for which coverage information should be collected.

```json
{
Expand All @@ -142,7 +142,7 @@ Extend your `jest` config (usually in `package.json` or `jest.config.js`) with t
}
```

This will enable coverage reports with the [default coverage reporters](https://facebook.github.io/jest/docs/en/configuration.html#coveragereporters-array-string). You can customise these with the `coverageReporters` option:
This will enable coverage reports with the [default coverage reporters](https://jestjs.io/docs/en/configuration.html#coveragereporters-array-string). You can customise these with the `coverageReporters` option:

```json
{
Expand All @@ -153,11 +153,11 @@ This will enable coverage reports with the [default coverage reporters](https://
}
```

Further documentation can be found in the [Jest configuration documentation](https://facebook.github.io/jest/docs/en/configuration.html#collectcoverage-boolean), where you can find options for coverage thresholds, target output directories, etc.
Further documentation can be found in the [Jest configuration documentation](https://jestjs.io/docs/en/configuration.html#collectcoverage-boolean), where you can find options for coverage thresholds, target output directories, etc.

### Example Spec

If you are familiar with Jasmine, you should feel right at home with Jest's [assertion API](https://facebook.github.io/jest/docs/en/expect.html#content):
If you are familiar with Jasmine, you should feel right at home with Jest's [assertion API](https://jestjs.io/docs/en/expect.html#content):

```js
import { mount } from '@vue/test-utils'
Expand All @@ -173,7 +173,7 @@ describe('Component', () => {

### Snapshot Testing

When you mount a component with Vue Test Utils, you get access to the root HTML element. This can be saved as a snapshot for [Jest snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html):
When you mount a component with Vue Test Utils, you get access to the root HTML element. This can be saved as a snapshot for [Jest snapshot testing](https://jestjs.io/docs/en/snapshot-testing.html):

```js
test('renders correctly', () => {
Expand Down Expand Up @@ -205,5 +205,5 @@ Then configure it in `package.json`:

- [Example project for this setup](https://github.com/vuejs/vue-test-utils-jest-example)
- [Examples and slides from Vue Conf 2017](https://github.com/codebryo/vue-testing-with-jest-conf17)
- [Jest](https://facebook.github.io/jest/)
- [Jest](https://jestjs.io/)
- [Babel preset env](https://github.com/babel/babel-preset-env)
4 changes: 2 additions & 2 deletions docs/guides/using-with-typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ The next step is to add Jest to the project.

### Setting up Jest

Jest is a test runner developed by Facebook, aiming to deliver a battery-included unit testing solution. You can learn more about Jest on its [official documentation](https://facebook.github.io/jest/).
Jest is a test runner developed by Facebook, aiming to deliver a battery-included unit testing solution. You can learn more about Jest on its [official documentation](https://jestjs.io/).

Install Jest and Vue Test Utils:

Expand Down Expand Up @@ -154,4 +154,4 @@ That's all we need to do to get TypeScript and Vue Test Utils working together!
### Resources

- [Example project for this setup](https://github.com/vuejs/vue-test-utils-typescript-example)
- [Jest](https://facebook.github.io/jest/)
- [Jest](https://jestjs.io/)
2 changes: 1 addition & 1 deletion docs/guides/using-with-vuex.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ What’s happening here? First we tell Vue to use Vuex with the `localVue.use` m

We then make a mock store by calling `new Vuex.Store` with our mock values. We only pass it the actions, since that’s all we care about.

The actions are [jest mock functions](https://facebook.github.io/jest/docs/en/mock-functions.html). These mock functions give us methods to assert whether the actions were called or not.
The actions are [jest mock functions](https://jestjs.io/docs/en/mock-functions.html). These mock functions give us methods to assert whether the actions were called or not.

We can then assert in our tests that the action stub was called when expected.

Expand Down
2 changes: 1 addition & 1 deletion docs/ja/guides/choosing-a-test-runner.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

ですが、テストランナを選択する際には、機能セット、パフォーマンス、および単一ファイルコンポーネント (SFC) の事前コンパイルのサポートなどを考慮すべきです。既存のライブラリを慎重に比較した上で、以下の 2 つのテストランナをお勧めします:

- [Jest](https://facebook.github.io/jest/docs/en/getting-started.html#content) は最も充実したテストランナです。最小の設定が必要で、デフォルトで JSDOM を設定し、組み込みの検証を提供し、コマンドラインのユーザーエクスペリエンスが優れています。ただし、テストで SFC コンポーネントをインポートできるようにするには、プリプロセッサが必要です。最も一般的な SFC 機能を処理できる `vue-jest` プリプロセッサを作成しましたが、現在 `vue-loader` と 100% 同じ機能を持っていません。
- [Jest](https://jestjs.io/docs/en/getting-started.html#content) は最も充実したテストランナです。最小の設定が必要で、デフォルトで JSDOM を設定し、組み込みの検証を提供し、コマンドラインのユーザーエクスペリエンスが優れています。ただし、テストで SFC コンポーネントをインポートできるようにするには、プリプロセッサが必要です。最も一般的な SFC 機能を処理できる `vue-jest` プリプロセッサを作成しましたが、現在 `vue-loader` と 100% 同じ機能を持っていません。

- [mocha-webpack](https://github.com/zinserjan/mocha-webpack) は webpack + Mocha のラッパですが、より合理的なインタフェースと watch モードを備えています。この設定のメリットは、webpack + `vue-loader` を使用して完全な SFC サポートを得ることができるということですが、より多くの設定を行う必要があります。

Expand Down
2 changes: 1 addition & 1 deletion docs/ja/guides/testing-async-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

テストをシンプルにするために、 `vue-test-utils` は DOM の更新を同期的に適用します。しかし、コールバックや Promise のようなコンポーネントの非同期動作をテストする場合、いくつかのテクニックを知っておく必要があります。

よくある非同期動作の 1 つとして API 呼び出しと Vuex の action があります。以下の例は API 呼び出しをするメソッドをテストする方法を示しています。この例は HTTP のライブラリである `axios` をモックしてテストを実行するために Jest を使っています。Jest のモックの詳細は[ここ](https://facebook.github.io/jest/docs/en/manual-mocks.html#content)にあります。
よくある非同期動作の 1 つとして API 呼び出しと Vuex の action があります。以下の例は API 呼び出しをするメソッドをテストする方法を示しています。この例は HTTP のライブラリである `axios` をモックしてテストを実行するために Jest を使っています。Jest のモックの詳細は[ここ](https://jestjs.io/docs/en/manual-mocks.html#content)にあります。

`axios` のモックの実装はこのようにします。

Expand Down
16 changes: 8 additions & 8 deletions docs/ja/guides/testing-single-file-components-with-jest.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

> このセットアップのサンプルプロジェクトは、 [GitHub](https://github.com/vuejs/vue-test-utils-jest-example) にあります。

Jest は Facebook が開発したテストランナであり、ユニットテストソリューションの提供を目指しています。 Jest の詳細については、[公式ドキュメント](https://facebook.github.io/jest/)を参照してください。
Jest は Facebook が開発したテストランナであり、ユニットテストソリューションの提供を目指しています。 Jest の詳細については、[公式ドキュメント](https://jestjs.io/)を参照してください。

### Jest のセットアップ

Expand Down Expand Up @@ -120,15 +120,15 @@ webpack で `babel-preset-env` を使用するとした場合、webpack は ES M

### テストファイルの配置

デフォルトでは、Jest はプロジェクト全体で `.spec.js` または `.test.js` 拡張子を持つすべてのファイルを再帰的に取得します。これがあなたのニーズに合わない場合は、`package.json` ファイルの config セクションで[testRegex を変更する](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string)ことが可能です。
デフォルトでは、Jest はプロジェクト全体で `.spec.js` または `.test.js` 拡張子を持つすべてのファイルを再帰的に取得します。これがあなたのニーズに合わない場合は、`package.json` ファイルの config セクションで[testRegex を変更する](https://jestjs.io/docs/en/configuration.html#testregex-string-array-string)ことが可能です。

Jest は、テスト対象のコードのすぐ隣に`__tests__`ディレクトリを作成することを推奨していますが、適切にテストを構造化することは自由です。 Jest がスナップショットテストを実行するテストファイルの隣に`__snapshots__`ディレクトリを作成することに注意してください。

### カバレッジ

Jest は複数のフォーマットでカバレッジを取ることができます。 以下はそれをするための簡単な例です。

`jest` の設定 (普通は `package.json` か  `jest.config.js`) に  [collectCoverage](https://facebook.github.io/jest/docs/en/configuration.html#collectcoverage-boolean) オプションを加えます。それから、カバレッジを収集する対象のファイルを [collectCoverageFrom](https://facebook.github.io/jest/docs/en/configuration.html#collectcoveragefrom-array) に配列で定義します。
`jest` の設定 (普通は `package.json` か  `jest.config.js`) に  [collectCoverage](https://jestjs.io/docs/en/configuration.html#collectcoverage-boolean) オプションを加えます。それから、カバレッジを収集する対象のファイルを [collectCoverageFrom](https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array) に配列で定義します。

```json
{
Expand All @@ -140,7 +140,7 @@ Jest は複数のフォーマットでカバレッジを取ることができま
}
```

[デフォルトのカバレッジレポーター](https://facebook.github.io/jest/docs/en/configuration.html#coveragereporters-array-string)のカバレッジレポートは有効になります。 `coverageReporters` オプションでそれらをカスタマイズすることができます。
[デフォルトのカバレッジレポーター](https://jestjs.io/docs/en/configuration.html#coveragereporters-array-string)のカバレッジレポートは有効になります。 `coverageReporters` オプションでそれらをカスタマイズすることができます。

```json
{
Expand All @@ -151,11 +151,11 @@ Jest は複数のフォーマットでカバレッジを取ることができま
}
```

より詳しい情報は [Jest configuration documentation](https://facebook.github.io/jest/docs/en/configuration.html#collectcoverage-boolean) にあります。 カバレッジの閾値やターゲットを出力するディレクトリなどのオプションが記載されています。
より詳しい情報は [Jest configuration documentation](https://jestjs.io/docs/en/configuration.html#collectcoverage-boolean) にあります。 カバレッジの閾値やターゲットを出力するディレクトリなどのオプションが記載されています。

### Spec の例

あなたが Jasmine をよく知っているなら、Jest の [assertion API](https://facebook.github.io/jest/docs/en/expect.html#content)は自宅のように感じるはずです。
あなたが Jasmine をよく知っているなら、Jest の [assertion API](https://jestjs.io/docs/en/expect.html#content)は自宅のように感じるはずです。

```js
import { mount } from '@vue/test-utils'
Expand All @@ -171,7 +171,7 @@ describe('Component', () => {

### スナップショットテスト

Vue Test Utils でコンポーネントをマウントすると、コンポーネントのルート HTML 要素にアクセスすることができます。 [Jest のスナップショットテスト](https://facebook.github.io/jest/docs/en/snapshot-testing.html)で使用するためにこれを保存することができます。
Vue Test Utils でコンポーネントをマウントすると、コンポーネントのルート HTML 要素にアクセスすることができます。 [Jest のスナップショットテスト](https://jestjs.io/docs/en/snapshot-testing.html)で使用するためにこれを保存することができます。

```js
test('renders correctly', () => {
Expand Down Expand Up @@ -203,5 +203,5 @@ npm install --save-dev jest-serializer-vue

- [このセットアップのプロジェクト例](https://github.com/vuejs/vue-test-utils-jest-example)
- [Vue Conf 2017 のスライド](https://github.com/codebryo/vue-testing-with-jest-conf17)
- [Jest](https://facebook.github.io/jest/)
- [Jest](https://jestjs.io/)
- [Babel preset env](https://github.com/babel/babel-preset-env)
4 changes: 2 additions & 2 deletions docs/ja/guides/using-with-typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Vue と TypeScript を一緒に使うためのセットアップの詳細は、

### Jest のセットアップ

Jest はバッテリー付属のユニットテストソリューションを提供するために Facebook が開発したテストランナです。 Jest の詳細については[公式ドキュメント](https://facebook.github.io/jest/) を参照してください。
Jest はバッテリー付属のユニットテストソリューションを提供するために Facebook が開発したテストランナです。 Jest の詳細については[公式ドキュメント](https://jestjs.io/) を参照してください。

Jest と Vue Test Utils をインストールします。

Expand Down Expand Up @@ -154,4 +154,4 @@ describe('HelloWorld.vue', () => {
### リソース

- [この記事のサンプルプロジェクト](https://github.com/vuejs/vue-test-utils-typescript-example)
- [Jest](https://facebook.github.io/jest/)
- [Jest](https://jestjs.io/)
2 changes: 1 addition & 1 deletion docs/ja/guides/using-with-vuex.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ describe('Actions.vue', () => {

次に、新しい `Vuex.store` をモックした値で呼び出すことによってモックのストアを作成します。それをアクションに渡すだけです。それが気にしなければならないことの全てだからです。

アクションは、[Jest のモック関数](https://facebook.github.io/jest/docs/en/mock-functions.html)です。これらモック関数は、アクションが呼び出されたかどうかを検証するメソッドを提供します。
アクションは、[Jest のモック関数](https://jestjs.io/docs/en/mock-functions.html)です。これらモック関数は、アクションが呼び出されたかどうかを検証するメソッドを提供します。

アクションのスタブが期待どおりに呼び出されたことを検証することができます。

Expand Down
Loading