From 1587376a376684f09bd5e9bec876f336f412aa8a Mon Sep 17 00:00:00 2001 From: Amy Haywood Dutton Date: Tue, 20 Aug 2024 18:08:30 -0500 Subject: [PATCH] [gh11317] Added documentation for working with Jest and Alias Paths (#11323) Issue [11317](https://github.com/redwoodjs/redwood/issues/11317) ## Feature description I ran into errors when I created an alias path, and then tested that component within Jest. Jest needs to know about your alias paths. --------- Co-authored-by: Josh GM Walker <56300765+Josh-Walker-GM@users.noreply.github.com> --- docs/docs/typescript/introduction.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/docs/typescript/introduction.md b/docs/docs/typescript/introduction.md index 7cfe1732f8ae..7ee4ac51d44f 100644 --- a/docs/docs/typescript/introduction.md +++ b/docs/docs/typescript/introduction.md @@ -132,3 +132,22 @@ import { CustomModal } from '@adminUI/CustomModal' 1. **Improved code readability**, by abstracting complex directory hierarchies, and having meaningful names for your imports. 1. **Code maintainability**, aliases allow you to decouple your code from the file structure and more easily move files around, as they are not tied to the longer path. 1. **Reduce boilerplate**, no more `../../src/components/modules/admin/common/ui/` 😮‍💨 + +When you start writing tests for components that contain alias paths, you will need to add the following to your Jest configuration in `jest.config.js`: + +```js +const config = { + rootDir: '../', + preset: '@redwoodjs/testing/config/jest/web', + moduleNameMapper: { + '^@adminUI/(.*)$': + '/web/src/components/modules/admin/common/ui/$1', + }, +} + +module.exports = config +``` + +:::info +There are 3 `jest.config.js` files within a Redwood project. There's one inside the `web` directory, one inside the `api` directory, and one at the root of the project. Since the alias I created is used within the `web` directory, I added the `moduleNameMapper` to the `jest.config.js` file within the `web` directory. +:::