عندما بدأت في كتابة الاختبارات لتطبيق React الخاص بي ، استغرق الأمر مني بعض المحاولات قبل أن أكتشف كيفية إعداد بيئة الاختبار الخاصة بي باستخدام Jest& Enzyme. يفترض هذا البرنامج التعليمي أن لديك بالفعل تطبيق React تم إعداده باستخدام webpack& babel. سنواصل من هناك.

هذا جزء من سلسلة من المقالات التي كتبتها. أتحدث عن كيفية إعداد تطبيق React للإنتاج بالطريقة الصحيحة والسهلة.

• الجزء 1 كيفية الجمع بين Webpack 4 و Babel 7 لإنشاء تطبيق React رائع (محادثات حول إعداد webpack مع babel بالإضافة إلى دعم scss)
• الجزء 2 ستساعدك هذه الأدوات في كتابة كود نظيف (محادثات حول أتمتة الكود الخاص بك ، لذا فإن كل الكود الذي تكتبه هو كود جيد)
• هذا هو الجزء الثالث الذي سأتحدث فيه عن إعداد Jest with Enzyme.

قبل أن نبدأ ، إذا شعرت في أي وقت بالعجز ، فلا تتردد في التحقق من مستودع الأكواد . العلاقات العامة هي موضع ترحيب كبير إذا شعرت أنه يمكن تحسين الأمور.

المتطلبات المسبقة

تحتاج إلى تثبيت Node من أجل استخدام npm (مدير حزمة العقدة).

أول الأشياء أولاً ، قم بإنشاء مجلد يسمى appثم افتح الجهاز الطرفي الخاص بك وانتقل إلى هذا appالمجلد واكتب:

npm init -y

سيؤدي هذا إلى إنشاء package.jsonملف لك. package.jsonأضف ما يلي في ملفك :

{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage --colors", }, "devDependencies": { "@babel/core": "^7.0.0", "@babel/polyfill": "^7.0.0-beta.51", "@babel/preset-env": "^7.0.0-beta.51", "@babel/preset-react": "^7.0.0-beta.51", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^23.4.2", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "jest": "^23.4.2" } }

ثانيًا ، قم بإنشاء مجلد يسمى srcفي appالمجلد الخاص بك . src/app/المجلد هو المكان الذي سيوجد فيه كل كود React الخاص بك مع اختباره. لكن قبل ذلك دعونا نفهم سبب قيامنا بما فعلناه في package.jsonملفنا.

سأتحدث عن scripts(الوعد) قليلاً. ولكن قبل ذلك ، دعونا نتعرف على سبب حاجتنا إلى التبعيات التالية. أريدك أن تعرف ما يدور في داخلك package.jsonفلنبدأ

@babel/coreنظرًا لأننا نستخدم حزمة الويب بشكل عام لتجميع كود رد الفعل الخاص بنا. Babel هو تبعية رئيسية تساعد على إخبار webpack بكيفية ترجمة الكود. هذا هو تبعية الأقران لاستخدام Jest أيضًا.

@babel/polyfilتتطلب Jest شيئًا يسمى regenerator-runtime، يأتي @ babel / polyfill مدمجًا به وبعض الميزات الرائعة الأخرى.

@babel/preset-env& @babel/preset-reactIs لميزات مثل ES6 و React ، لذلك أثناء كتابة اختبارات الوحدة Jestتعرف بنية ES6 و JSX .

babel-coreهذا هو في الغالب تبعية Jest، لأننا نحتاج babel-coreإلى Jest للعمل.

babel-jest سيساعد Babel على فهم الكود الذي نكتبه Jest

enzyme هذه مكتبة تأكيدات تسهل تأكيد إخراج مكونات React ومعالجتها واجتيازها.

enzyme-adapter-react-16 محول / أدوات وسطى لمساعدة Jest على الاتصال enzyme

jest Jest هي مكتبة الاختبار التي سنجري عليها اختباراتنا.

يمكنك إلقاء نظرة على مثال بسيط جدًا للعظام المجردة من قبل الأشخاص الرائعين في الدعابة. يستخدم بابل لإجراء اختبار بسيط هنا .

أيضًا إذا كنت تريد إعداد webpack لـ React ، فهذه نظرة عامة مفصلة حول كيفية القيام بذلك. أو يمكنك ببساطة الاطلاع على قاعدة الشفرة بأكملها التي تستخدم بنية العظام الأساسية لما ستحتاجه عند إعداد تطبيق React الخاص بك مع jest / enzyme ( مجموعة أدوات البدء هنا ).

بعد ذلك ، دعنا ننشئ ملفًا يسمى jest.config.jsفي مجلدنا الرئيسي appونضيف إليه الكود التالي. سأتحدث عما يفعله هذا بعد قليل.

// For a detailed explanation regarding each configuration property, visit: // //jestjs.io/docs/en/configuration.html module.exports = { // Automatically clear mock calls and instances between every test clearMocks: true, // An array of glob patterns indicating a set of files for which coverage information should be collected collectCoverageFrom: ['src/**/*.{js,jsx,mjs}'], // The directory where Jest should output its coverage files coverageDirectory: 'coverage', // An array of file extensions your modules use moduleFileExtensions: ['js', 'json', 'jsx'], // The paths to modules that run some code to configure or set up the testing environment before each test setupFiles: ['/enzyme.config.js'], // The test environment that will be used for testing testEnvironment: 'jsdom', // The glob patterns Jest uses to detect test files testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'], // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped testPathIgnorePatterns: ['\\\\node_modules\\\\'], // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href testURL: '//localhost', // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation transformIgnorePatterns: ['/node_modules/'], // Indicates whether each individual test should be reported during the run verbose: false, };

ثانيًا ، قم بإنشاء ملف يسمى enzyme.config.jsفي appمجلدك الرئيسي وأضف الكود التالي إليه.

/** Used in jest.config.js */ import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });

دعونا نتحدث أولاً عن jest.config.js

clearMocksسوف يمحو جميع النماذج ، حتى لا يتغير النموذج في nth الاختبار أو يؤثر على الاختبار في n+1الموضع.

collectCoverageFromيخبر jest بجمع تغطية الكود من جميع ملفات .js في src/المجلد. تخبرك التغطية بالنسبة المئوية التي تغطيها حالات الاختبار الخاصة بك من الشفرة.

coverageDirectoryيخبر Jest أنه يجب تسمية دليل التغطية coverageفي app/المجلد الرئيسي .

moduleFileExtensionsيأخذ مجموعة من الامتدادات التي تخبر Jest عن الملفات التي يمكنها اختبارها. نطلب منه اختبار جميع ملفات .js | .jsx | .json.

setupFiles هذا مهم حقًا ، لأنه يخبر Jest المسار من حيث يمكنه الحصول على تكوينات للإنزيم (المزيد حول هذا لاحقًا)

testEnvironmentتحدد البيئة التي ستجري Jest اختبارها عليها ، نظرًا لأننا نختبر تطبيق ويب. لقد ضبطت البيئة لjsdom

testMatchيخبر Jest الملفات التي سيختبرها. أقوم بتمرير تكوينين هنا ، أحدهما اختبار جميع الملفات في أي مجلد باسم __tests__أو اختبار جميع الملفات التي تنتهي بـ spec.js|.jsxأوtest.js|.jsx

testPathIgnorePatternsلا أريد Jest إجراء الاختبارات داخل node_modulesمجلدي. لذلك فقد تجاهلت تلك الملفات هنا.

testURLيعيّن هذا الخيار عنوان URL لبيئة jsdom. ينعكس ذلك في خصائص مثل location.href

transformIgnorePatternsمصفوفة من سلاسل نمط regexp المطابقة لجميع مسارات الملفات المصدر ، ستتخطى الملفات المتطابقة التحويل. هنا أعطيها واحدة فقطnode_modules

verboseيمنحك "إذا كان صحيحًا" سجلًا تفصيليًا للغاية عند إجراء الاختبارات. لا أريد رؤية ذلك ، والتركيز فقط على جوهر اختباراتي. لذلك قمت بتعيين قيمته علىfalse

دعونا نتحدث عن enzyme.config.js

I تمرير مسار enzyme.config.jsفي بلدي setupFilesفي تكوينات الدعابة. عندما ينتقل إلى هذا الملف ، يأخذ Jest تكوينات الإنزيم. هذا يعني أن جميع الاختبارات ستجرى على Jest. لكن التأكيدات وكل شيء آخر سيتم بواسطة الإنزيم.

مع وجود هذا في مكانه ، تتم التكوينات لدينا. لنتحدث عن البرامج النصية:

"scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage --colors", },

npm run test سيؤدي هذا إلى تشغيل Jest وتنفيذ جميع الاختبارات

npm run test:watch سيتم إجراء جميع الاختبارات والاستمرار في وضع المراقبة ، بحيث عند إجراء أي تغييرات على حالات الاختبار الخاصة بنا ، سيتم تنفيذ حالات الاختبار هذه مرة أخرى.

npm run test:coverageسيُنشئ تقرير تغطية استنادًا إلى جميع الاختبارات التي يجريها ، ويعطيك تقرير تغطية مفصل في app/coverageالمجلد.

قبل إجراء اختبار ، نحتاج إلى إنشاء اختبار. دعنا نبدأ. في app/src/مجلدك ، قم بإنشاء ملف يسمى WelcomeMessage.js .

import React, { Fragment } from 'react'; const styles = { heading: { color: '#fff', textAlign: 'center', marginBottom: 15, }, logo: { width: 250, heading: 250, objectFit: 'cover', }, }; const WelcomeMessage = ({ imgPath }) => { return (  
 Welcome To 
  ); }; export default WelcomeMessage;

في نفس المجلد ، قم بإنشاء ملف يسمى WelcomeMessage.test.js

import React from 'react'; import { shallow } from ‘enzyme’; // Components import WelcomeMessage from './WelcomeMessage'; function setup() { const props = { imgPath: 'some/image/path/to/a/mock/image', }; const wrapper = shallow(); return { wrapper, props }; } describe('WelcomeMessage Test Suite', () => { it('Should have an image', () => { const { wrapper } = setup(); expect(wrapper.find('img').exists()).toBe(true); }); });

هناك شيء واحد يجب ملاحظته هنا وهو أنك لن تكون قادرًا على تشغيل WelcomMessage.jsالملف بالفعل لأنك لم تقم webpackبالإعداد babel. إذا كنت تبحث عن طريقة لإعداد ذلك ، فراجع البرنامج التعليمي الخاص بي حول كيفية الجمع بين Webpack 4 و Babel 7 لإنشاء تطبيق React رائع. أيضًا إذا كنت تريد فقط الكود المصدري لهذا البرنامج التعليمي ، فإليك مستودع الكود . لقد تم بالفعل إعداد Jest & Enzyme. لا تتردد في عمل شوكة والبدء في اللعب بقاعدة الكود.

بالعودة إلى الكود الذي كتبناه للتو ، في نوع الجهاز الطرفي npm run test. سيقوم بتنفيذ برنامج نصي والعثور على جميع الملفات التي تنتهي بها *.test.jsوتنفذها. بعد تنفيذه ، سترى رسالة مثل هذه:

Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total

الآن أعلم أن هذا ليس اختبارًا عمليًا للوحدة ، لكنني أردت أن يركز هذا البرنامج التعليمي على إعداد Jest & Enzyme فقط.

مرة أخرى هنا هو الكود المصدري لهذا البرنامج التعليمي .