Commit c8275826 authored by Luke Bennett's avatar Luke Bennett

Add jest to frontend_testing docs

parent 5c80bbb3
...@@ -13,6 +13,42 @@ in the future. ...@@ -13,6 +13,42 @@ in the future.
See the [Testing Standards and Style Guidelines](index.md) page for more See the [Testing Standards and Style Guidelines](index.md) page for more
information on general testing practices at GitLab. information on general testing practices at GitLab.
## Jest
GitLab has started to migrate tests to the (Jest)[https://jestjs.io]
testing framework. You can read a [detailed evaluation](https://gitlab.com/gitlab-org/gitlab-ce/issues/49171)
of Jest compared to our use of Karma and Jasmine. In summary, it will allow us
to improve the performance and consistency of our frontend tests.
Jest tests can be found in `/spec/frontend` and `/ee/spec/frontend` in EE.
It is not yet a requirement to use Jest. You can view the
[epic](https://gitlab.com/groups/gitlab-org/-/epics/873) of issues
we need to solve before being able to use Jest for all our needs.
### Timeout error
The default timeout for Jest is set in
[`/spec/frontend/test_setup.js`](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/spec/frontend/test_setup.js).
If your test exceeds that time, it will fail.
If you cannot improve the performance of the tests, you can increase the timeout
for a specific test using
(`jest.setTimeout`)[https://jestjs.io/docs/en/jest-object#jestsettimeouttimeout].
```javascript
beforeAll(() => {
jest.setTimeout(500);
});
describe('Component', () => {
// ...
});
```
Remember that the performance of each test depends on the environment.
## Karma test suite ## Karma test suite
GitLab uses the [Karma][karma] test runner with [Jasmine] as its test GitLab uses the [Karma][karma] test runner with [Jasmine] as its test
...@@ -134,7 +170,7 @@ placeholders, and recalling when they are called and the arguments that are ...@@ -134,7 +170,7 @@ placeholders, and recalling when they are called and the arguments that are
passed to them. These tools should be used liberally, to test for expected passed to them. These tools should be used liberally, to test for expected
behavior, to mock responses, and to block unwanted side effects (such as a behavior, to mock responses, and to block unwanted side effects (such as a
method that would generate a network request or alter `window.location`). The method that would generate a network request or alter `window.location`). The
documentation for these methods can be found in the [jasmine introduction page](https://jasmine.github.io/2.0/introduction.html#section-Spies). documentation for these methods can be found in the [Jasmine introduction page](https://jasmine.github.io/2.0/introduction.html#section-Spies).
Sometimes you may need to spy on a method that is directly imported by another Sometimes you may need to spy on a method that is directly imported by another
module. GitLab has a custom `spyOnDependency` method which utilizes module. GitLab has a custom `spyOnDependency` method which utilizes
...@@ -168,7 +204,7 @@ export of a module who's import you want to stub, rather than an object which ...@@ -168,7 +204,7 @@ export of a module who's import you want to stub, rather than an object which
contains a method you wish to stub (if the module does not have a default contains a method you wish to stub (if the module does not have a default
export, one is be generated by the babel plugin). The second parameter is the export, one is be generated by the babel plugin). The second parameter is the
name of the import you wish to change. The result of the function is a Spy name of the import you wish to change. The result of the function is a Spy
object which can be treated like any other jasmine spy object. object which can be treated like any other Jasmine spy object.
Further documentation on the babel rewire pluign API can be found on Further documentation on the babel rewire pluign API can be found on
[its repository Readme doc](https://github.com/speedskater/babel-plugin-rewire#babel-plugin-rewire). [its repository Readme doc](https://github.com/speedskater/babel-plugin-rewire#babel-plugin-rewire).
...@@ -177,6 +213,14 @@ Further documentation on the babel rewire pluign API can be found on ...@@ -177,6 +213,14 @@ Further documentation on the babel rewire pluign API can be found on
If you cannot avoid using [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) in tests, please use the [Jasmine mock clock](https://jasmine.github.io/api/2.9/Clock.html). If you cannot avoid using [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) in tests, please use the [Jasmine mock clock](https://jasmine.github.io/api/2.9/Clock.html).
#### Migrating flaky Karma tests to Jest
Some of our Karma tests are flaky because they access the properties of a shared scope.
This also means that they are not easily parallelized.
Migrating flaky Karma tests to Jest will help significantly as each test is executed
in an isolated scope, improving performance and predictability.
### Vue.js unit tests ### Vue.js unit tests
See this [section][vue-test]. See this [section][vue-test].
...@@ -194,21 +238,21 @@ is sufficient (and saves you some time). ...@@ -194,21 +238,21 @@ is sufficient (and saves you some time).
### Live testing and focused testing ### Live testing and focused testing
While developing locally, it may be helpful to keep karma running so that you While developing locally, it may be helpful to keep Karma running so that you
can get instant feedback on as you write tests and modify code. To do this can get instant feedback on as you write tests and modify code. To do this
you can start karma with `yarn run karma-start`. It will compile the javascript you can start Karma with `yarn run karma-start`. It will compile the javascript
assets and run a server at `http://localhost:9876/` where it will automatically assets and run a server at `http://localhost:9876/` where it will automatically
run the tests on any browser which connects to it. You can enter that url on run the tests on any browser which connects to it. You can enter that url on
multiple browsers at once to have it run the tests on each in parallel. multiple browsers at once to have it run the tests on each in parallel.
While karma is running, any changes you make will instantly trigger a recompile While Karma is running, any changes you make will instantly trigger a recompile
and retest of the entire test suite, so you can see instantly if you've broken and retest of the entire test suite, so you can see instantly if you've broken
a test with your changes. You can use [jasmine focused][jasmine-focus] or a test with your changes. You can use [Jasmine focused][jasmine-focus] or
excluded tests (with `fdescribe` or `xdescribe`) to get karma to run only the excluded tests (with `fdescribe` or `xdescribe`) to get Karma to run only the
tests you want while you're working on a specific feature, but make sure to tests you want while you're working on a specific feature, but make sure to
remove these directives when you commit your code. remove these directives when you commit your code.
It is also possible to only run karma on specific folders or files by filtering It is also possible to only run Karma on specific folders or files by filtering
the run tests via the argument `--filter-spec` or short `-f`: the run tests via the argument `--filter-spec` or short `-f`:
```bash ```bash
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment