Πώς να δημιουργήσετε το Jest & Enzyme σαν αφεντικό

Amanecer

Όταν ξεκίνησα να γράφω δοκιμές για την εφαρμογή React, μου πήρε μερικές προσπάθειες προτού καταλάβω πώς να ρυθμίσω το περιβάλλον δοκιμών μου χρησιμοποιώντας το Jest& Enzyme. Αυτό το σεμινάριο προϋποθέτει ότι έχετε ήδη ρυθμίσει την εφαρμογή React με webpack& babel. Θα συνεχίσουμε από εκεί.

Αυτό είναι μέρος μιας σειράς άρθρων που έχω γράψει. Μιλώ για τον τρόπο δημιουργίας μιας εφαρμογής React για παραγωγή με τον σωστό και εύκολο τρόπο.

  • Μέρος 1 Πώς να συνδυάσετε το Webpack 4 και το Babel 7 για να δημιουργήσετε μια φανταστική εφαρμογή React (Συζητήσεις σχετικά με τη ρύθμιση του webpack με το Babel, μαζί με την υποστήριξη .scss)
  • Μέρος 2 Αυτά τα εργαλεία θα σας βοηθήσουν να γράψετε καθαρό κώδικα (Συζητήσεις για την αυτοματοποίηση του κώδικα σας, οπότε όλος ο κώδικας που γράφετε είναι καλός κώδικας)
  • Αυτό είναι το Μέρος 3 στο οποίο θα μιλήσω για τη δημιουργία του Jest με το Enzyme.

Πριν ξεκινήσουμε, αν οποιαδήποτε στιγμή αισθάνεστε κολλημένοι, μη διστάσετε να ελέγξετε το αποθετήριο κώδικα . Τα PR είναι ευπρόσδεκτα εάν πιστεύετε ότι τα πράγματα μπορούν να βελτιωθούν.

Προαπαιτούμενο

Πρέπει να έχετε εγκατεστημένο τον κόμβο για να χρησιμοποιήσετε το 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Δεδομένου ότι γενικά χρησιμοποιούμε webpack για να συντάξουμε τον κώδικα αντίδρασης. Το Babel είναι μια σημαντική εξάρτηση που βοηθάει στο webpack να συντάξει τον κώδικα. Πρόκειται για μια εξάρτηση από ομοτίμους για τη χρήση του Jest.

@babel/polyfilΤο Jest απαιτεί ένα πράγμα που ονομάζεται regenerator-runtime, το @ babel / polyfill έρχεται ενσωματωμένο μαζί του και μερικά άλλα δροσερά χαρακτηριστικά.

@babel/preset-env& @babel/preset-reactΕίναι για λειτουργίες όπως το ES6 και το React, οπότε κατά τη σύνταξη δοκιμών μονάδας Jestγνωρίζει τη σύνταξη ES6 και το JSX.

babel-coreΑυτό είναι ως επί το πλείστον εξάρτηση Jest, καθώς χρειαζόμαστε babel-coreνα δουλεύει ο Jest.

babel-jest Θα βοηθήσει τον Babel να καταλάβει τον κωδικό στον οποίο γράφουμε Jest

enzyme Αυτή είναι μια βιβλιοθήκη ισχυρισμών που διευκολύνει την διεκδίκηση, τον χειρισμό και τη διέλευση των αποτελεσμάτων των React Components.

enzyme-adapter-react-16 Ένας προσαρμογέας / μεσαίο λογισμικό για να βοηθήσει τον Jest να συνδεθεί enzyme

jest Το Jest είναι η βιβλιοθήκη δοκιμών στην οποία θα εκτελέσουμε τις δοκιμές μας.

Μπορείτε να ρίξετε μια ματιά σε ένα πολύ απλό παράδειγμα γυμνού οστού από τους δροσερούς λαούς που αστειεύονται. Χρησιμοποιεί το Babel για να τρέξει ένα απλό τεστ εδώ .

Επίσης, αν θέλετε να ρυθμίσετε το webpack για το React, αυτή είναι μια αναλυτική περιγραφή για το πώς το έκανα. Ή μπορείτε απλά να περάσετε από ολόκληρη τη βάση κώδικα που χρησιμοποιεί τη βασική δομή των γυμνών οστών αυτού που θα χρειαστείτε κατά τη ρύθμιση της εφαρμογής React μαζί με το αστείο / ένζυμο ( starter-kit εδώ ).

Στη συνέχεια ας δημιουργήσουμε ένα αρχείο που ονομάζεται 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θα καθαρίσει όλα τα χλευάσματα, έτσι ώστε το mock στο nth τεστ να μην μεταλλαχθεί ή να επηρεάσει τη δοκιμή στη n+1θέση.

collectCoverageFromλέει στον αστείο να συλλέξει την κάλυψη κώδικα από όλα τα αρχεία .js στο src/φάκελο. Η κάλυψη σας λέει ποιο ποσοστό του κώδικα καλύπτεται από τις δοκιμαστικές σας περιπτώσεις.

coverageDirectoryλέει στον Jest ότι ο κατάλογος κάλυψης πρέπει να ονομάζεται coverageστον κύριο app/φάκελο.

moduleFileExtensionsπαίρνει μια σειρά επεκτάσεων που λέει στον Jest ποια αρχεία μπορεί να δοκιμάσει. Το λέμε να δοκιμάσει όλα τα αρχεία .js | .jsx | .json.

setupFiles αυτό είναι πολύ σημαντικό, καθώς λέει στον Jest το μονοπάτι από το οποίο μπορεί να πάρει διαμορφώσεις για ένζυμο (περισσότερα για αυτό αργότερα)

testEnvironmentκαθορίζει σε ποιο περιβάλλον θα τρέξει η Jest, καθώς δοκιμάζουμε μια εφαρμογή ιστού. Έχω ρυθμίσει το περιβάλλονjsdom

testMatchλέει στον Jest ποια αρχεία θα δοκιμάσει. Περνάω σε 2 διαμορφώσεις εδώ, μία από τις οποίες δοκιμάζει όλα τα αρχεία σε οποιονδήποτε φάκελο ονομάζεται __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

Περνάω τη διαδρομή στις διαμορφώσεις enzyme.config.jsμου setupFilesστο Jest. Όταν πηγαίνει σε αυτό το αρχείο, ο 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.

Και πάλι εδώ είναι ο πηγαίος κώδικας σε αυτό το σεμινάριο .