{"id":43362,"date":"2024-11-26T12:35:25","date_gmt":"2024-11-26T12:35:25","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=43362"},"modified":"2024-11-26T12:35:25","modified_gmt":"2024-11-26T12:35:25","slug":"electron-016-electron%ec%97%90%ec%84%9c-%ed%85%8c%ec%8a%a4%ed%8c%85%ed%95%98%ea%b8%b0-jest-mocha-%eb%93%b1%ea%b3%bc%ec%9d%98-%ed%86%b5%ed%95%a9-%eb%b0%a9%eb%b2%95","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/43362\/","title":{"rendered":"[Electron] 016. Electron\uc5d0\uc11c \ud14c\uc2a4\ud305\ud558\uae30, Jest, Mocha \ub4f1\uacfc\uc758 \ud1b5\ud569 \ubc29\ubc95"},"content":{"rendered":"
\n
\n

Electron\uc740 \ub370\uc2a4\ud06c\ud0d1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uae30 \uc704\ud55c \uac15\ub825\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub85c, JavaScript, HTML, CSS\uc640 \uac19\uc740 \uc6f9 \uae30\uc220\uc744 \uc774\uc6a9\ud558\uc5ec \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc571\uc774 \ubcf5\uc7a1\ud574\uc9c0\uba74, \ud488\uc9c8 \ubcf4\uc7a5\uc744 \uc704\ud574 \ud14c\uc2a4\ud2b8\uac00 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ud14c\uc2a4\ud2b8\ud558\ub294 \ubc29\ubc95, \ud2b9\ud788 Jest\uc640 Mocha\uc640 \uac19\uc740 \ud14c\uc2a4\ud305 \ud504\ub808\uc784\uc6cc\ud06c\uc640\uc758 \ud1b5\ud569 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n<\/header>\n

\n

1. Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\uc694<\/h2>\n

Electron\uc740 Google Chrome\uc758 V8 JavaScript \uc5d4\uc9c4\uacfc Node.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc2a4\ud06c\ud0d1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \uac1c\ubc1c\uc790\uac00 \uc6f9 \uae30\uc220\uc744 \uc0ac\uc6a9\ud574 \uc5ec\ub7ec \ud50c\ub7ab\ud3fc(Windows, macOS, Linux)\uc5d0\uc11c \uc2e4\ud589 \uac00\ub2a5\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc73c\uba70, \uc2e4\uc81c\ub85c Visual Studio Code, Slack, Discord\uc640 \uac19\uc740 \uc720\uba85\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\ub3c4 Electron\uc73c\ub85c \uac1c\ubc1c\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n

\ud14c\uc2a4\ud2b8\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc548\uc815\uc131\uc744 \ubcf4\uc7a5\ud558\uace0 \ubc84\uadf8\ub97c \uc0ac\uc804\uc5d0 \ubc1c\uacac\ud558\ub294 \ub370 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. Electron \uc571\uc5d0\uc11c \ud14c\uc2a4\ud305\uc744 \uc218\ud589\ud558\ub294 \ubc29\ubc95\uc740 \uc5ec\ub7ec \uac00\uc9c0\uac00 \uc788\uc73c\uba70, \ub300\ud45c\uc801\uc73c\ub85c \ub2e8\uc704 \ud14c\uc2a4\ud2b8, \ud1b5\ud569 \ud14c\uc2a4\ud2b8, E2E(End-to-End) \ud14c\uc2a4\ud2b8\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n

2. \ud14c\uc2a4\ud305 \ud504\ub808\uc784\uc6cc\ud06c \uc18c\uac1c<\/h2>\n

2.1 Jest<\/h3>\n

Jest\ub294 Facebook\uc5d0\uc11c \uac1c\ubc1c\ud55c JavaScript \ud14c\uc2a4\ud305 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uac04\ud3b8\ud55c \uc124\uc815\uacfc \uac15\ub825\ud55c \uae30\ub2a5 \ub355\ubd84\uc5d0 \ub9ce\uc740 \uac1c\ubc1c\uc790\uc5d0\uac8c \uc778\uae30\ub97c \ub04c\uace0 \uc788\uc2b5\ub2c8\ub2e4. Jest\ub294 \uc2a4\ub0c5\uc0f7 \ud14c\uc2a4\ud2b8, mocking \uae30\ub2a5, \uadf8\ub9ac\uace0 \ube44\ub3d9\uae30 \ucf54\ub4dc \ud14c\uc2a4\ud2b8\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uac04\ub2e8\ud558\uac8c \uc791\uc131\ud560 \uc218 \uc788\ub294 D\ucf54\ub4dc\uc5d0 \ub300\ud574 \ud53d\uc2a4\uccd0\ub97c \uc81c\uacf5\ud558\uc5ec, \uc720\uc9c0\ubcf4\uc218\ub97c \uc27d\uac8c \ub9cc\ub4e4\uc5b4 \uc90d\ub2c8\ub2e4.<\/p>\n

2.2 Mocha<\/h3>\n

Mocha\ub294 \uc720\uc5f0\uc131\uc774 \ub6f0\uc5b4\ub09c JavaScript \ud14c\uc2a4\ud305 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \ub2e4\uc591\ud55c \uc5b4\uc11c\uc158 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \ud1b5\ud569\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Mocha\ub294 \ube44\ub3d9\uae30 \ud14c\uc2a4\ud2b8\ub97c \uc27d\uac8c \uc791\uc131\ud558\uace0, \ub2e4\uc591\ud55c \ud14c\uc2a4\ud2b8 \uc2a4\ud0c0\uc77c(BDD, TDD \ub4f1)\uc744 \uc9c0\uc6d0\ud558\uc5ec \uac1c\ubc1c\uc790\uac00 \uc6d0\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \ud14c\uc2a4\ud2b8\ub97c \uc791\uc131\ud560 \uc218 \uc788\uac8c \ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n

3. Electron\uacfc Jest \ud1b5\ud569\ud558\uae30<\/h2>\n

3.1 \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h3>\n

\uba3c\uc800, \uc0c8\ub85c\uc6b4 Electron \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 Jest\ub97c \uc124\uce58\ud569\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc5ec \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud558\uc138\uc694:<\/p>\n

npm init -y\nnpm install --save-dev electron jest<\/code><\/pre>\n
3.2 Jest \uc124\uc815 \ud30c\uc77c \uc0dd\uc131<\/h3>\n
Jest\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc124\uc815 \ud30c\uc77c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc758 \ub8e8\ud2b8 \ub514\ub809\ud1a0\ub9ac\uc5d0 jest.config.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4:<\/p>\n
module.exports = {\n            testEnvironment: 'node',\n            transform: {\n                '^.+\\\\.jsx?$': 'babel-jest',\n            },\n            testPathIgnorePatterns: ['\/node_modules\/', '\/dist\/'],\n        };<\/code><\/pre>\n
3.3 \uc0d8\ud50c \ud14c\uc2a4\ud2b8 \uc791\uc131<\/h3>\n
\uc608\ub97c \ub4e4\uc5b4, \uac04\ub2e8\ud55c \ubaa8\ub4c8\uc744 \ud14c\uc2a4\ud2b8\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. sum.js<\/code> \ud30c\uc77c\uc744 \uc791\uc131\ud558\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4:<\/p>\n
function sum(a, b) {\n            return a + b;\n        }\n        module.exports = sum;<\/code><\/pre>\n
\uadf8\ub7f0 \ub2e4\uc74c, \uc774 \ubaa8\ub4c8\uc744 \ud14c\uc2a4\ud2b8\ud558\ub294 sum.test.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4:<\/p>\n
const sum = require('.\/sum');\n\n        test('adds 1 + 2 to equal 3', () => {\n            expect(sum(1, 2)).toBe(3);\n        });<\/code><\/pre>\n
3.4 \ud14c\uc2a4\ud2b8 \uc2e4\ud589<\/h3>\n
\uc774\uc81c \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc5ec test\ub97c \uc218\ud589\ud569\ub2c8\ub2e4:<\/p>\n
npx jest<\/code><\/pre>\n
\ud14c\uc2a4\ud2b8\uac00 \uc131\uacf5\uc801\uc73c\ub85c \uc2e4\ud589\ub418\uba74, Jest\uac00 \uc791\uc131\ud55c \ud14c\uc2a4\ud2b8 \uacb0\uacfc\ub97c \uc218\uc9d1\ud558\uace0 \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n
\n
4. Electron\uacfc Mocha \ud1b5\ud569\ud558\uae30<\/h2>\n
4.1 Mocha \uc124\uce58<\/h3>\n
Mocha\ub97c \uc124\uce58\ud558\ub824\uba74, \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n
npm install --save-dev mocha chai<\/code><\/pre>\n
4.2 Mocha \uc124\uc815<\/h3>\n
Mocha\ub294 \ud2b9\ubcc4\ud55c \uc124\uc815 \ud30c\uc77c \uc5c6\uc774\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc9c0\ub9cc, \uc124\uc815 \ud30c\uc77c\uc744 \uc0ac\uc6a9\ud558\uba74 \uad00\ub9ac\uac00 \ub0b4\ubd80\uc801\uc73c\ub85c \uc6a9\uc774\ud574\uc9d1\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc740 mocha.opts<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
--reporter spec\n        --require @babel\/register<\/code><\/pre>\n
4.3 \uc0d8\ud50c \ud14c\uc2a4\ud2b8 \uc791\uc131<\/h3>\n
Mocha\ub97c \uc0ac\uc6a9\ud558\uc5ec sum.js<\/code> \ud30c\uc77c\uc744 \ud14c\uc2a4\ud2b8\ud558\ub294 test\/sum.test.js<\/code> \ud30c\uc77c\uc744 \uc791\uc131\ud569\ub2c8\ub2e4:<\/p>\n
const { expect } = require('chai');\n        const sum = require('..\/sum');\n\n        describe('sum', () => {\n            it('should add 1 + 2 to equal 3', () => {\n                expect(sum(1, 2)).to.equal(3);\n            });\n        });<\/code><\/pre>\n
4.4 \ud14c\uc2a4\ud2b8 \uc2e4\ud589<\/h3>\n
Mocha \ud14c\uc2a4\ud2b8\ub97c \uc2e4\ud589\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc138\uc694:<\/p>\n
npx mocha test\/sum.test.js<\/code><\/pre>\n<\/section>\n
\n
5. End-to-End \ud14c\uc2a4\ud2b8<\/h2>\n
End-to-End \ud14c\uc2a4\ud2b8\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud1b5\ud569\ud558\uc5ec \uc2e4\uc81c \uc0ac\uc6a9\uc790 \uc2dc\ub098\ub9ac\uc624\ub97c \ud3c9\uac00\ud558\ub294 \ub370 \ud575\uc2ec\uc801\uc785\ub2c8\ub2e4. Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ud14c\uc2a4\ud2b8\ud558\uae30 \uc704\ud574 \uc720\uba85\ud55c \ud234\uc778 Spectron<\/strong>\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
5.1 Spectron \uc124\uce58<\/h3>\n
\uba3c\uc800, Spectron\uc744 \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n
npm install --save-dev spectron<\/code><\/pre>\n
5.2 E2E \ud14c\uc2a4\ud2b8 \uc124\uc815<\/h3>\n
\uc5ec\uae30\uc11c\ub294 Test Runner\ub97c \uc0ac\uc6a9\ud558\ub294 \ub2e8\uc21c\ud55c \uc608\uc81c\ub97c \ub2e4\ub8f0 \uac83\uc785\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc774 test\/e2e.test.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
const Application = require('spectron').Application;\n        const assert = require('assert');\n\n        let app;\n\n        describe('Application launch', function () {\n            this.timeout(10000);\n\n            beforeEach(function () {\n                app = new Application({\n                    path: '\/path\/to\/your\/electron\/app',\n                });\n                return app.start();\n            });\n\n            afterEach(function () {\n                if (app && app.isRunning()) {\n                    return app.stop();\n                }\n            });\n\n            it('should display the correct title', function () {\n                return app.client.getTitle().then(function (title) {\n                    assert.strictEqual(title, 'Expected Title');\n                });\n            });\n        });<\/code><\/pre>\n
5.3 E2E \ud14c\uc2a4\ud2b8 \uc2e4\ud589<\/h3>\n
\ub2e4\uc74c\uacfc \uac19\uc740 \uba85\ub839\uc5b4\ub85c E2E \ud14c\uc2a4\ud2b8\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n
npx mocha test\/e2e.test.js<\/code><\/pre>\n<\/section>\n
\n
6. \ub9c9\uac04\uc73c\ub85c<\/h2>\n
Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ud14c\uc2a4\ud305\uc740 \ud488\uc9c8 \ubcf4\uc7a5\uc744 \uc704\ud55c \ud544\uc218\uc801\uc778 \uacfc\uc815\uc785\ub2c8\ub2e4. \ub2e4\uc591\ud55c \ud14c\uc2a4\ud305 \ud504\ub808\uc784\uc6cc\ud06c(Jest, Mocha \ub4f1)\uc640 \ud1b5\ud569\ud558\uc5ec \ud6a8\uc728\uc801\uc73c\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc548\uc815\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac01 \ud504\ub808\uc784\uc6cc\ud06c\ub9c8\ub2e4 \uc7a5\uc810\uc774 \uc788\uc73c\ubbc0\ub85c, \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub9de\ub294 \ub3c4\uad6c\ub97c \uc120\ud0dd\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n
\ub610\ud55c, E2E \ud14c\uc2a4\ud2b8\ub97c \ud1b5\ud574 \uc2e4\uc81c \uc0ac\uc6a9\uc790 \ud658\uacbd\uc744 \uc2dc\ubbac\ub808\uc774\uc158\ud568\uc73c\ub85c\uc368 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubaa8\ub4e0 \uacbd\ub85c\ub97c \uac80\uc99d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n