| 1 | # @lwc/jest-preset
|
| 2 |
|
| 3 | Tools to assist with testing Lightning Web Components (LWC) with Jest. This project provides 2 services: preset Jest configuration for testing Lightning web components, and stubs for common external libraries used in Lightning web components.
|
| 4 |
|
| 5 | ## Usage
|
| 6 |
|
| 7 | ### Jest Preset Configuration
|
| 8 |
|
| 9 | 1. Install `@lwc/synthetic-shadow`. This is a polyfill for ShadowRoot that was tailor-made for LWC.
|
| 10 |
|
| 11 | `yarn add --dev @lwc/synthetic-shadow`
|
| 12 |
|
| 13 | 2. Use this project's preset config. This maps to the settings in `jest-preset.json`. Any settings added to your project's own `jest` config will take precedence to entries in the preset.
|
| 14 |
|
| 15 | ```json
|
| 16 | {
|
| 17 | "jest": {
|
| 18 | "preset": "@lwc/jest-preset"
|
| 19 | }
|
| 20 | }
|
| 21 | ```
|
| 22 |
|
| 23 | 3. Update the `moduleNameMapper` entry in your Jest config to point to where your LWC components live. For example, use the following to map all components in the `example` and `other` namespaces:
|
| 24 |
|
| 25 | ```json
|
| 26 | {
|
| 27 | "moduleNameMapper": {
|
| 28 | "^(example|other)/(.+)$": "<rootDir>/src/test/modules/$1/$2/$2"
|
| 29 | }
|
| 30 | }
|
| 31 | ```
|
| 32 |
|
| 33 | 4. Create a `__tests__` inside the bundle of the LWC component under test.
|
| 34 | 5. Create a new test file in `__tests__` that follows the naming convention `<js-file-under-test>.test.js`. See an example in this projects `src/test` directory.
|
| 35 | 6. Write and run the Jest tests!
|