diff options
Diffstat (limited to 'doc/development/testing_guide/frontend_testing.md')
| -rw-r--r-- | doc/development/testing_guide/frontend_testing.md | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/doc/development/testing_guide/frontend_testing.md b/doc/development/testing_guide/frontend_testing.md index fee59c60f79..28fe63f1fb4 100644 --- a/doc/development/testing_guide/frontend_testing.md +++ b/doc/development/testing_guide/frontend_testing.md @@ -115,6 +115,37 @@ describe('Component', () => { Remember that the performance of each test depends on the environment. +### Timout error due to async components + +If your component is fetching some other components asynchroneously based on some conditions, it might happen so that your Jest suite for this component will become flaky timing out from time to time. + +```javascript +// ide.vue +export default { + components: { + 'error-message': () => import('./error_message.vue'), + 'gl-button': () => import('@gitlab/ui/src/components/base/button/button.vue'), + ... +}; +``` + +To address this issue, you can "help" Jest by stubbing the async components so that Jest would not need to fetch those asynchroneously at the run-time. + +```javascript +// ide_spec.js +import { GlButton } from '@gitlab/ui'; +import ErrorMessage from '~/ide/components/error_message.vue'; +... +return shallowMount(ide, { + ... + stubs: { + ErrorMessage, + GlButton, + ... + }, +}) +``` + ## What and how to test Before jumping into more gritty details about Jest-specific workflows like mocks and spies, we should briefly cover what to test with Jest. |