diff --git a/docs/guides/testing-async-components.md b/docs/guides/testing-async-components.md index afd442481..47111baa5 100644 --- a/docs/guides/testing-async-components.md +++ b/docs/guides/testing-async-components.md @@ -46,26 +46,22 @@ import { shallowMount } from '@vue/test-utils' import Foo from './Foo' jest.mock('axios') -test('Foo', () => { - it('fetches async when a button is clicked', () => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - expect(wrapper.vm.value).toBe('value') - }) +it('fetches async when a button is clicked', () => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + expect(wrapper.vm.value).toBe('value') }) ``` This test currently fails because the assertion is called before the promise in `fetchResults` resolves. Most unit test libraries provide a callback to let the runner know when the test is complete. Jest and Mocha both use `done`. We can use `done` in combination with `$nextTick` or `setTimeout` to ensure any promises resolve before the assertion is made. ``` js -test('Foo', () => { - it('fetches async when a button is clicked', (done) => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.value).toBe('value') - done() - }) +it('fetches async when a button is clicked', (done) => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + wrapper.vm.$nextTick(() => { + expect(wrapper.vm.value).toBe('value') + done() }) }) ``` @@ -82,13 +78,11 @@ import flushPromises from 'flush-promises' import Foo from './Foo' jest.mock('axios') -test('Foo', () => { - it('fetches async when a button is clicked', async () => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - await flushPromises() - expect(wrapper.vm.value).toBe('value') - }) +it('fetches async when a button is clicked', async () => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + await flushPromises() + expect(wrapper.vm.value).toBe('value') }) ``` diff --git a/docs/ja/guides/testing-async-components.md b/docs/ja/guides/testing-async-components.md index 9baa02455..4e17c2229 100644 --- a/docs/ja/guides/testing-async-components.md +++ b/docs/ja/guides/testing-async-components.md @@ -46,26 +46,22 @@ import { shallowMount } from '@vue/test-utils' import Foo from './Foo' jest.mock('axios') -test('Foo', () => { - it('fetches async when a button is clicked', () => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - expect(wrapper.vm.value).toBe('value') - }) +it('fetches async when a button is clicked', () => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + expect(wrapper.vm.value).toBe('value') }) ``` `fetchResults` 内の Promise が resolve する前にアサーションが呼ばれるので、このテストは現時点では失敗します。ほとんどのユニットテストライブラリはテストが完了したことをテストランナーに知らせるためのコールバック関数を提供します。Jest と Mocha は両方とも `done` を使います。アサーションが行われる前に確実に各 Promise が resolve するために `done` を `$nextTick` や `setTimeout` と組み合わせて使うことができます。 ``` js -test('Foo', () => { - it('fetches async when a button is clicked', (done) => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.value).toBe('value') - done() - }) +it('fetches async when a button is clicked', (done) => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + wrapper.vm.$nextTick(() => { + expect(wrapper.vm.value).toBe('value') + done() }) }) ``` @@ -82,13 +78,11 @@ import flushPromises from 'flush-promises' import Foo from './Foo' jest.mock('axios') -test('Foo', () => { - it('fetches async when a button is clicked', async () => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - await flushPromises() - expect(wrapper.vm.value).toBe('value') - }) +it('fetches async when a button is clicked', async () => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + await flushPromises() + expect(wrapper.vm.value).toBe('value') }) ``` diff --git a/docs/ru/guides/testing-async-components.md b/docs/ru/guides/testing-async-components.md index 29c5de119..1dcc86782 100644 --- a/docs/ru/guides/testing-async-components.md +++ b/docs/ru/guides/testing-async-components.md @@ -46,26 +46,22 @@ import { shallowMount } from '@vue/test-utils' import Foo from './Foo' jest.mock('axios') -test('Foo', () => { - it('делает асинхронный запрос при нажатии кнопки', () => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - expect(wrapper.vm.value).toBe('value') - }) +it('делает асинхронный запрос при нажатии кнопки', () => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + expect(wrapper.vm.value).toBe('value') }) ``` В настоящее время этот тест не будет успешно проходить, потому что проверка значения вызывается до разрешения промиса `fetchResults`. Большинство библиотек для модульного тестирования предоставляют коллбэк, чтобы предоставить возможность определять когда тест должен будет завершаться. Jest и Mocha используют `done`. Мы можем использовать `done` в комбинации с `$nextTick` или `setTimeout`, чтобы гарантировать, что любые промисы будут разрешены перед проверками. ``` js -test('Foo', () => { - it('делает асинхронный запрос при нажатии кнопки', (done) => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.value).toBe('value') - done() - }) +it('делает асинхронный запрос при нажатии кнопки', (done) => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + wrapper.vm.$nextTick(() => { + expect(wrapper.vm.value).toBe('value') + done() }) }) ``` @@ -82,13 +78,11 @@ import flushPromises from 'flush-promises' import Foo from './Foo' jest.mock('axios') -test('Foo', () => { - it('делает асинхронный запрос при нажатии кнопки', async () => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - await flushPromises() - expect(wrapper.vm.value).toBe('value') - }) +it('делает асинхронный запрос при нажатии кнопки', async () => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + await flushPromises() + expect(wrapper.vm.value).toBe('value') }) ``` diff --git a/docs/zh/guides/testing-async-components.md b/docs/zh/guides/testing-async-components.md index b6f1af946..296e18d4a 100644 --- a/docs/zh/guides/testing-async-components.md +++ b/docs/zh/guides/testing-async-components.md @@ -46,26 +46,22 @@ import { shallowMount } from '@vue/test-utils' import Foo from './Foo' jest.mock('axios') -test('Foo', () => { - it('fetches async when a button is clicked', () => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - expect(wrapper.vm.value).toBe('value') - }) +it('fetches async when a button is clicked', () => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + expect(wrapper.vm.value).toBe('value') }) ``` 现在这则测试用例会失败,因为断言在 `fetchResults` 中的 Promise 完成之前就被调用了。大多数单元测试库都提供一个回调来使得运行期知道测试用例的完成时机。Jest 和 Mocha 都是用了 `done`。我们可以和 `$nextTick` 或 `setTimeout` 结合使用 `done` 来确保任何 Promise 都会在断言之前完成。 ``` js -test('Foo', () => { - it('fetches async when a button is clicked', (done) => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.value).toBe('value') - done() - }) +it('fetches async when a button is clicked', (done) => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + wrapper.vm.$nextTick(() => { + expect(wrapper.vm.value).toBe('value') + done() }) }) ``` @@ -82,13 +78,11 @@ import flushPromises from 'flush-promises' import Foo from './Foo' jest.mock('axios') -test('Foo', () => { - it('fetches async when a button is clicked', async () => { - const wrapper = shallowMount(Foo) - wrapper.find('button').trigger('click') - await flushPromises() - expect(wrapper.vm.value).toBe('value') - }) +it('fetches async when a button is clicked', async () => { + const wrapper = shallowMount(Foo) + wrapper.find('button').trigger('click') + await flushPromises() + expect(wrapper.vm.value).toBe('value') }) ```