Định cấu hình Jest để bắt chước webpack giải quyết thư mục gốc và giải quyết bí danh

Question

Tôi đang làm việc để thiết lập dự án với Webpack & Jest. Tại thời điểm này Webpack giải quyết các cấu hình gây ra các biến chứng với các bài kiểm tra Jest. Trong cấu hình webpack của tôi, tôi có các tùy chọn sau đây thiết lập:

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

này cho phép tôi yêu cầu tài sản và các module với:

import UnknownImg from 'assets/unknown'; 

Trên đây thực sự sống (tương đối so với gốc dự án của tôi) src/assets/unknown.svg.

Tuy nhiên, khi tôi chạy thử nghiệm cho các tệp có các dòng như trên tôi gặp lỗi khi phân giải đường dẫn đến mô-đun/nội dung bắt buộc đó.

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'

Trong trường hợp này dường như được thực hiện một tra cứu tương đối của các đường mô-đun nhập khẩu. Có cách nào để tôi có thể khiến Jest cư xử giống như Webpack không?

Answer 1

Giải pháp hiện được cung cấp trong tài liệu chính thức của jest. Xem Webpack Tutorial.

Nói tóm lại, thêm tùy chọn modulePaths để cấu hình jest của bạn trong package.json:

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

Answer 2

Sau một đêm nghỉ ngơi tốt, tôi đã xem lại điều này và nhận ra đó không phải là cấu hình Jest mà là nút. Cách tốt nhất để bắt chước các hành vi của các cấu hình resolve.root trong webpack là để thiết lập biến môi trường NODE_PATH vào thư mục tương tự khi chạy jest:

NODE_PATH=src jest 

Điều đó không thực sự giải quyết vấn đề của nhiều thư mục nó giải quyết vấn đề của tôi. Bài viết này đã giúp tôi hiểu giải pháp tốt hơn một chút https://gist.github.com/branneman/8048520.

Answer 3

Jestpack nhằm giải quyết vấn đề này bằng cách tạo tệp thử nghiệm của bạn với Webpack trước khi chạy chúng với Jest. Điều này có nghĩa là bất kỳ quy tắc phân giải mô-đun đặc biệt nào hoặc trình tải trong cấu hình Webpack của bạn sẽ hoạt động giống như cách xây dựng sản xuất của bạn.

Answer 4

Tôi đã viết mimic-webpack để có cấu hình webpack và móc vào nút yêu cầu để giải quyết đường dẫn giống như webpack. Tôi đã không thử nghiệm nó với jest, nhưng nó sẽ làm việc với bất kỳ Á hậu spec chạy trên nút và thậm chí sẽ hỗ trợ bộ tải đơn giản.

Answer 5

Bạn có thể sử dụng jest 20+ resolver option và cắm nó với jest-webpack-resolver

Gói này dường như không trưởng thành (vài ngày cũ) nhưng làm công việc cho tôi. Ngoài ra, hiện tại, nó yêu cầu cấu hình Jest nằm trong một tệp riêng biệt jest.config.js hoặc được cung cấp qua CLI (không hỗ trợ package.json).