Yêu cầu/nhập khẩu svg trong các bài kiểm tra mocha

Question

Tôi có một dự án đang được xây dựng với webpack. Điều này cho phép tôi nhập .svg tệp để tạo thành phần React.

Khi chạy thử nghiệm Tôi đã cố gắng tránh sử dụng gói webpack để tránh buộc phiên bản mocha vào plugin webpack. Thật không may, khi nhập khẩu .svg bị đánh, chúng không được tìm thấy. Chúng tôi cũng đang sử dụng các mô-đun css, và họ cho phép tôi sử dụng css-modules-require-hook để làm việc xung quanh việc nhập tệp css.

Có kỹ thuật nào tôi có thể sử dụng để thực hiện điều tương tự với SVG không?

Answer 1

Có, tôi chỉ tìm cách mô phỏng mô hình .svg cho mochahere.

Mocha có thể sử dụng require hooks để xử lý việc nhập javascript phổ quát, chẳng hạn như babel-register cho .js.

Bạn có thể sử dụng require-hacker để thêm móc vào phần mở rộng của mô-đun.

Bạn có thể sử dụng mô phỏng thành phần phản ứng rỗng cho các bộ tải thành phần khác chẳng hạn như react-svg-loader để tải .svg làm thành phần phản ứng.

đây là ví dụ:

import requireHacker from 'require-hacker'; 

const fakeComponentString = ` 
    require('react').createClass({ 
    render() { 
     return null; 
    } 
    }) 
`; 

// for fake component 
requireHacker.hook('svg', path => `module.exports = ${fakeComponentString}`); 

Answer 2

Tôi thấy điều này được giải quyết bằng cách sử dụng require.extensions (trong nút này là deprecated, nhưng không bao giờ nên bỏ đi) để buộc nhập khẩu các loại tài sản dẫn đến một không-op . Bắt đầu mocha với --require cờ cho phép chúng ta cấu hình môi trường thời gian chạy cho các bài kiểm tra của chúng tôi để bắt đầu mocha như thế này:

NODE_PATH=./app mocha -w --compilers js:babel-core/register --require ./app/lib/testHelper.js --require ./app/lib/testNullCompiler.js 'app/**/*.spec.@(js|jsx)' --watch-extensions js,jsx 

nơi testNullCompiler.js là:

const noop =() => 1; 

require.extensions['.css'] = noop; 
require.extensions['.scss'] = noop; 
require.extensions['.png'] = noop; 
require.extensions['.jpg'] = noop; 
require.extensions['.jpeg'] = noop; 
require.extensions['.gif'] = noop; 
require.extensions['.svg'] = noop; 

Điều này sẽ gây ra tất cả các loại trên các tập tin trở lại chức năng noop thay vì cố tải tệp thực.

Mã của tôi đang sử dụng cú pháp es6import nhưng tôi giả định rằng babel đang chuyển đổi thành require trong các bìa cho phép kỹ thuật này hoạt động.