diff --git a/testing/unit-testing-jest/docs/assets/jest-preview.gif b/testing/unit-testing-jest/docs/assets/jest-preview.gif new file mode 100644 index 0000000..f8a7294 Binary files /dev/null and b/testing/unit-testing-jest/docs/assets/jest-preview.gif differ diff --git a/testing/unit-testing-jest/docs/assets/karma-preview.webp b/testing/unit-testing-jest/docs/assets/karma-preview.webp new file mode 100644 index 0000000..a5b3c8a Binary files /dev/null and b/testing/unit-testing-jest/docs/assets/karma-preview.webp differ diff --git a/testing/unit-testing-jest/docs/migrating-to-jest.md b/testing/unit-testing-jest/docs/migrating-to-jest.md new file mode 100644 index 0000000..5de2eaa --- /dev/null +++ b/testing/unit-testing-jest/docs/migrating-to-jest.md @@ -0,0 +1,118 @@ +## Migrating your Angular project from Karma & Jasmine to Jest: + +Your projects will use Karma and Jasmine by default if you use the [Angular schematics](https://angular.io/guide/schematics). However, the migration is pretty simple. Let's check what we need to do: + +For this example, I'm going to use a basic Angular project created with the `ng new` schematics: + +Then, if I run the command: +```bash +npm run test +``` +I'll get: + +![karma-preview](./assets/karma-preview.webp "Karma preview"); + +As you can see, all my test cases are running and passing without any problems. The idea at the end of the migration is to get the same result but using Jest. + +Let's start with the migration: + +1. Installing the jest dev dependencies +```bash +npm install jest jest-preset-angular @types/jest @angular-builders/jest --save-dev +``` + +2. Creating the jest configuration file + +In your root folder, create a file called: `jest.config.js` and add the following configuration: + +```javascript +module.exports = { + preset: 'jest-preset-angular', + collectCoverage: true, + coverageReporters: ['text'], + roots: ['/src/'], + testMatch: ['**/+(*.)+(spec).+(ts)'], + setupFilesAfterEnv: ['/src/test.ts'], + collectCoverage: true, + coverageReporters: ['html', 'text'] +}; +``` +This configuration will show all the relevant information on the command line when you run the test command. + +3. In your `package.json` let's update the test script: + +```json +{ + ... + "scripts": { + ... + "test": "jest" + ... + }, + ... +} +``` + +4. Update the global test file. + +Go to `src/test.ts` and replace all the content with: + +```typescript +import 'jest-preset-angular/setup-jest'; + +Object.defineProperty(window, 'CSS', {value: null}); +Object.defineProperty(window, 'getComputedStyle', { + value: () => { + return { + display: 'none', + appearance: ['-webkit-appearance'] + }; + } +}); + +Object.defineProperty(document, 'doctype', { + value: '' +}); + +Object.defineProperty(document.body.style, 'transform', { + value: () => { + return { + enumerable: true, + configurable: true + }; + } +}); +``` +This file will refer to Jest and not to Karma. + +5. Update the `angular.json` file: + +```json +"projects": { + ... + "[your-project]": { + ... + "architect": { + ... + "test": { + "builder": "@angular-builders/jest:run" + ... +``` + +6. Uninstall Karma & Jasmine In order to get rid of all the Karma & Jasmine dependencies let's run: + +```bash +npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter @types/jasmine jasmine-core karma-coverage +``` + +7. Finally, you could delete the `karma.conf.js` file. + +Now, let's run +```bash +npm run test +``` +And you should get something like this: + +![jest-preview](./assets/jest-preview.gif "Jest preview"); + +That's it, we just migrate Jest into an existing Angular project. All the code can be found in this [Repository](https://github.com/Andres2D/angular-jest-migration). Go to the branch `jest-migration` to see the final result. diff --git a/testing/unit-testing-jest/docs/unit-test-jest.md b/testing/unit-testing-jest/docs/unit-test-jest.md index 267e6b1..e63c0c6 100644 --- a/testing/unit-testing-jest/docs/unit-test-jest.md +++ b/testing/unit-testing-jest/docs/unit-test-jest.md @@ -6,6 +6,7 @@ - [Benefits](./introduction.md#benefits) - [Options to test?](./options-to-test.md) - [Jest](./jest.md) +- [Migrating to jest](./migrating-to-jest.md) - [Basic structure of a test](./test-structure.md) - [Jest hooks](./jest-hooks.md) - [Repeating setUp](./jest-hooks.md#repeating-setup)