Css đầu ra webpack

Jest có thể được sử dụng trong các dự án sử dụng webpack để quản lý nội dung, kiểu và biên dịch. webpack đưa ra một số thách thức độc đáo so với các công cụ khác vì nó tích hợp trực tiếp với ứng dụng của bạn để cho phép quản lý biểu định kiểu, nội dung như hình ảnh và phông chữ, cùng với hệ sinh thái mở rộng của các ngôn ngữ và công cụ biên dịch sang JavaScript

Một ví dụ về gói web

Hãy bắt đầu với một loại tệp cấu hình webpack phổ biến và dịch nó sang thiết lập Jest

gói web. cấu hình. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: ['node_modules'],
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.gif$/,
        type: 'asset/inline',
      },
      {
        test: /\.(ttf|eot|svg)$/,
        type: 'asset/resource',
      },
    ],
  },
  resolve: {
    alias: {
      config$: './configs/app-config.js',
      react: './vendor/react-master',
    },
    extensions: ['.js', '.jsx'],
    modules: [
      'node_modules',
      'bower_components',
      'shared',
      '/shared/vendor/modules',
    ],
  },
};

Nếu bạn có các tệp JavaScript được chuyển đổi bởi Babel, bạn có thể bằng cách cài đặt plugin

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

7. Các chuyển đổi JavaScript không phải Babel có thể được xử lý bằng tùy chọn cấu hình của Jest

Xử lý nội dung tĩnh

Tiếp theo, hãy định cấu hình Jest để xử lý các tệp nội dung như biểu định kiểu và hình ảnh một cách duyên dáng. Thông thường, những tệp này không đặc biệt hữu ích trong các thử nghiệm nên chúng tôi có thể giả định chúng một cách an toàn. Tuy nhiên, nếu bạn đang sử dụng Mô-đun CSS thì tốt hơn hết là giả lập một proxy để tra cứu Tên lớp của bạn

trò đùa. cấu hình. js

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

Và bản thân các tệp giả

__mocks__/styleMock. js

module.exports = {};

__mocks__/fileMock. js

module.exports = 'test-file-stub';

Chế nhạo các mô-đun CSS

Bạn có thể sử dụng Proxy ES6 để mô phỏng các Mô-đun CSS

• npm
• sợi

npm install --save-dev identity-obj-proxy

yarn add --dev identity-obj-proxy

Sau đó, tất cả các tra cứu Tên lớp của bạn trên đối tượng kiểu sẽ được trả về nguyên trạng (e. g. ,

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

9). Điều này khá tiện lợi cho React Snapshot Testing

trò đùa. cấu hình. js (dành cho Mô-đun CSS)

________số 8

Nếu

module.exports = {};

0 không thể đáp ứng yêu cầu của bạn, bạn có thể sử dụng tùy chọn cấu hình của Jest để chỉ định cách nội dung được chuyển đổi. Ví dụ: một biến áp trả về tên cơ sở của tệp (chẳng hạn như

module.exports = {};

2 trả về

module.exports = {};

3) có thể được viết là

tập tinTransformer. js

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

2

trò đùa. cấu hình. js (dành cho máy biến áp tùy chỉnh và Mô-đun CSS)

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

3

Chúng tôi đã yêu cầu Jest bỏ qua các tệp khớp với biểu định kiểu hoặc phần mở rộng hình ảnh và thay vào đó, yêu cầu các tệp giả của chúng tôi. Bạn có thể điều chỉnh biểu thức chính quy để khớp với các loại tệp mà cấu hình webpack của bạn xử lý

tiền boa

Hãy nhớ bao gồm biến áp

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

7 mặc định một cách rõ ràng, nếu bạn muốn sử dụng nó cùng với các bộ tiền xử lý mã bổ sung

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

5

Định cấu hình Jest để tìm tệp của chúng tôi

Bây giờ Jest đã biết cách xử lý các tệp của chúng tôi, chúng tôi cần cho nó biết cách tìm chúng. Đối với các tùy chọn

module.exports = {};

5 và

module.exports = {};

6 của webpack, có các tùy chọn tương tự trực tiếp trong các tùy chọn

module.exports = {};

7 và

module.exports = {};

8 của Jest

trò đùa. cấu hình. js

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

0

Ghi chú

module.exports = {};

9 là một mã thông báo đặc biệt được thay thế bởi Jest bằng thư mục gốc của dự án của bạn. Hầu hết thời gian, đây sẽ là thư mục chứa

module.exports = 'test-file-stub';

0 của bạn trừ khi bạn chỉ định tùy chọn tùy chỉnh trong cấu hình của mình

Tương tự, đối tác của Jest cho Webpack's

module.exports = 'test-file-stub';

2 (một thay thế cho cài đặt

module.exports = 'test-file-stub';

3) là

module.exports = 'test-file-stub';

4

trò đùa. cấu hình. js

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

1

Và cuối cùng, chúng ta phải xử lý webpack

module.exports = 'test-file-stub';

5. Để làm được điều đó, chúng ta có thể sử dụng lại tùy chọn

module.exports = {};

0

trò đùa. cấu hình. js

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

2

Đó là nó. webpack là một công cụ phức tạp và linh hoạt, vì vậy bạn có thể phải thực hiện một số điều chỉnh để xử lý các nhu cầu của ứng dụng cụ thể của mình. May mắn thay cho hầu hết các dự án, Jest phải đủ linh hoạt để xử lý cấu hình webpack của bạn

tiền boa

Đối với các cấu hình webpack phức tạp hơn, bạn cũng có thể muốn điều tra các dự án như. babel-plugin-webpack-loaders

Sử dụng với webpack

Ngoài việc cài đặt

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

7 như đã mô tả trước đó, bạn sẽ cần thêm

module.exports = 'test-file-stub';

8 như vậy

• npm
• sợi

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

3

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

4

Sau đó, bạn sẽ muốn cấu hình Babel như sau

babelrc

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '/__mocks__/fileMock.js',
    '\\.(css|less)$': '/__mocks__/styleMock.js',
  },
};

5

tiền boa

Jest lưu trữ các tệp để tăng tốc độ thực hiện kiểm tra. Nếu bạn đã cập nhật

module.exports = 'test-file-stub';

9 và Jest không hoạt động như mong đợi, hãy thử xóa bộ đệm bằng cách chạy

npm install --save-dev identity-obj-proxy

0