Konfigurowanie Jest to naśladownictwo pakietu WebPack dla rozwiązania root i rozwiązania aliasu

Question

Pracuję nad skonfigurowaniem projektu za pomocą pakietu Webpack & Jest. W tej chwili konfiguracja rozwiązania Webpack powoduje komplikacje z testami Jest. W moim WebPACK config mam ustawić następujące opcje:

resolve: { 
    root: [__dirname + "/src/" ], 
    extensions: ['', '.js', '.coffee', '.jsx', '.css', '.scss', '.svg'] 
    } 

To pozwala mi wymagać aktywów i moduły z:

import UnknownImg from 'assets/unknown'; 

Powyższy faktycznie mieszka (w stosunku do mojego projektu) src/assets/unknown.svg korzenia.

Jednak po uruchomieniu testu dla plików z liniami takimi jak powyższe, otrzymuję błędy podczas rozwiązywania ścieżki do wymaganego modułu/zasobu.

Error: /Users/byronsm/dev/nerve-center/src/components/organisms/system_status.jsx: Cannot find module 'assets/unknown' from '/Users/byronsm/dev/nerve-center/src/components/organisms'

W tym przypadku wydaje się być robią względnej odnośnika importowanego ścieżce modułu. Czy istnieje sposób, aby uzyskać To Jest zachowywać się tak samo jak Webpack?

Answer 1

Rozwiązaniem jest teraz oficjalny dokument dowcipny. Zobacz Webpack Tutorial.

W skrócie, dodać opcję modulePaths do żartem config w package.json:

"jest": { 
    "modulePaths": ["src"], 
    ... 
} 

Answer 2

Po dobrze spędzonych nocach ponownie przyjrzałem się temu i uświadomiłem sobie, że to nie jest konfiguracja Jest, ale węzeł. Najlepszym sposobem, aby naśladować zachowanie config resolve.root w WebPack jest ustawienie zmiennej środowiskowej NODE_PATH do tego samego katalogu, gdy uruchomiony jest:

NODE_PATH=src jest 

Że tak naprawdę nie rozwiązuje problemu wielu katalogów go rozwiązać mój problem. Ten artykuł pomógł mi lepiej zrozumieć rozwiązanie https://gist.github.com/branneman/8048520.

Answer 3

Jestpack ma na celu rozwiązanie tego problemu poprzez zbudowanie plików testowych za pomocą pakietu Webpack przed uruchomieniem ich za pomocą Jest. Oznacza to, że wszelkie specjalne reguły rozdzielczości modułów lub ładowarek w konfiguracji Webpacka będą działały dokładnie tak samo jak kompilacja produkcyjna.

Answer 4

Napisałem mimic-webpack, aby pobrać konfigurację Web Pack i podłączyć do wymaganego węzła, aby rozdzielić ścieżki tak, jak pakiet Webpack. Nie testowałem tego z żartem, ale powinno działać z każdym spec runner, który działa na węźle, a nawet obsługuje proste ładowarki.

Answer 5

Można użyć żartem 20+ resolver option i podłączyć go z jest-webpack-resolver

Pakiet ten nie wydaje dojrzałe (kilka dni stary), ale wykonuje to za mnie. Ponadto, od tej pory wymaga się, aby plik był konfigurowany w oddzielnym pliku jest.config.js lub przez interfejs CLI (nie obsługuje package.json).