یکی از دردسر های کار با ریاکت اینه که به طور دیفالت برای ایمپورت کردن فایل ها باید آدرس دهی رو یا از روت پروژه و یا پوشه ای که داخلشی شروع کنی .بنابراین ما گاهی شاهد همچین ایمپورت هایی هستیم
import Button from 'src/components/atom/buttom'
و یا
import Button from '../../../../atom/buttom'
در حالی که دلم میخواد بدون توجه به این که کجا هستم اینجوری ایمپورت کنم
import Buttom from 'atom/buttom'
برای این کار لازمه تا تنظیمات تایپ اسکریپت رو عوض کنیم
با توجه به پوشه هایی که قبلا ساختیم فایل tsconfig.json رو به شکل زیر در میاریم ... بخشی که به فایل اضافه شده رو علامت زدم
الان تایپ اسکریپت کد مارو میشناسه ولی eslint نمیتونه کار کنه و ارور میده که ایمپورت ها درست نیست
برای این که درست شه باید تنظیمات eslint رو کمی دستکاری کنیم . دوتا روش داریم یکی این که مجدد توی تنظیمات eslint بیایم و path هارو معرفی کنیم و یا کاری کنیم که eslint تنظیمات تایپ اسکریپت رو بخونه که من دومی رو ترجیح میدم ..برای دومی لازمه که یه کتابخونه نصب کنیم....! پس اینو نصب میکنیم
npm install --save-dev eslint-import-resolver-typescript
و حالا کافیه ستینگ زیر رو توی eslintrc.json اضافه کنیم
و حالا به سادگی میتونیم ایمپورت هامون رو انجام بدیم.برای نمونه من دوتا فایل ساختم و یکی رو داخل دیگری ایمپورت میکنم
اینجوری import هامون تمیز هستن و موقع ایمپورت کردن با نوشتن atom تمامی فایل های قابل ایمپورت نمایش داده میشن و کار کردن خیلی ساده میشه ...جلوتر میبینین که با نصب افزونه ها حتی دیگه نیاز به ایمپورت هم نخواهیم داشت و فایل هایی که در کد استفاده میکنیم خودکار ایمپورت میشن.
اما بزارین یه قدم دیگه هم بریم جلوتر.یعنی چی؟ما اگه این فایل رو داخل یه تست ایمپورت کنیم چی؟ آیا jest هم تنظیماتمون رو میشناشه؟
خب من یه فایل داخل تست ایمپورت کردم و میبینید که تست فیلد شد.
خب باز برای این مشکل دو راه وجود داره که من راه دوم رو انتخاب میکنم.(این که تنظیمات از یه جا صورت بگیره بعدا خیلی بهمون کمک میکنه). پس پکیج زیر رو نصب میکنیم
npm install --save-dev jest-module-name-mapper
در روت پروژه یه فایل برای تنظیمات jest به نام jest.config.js میسازیم و مثل زیر کانفیگش میکنیم.
کافیه یه بار vscode ببندین و باز کنین و ایندفه میبینین که تست پاس شده
آپدیت:
علاوه بر این روش یه روش بهتر هم هست که برای من تا همین امروز صبح جواب نمیداد
کافیه پکیج زیر رو نصب کنین
npm install --save-dev ts-jest
تنظیمات زیر رو در فایل jest.config.js اضافه کنین
و در تنظیمات tsconfig.json مقدار preserve رو به react تغییر بدید
من چون این تغییر رو انجام نداده بودم برام کار نمیکرد و نمیدونستم مشکلم از کجاست ..امروز صبح به طور اتفاقی در این ایشو مشکل و راه حل رو پیدا کردم و کلی خوشحال شدم ...
بازم آپدیت: عاقا همون روش اول بهتره انگار
تقریبا میشه گفت که تموم شد.ولی وقتی استوری بوک رو هم نصب کنیم باز لازمه که براش کمی کانفیگ انجام بدیم که اون رو بعدا انجام میدیم
