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 JestXử 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 Testingtrò đù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',
},
};
2trò đù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',
},
};
3Chú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ổ sungmodule.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 Jesttrò đù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',
},
};
0Ghi 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ìnhTươ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';
4trò đù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',
},
};
1Và 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 = {};
0trò đù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',
},
};
3module.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',
},
};
4Sau đó, 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',
},
};
5tiề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