spfx-react-unit-testing's Introduction

SharePoint Framework React web parts unit testing tips

Summary

Craft SharePoint Framework solutions based on TypeScript, Reactjs and create component unit tests to make your solution regression less. This SPFx solution sample is part of a few blogs I will create. It shows how React client side web part can be unit tested. Also would show that Test Driven Developement scenarios are possible with the SPFx as well as some coverage reporting provider out of the box.

Here are the packages we would install in order to get started with SPFx React web part unit tests

...
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.3.0",
    "@microsoft/sp-module-interfaces": "~1.3.0",
    "@microsoft/sp-webpart-workbench": "~1.3.0",
    "gulp": "~3.9.1",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "@types/sinon": "2.3.3",
    "@types/enzyme":"2.8.11",
    "chai-enzyme": "0.8.0",
    "enzyme": "2.9.1",
    "react-addons-test-utils": "15.6.0"
  }
....

Used SharePoint Framework Version

Applies to

Prerequisites

Office 365 subscription with SharePoint Online.
SharePoint Framework development environment already set up.

Solution

Solution	Author(s)
spfx-react-unit-tests	Velin Georgiev (@VelinGeorgiev)

Version history

Version	Date	Comments
0.0.1	October 06, 2017	Initial commit

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

Clone this repository.
Open the command line, navigate to the web part folder and execute:
- npm i
- gulp test
- gulp serve (optional)
Navigate to the local or hosted version of the SharePoint workbench.

Features

This Web Part illustrates the following concepts on top of the SharePoint Framework:

SPFx default unit test frameworks and packages.
The Chai Assertion Library basics.
Mocha for Nodejs basics.
Enzyme as utility to mount and travers SPFx React components.
Enzyme for testing the SPFx React component state or properties change.
Sinon to spy on SPFx React component EventListener and test data or state change.
Sinon stubs as SharePoint Framework React mocking framework.

spfx-react-unit-testing's People

Contributors

Stargazers

Watchers

spfx-react-unit-testing's Issues

PhantomJS have not captured in 10000 ms, killing

Bug?

Hi, I've downloaded this project and am seeing the following error
"PhantomJS have not captured in 10000 ms, killing"

I have searched for a solution but have not been able to find anything. I need this to work with headless browser so that my automation will also work.

Note: If I manually open Chrome at http://localhost:9876/ the it starts to work (I can see both chrome and phantomjs connected).

c:\Users\user\Downloads\spfx-react-unit-testing-master>gulp test
Build target: DEBUG
[16:38:32] Using gulpfile c:\Users\user\Downloads\spfx-react-unit-testing-master\gulpfile.js
[16:38:32] Starting gulp
[16:38:32] Starting 'test'...
[16:38:32] Starting subtask 'configure-sp-build-rig'...
[16:38:32] Finished subtask 'configure-sp-build-rig' after 8.75 ms
[16:38:32] Starting subtask 'pre-copy'...
[16:38:32] Finished subtask 'pre-copy' after 18 ms
[16:38:32] Starting subtask 'copy-static-assets'...
[16:38:32] Starting subtask 'sass'...
[16:38:33] Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.
[16:38:33] Finished subtask 'sass' after 1.15 s
[16:38:33] Starting subtask 'tslint'...
[16:38:34] Starting subtask 'typescript'...
[16:38:34] [typescript] TypeScript version: 2.4.2
[16:38:34] Finished subtask 'copy-static-assets' after 2.43 s
Warning: no-duplicate-case rule is deprecated. Replace your usage with the TSLint no-duplicate-switch-case rule.
Warning: valid-typeof rule is deprecated. Replace your usage with the TSLint typeof-compare rule.
[16:38:35] Finished subtask 'tslint' after 1.94 s
[16:38:37] Finished subtask 'typescript' after 3.06 s
[16:38:37] Starting subtask 'ts-npm-lint'...
[16:38:37] Finished subtask 'ts-npm-lint' after 108 ms
[16:38:37] Starting subtask 'api-extractor'...
[16:38:37] Finished subtask 'api-extractor' after 682 μs
[16:38:37] Starting subtask 'post-copy'...
[16:38:37] Finished subtask 'post-copy' after 497 μs
[16:38:37] Starting subtask 'collectLocalizedResources'...
[16:38:37] Finished subtask 'collectLocalizedResources' after 4.32 ms
[16:38:37] Starting subtask 'configure-webpack'...
[16:38:40] Finished subtask 'configure-webpack' after 2.47 s
[16:38:40] Starting subtask 'webpack'...
[16:38:41] Finished subtask 'webpack' after 1.19 s
[16:38:41] Starting subtask 'configure-webpack-external-bundling'...
[16:38:41] Finished subtask 'configure-webpack-external-bundling' after 1.11 ms
[16:38:41] Starting subtask 'copy-assets'...
[16:38:41] Finished subtask 'copy-assets' after 133 ms
[16:38:41] Starting subtask 'write-manifests'...
[16:38:44] Finished subtask 'write-manifests' after 3.14 s
[16:38:44] Starting subtask 'casperjs-tests'...
[16:38:44] Starting subtask 'karma'...
24 05 2018 16:38:46.565:DEBUG [plugin]: Loading inlined plugin (defining webpackPlugin, preprocessor:webpack, middleware:webpackBlocker).
24 05 2018 16:38:46.565:DEBUG [plugin]: Loading inlined plugin (defining framework:mocha).
24 05 2018 16:38:46.565:DEBUG [plugin]: Loading inlined plugin (defining preprocessor:coverage, reporter:coverage).
24 05 2018 16:38:46.565:DEBUG [plugin]: Loading inlined plugin (defining reporter:mocha-clean).
24 05 2018 16:38:46.565:DEBUG [plugin]: Loading inlined plugin (defining launcher:PhantomJS).
24 05 2018 16:38:46.565:DEBUG [plugin]: Loading inlined plugin (defining framework:sinon-chai).
24 05 2018 16:38:46.565:DEBUG [plugin]: Loading inlined plugin (defining reporter:test-result).
[16:38:46] [casperjs-tests] No casperJS tests found
[16:38:46] Finished subtask 'casperjs-tests' after 1.93 s
24 05 2018 16:38:48.949:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
24 05 2018 16:38:48.949:INFO [launcher]: Starting browser PhantomJS
24 05 2018 16:38:48.949:DEBUG [temp-dir]: Creating temp dir at C:\Users\user\AppData\Local\Temp\karma-37543242
24 05 2018 16:38:48.965:DEBUG [launcher]: C:\Development\SPFX\SPFx\UnitTest\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe C:\Users\user\AppData\Local\Temp\karma-37543242/capture.js
24 05 2018 16:38:51.107:DEBUG [web-server]: serving: c:\Users\user\Downloads\spfx-react-unit-testing-master\node_modules\karma\static/client.html
24 05 2018 16:38:51.123:DEBUG [web-server]: serving: c:\Users\user\Downloads\spfx-react-unit-testing-master\node_modules\karma\static/karma.js
24 05 2018 16:38:51.202:DEBUG [karma]: A browser has connected on socket DF102l5mZHiF8Ci3AAAA
24 05 2018 16:38:58.975:WARN [launcher]: PhantomJS have not captured in 10000 ms, killing.
24 05 2018 16:38:59.018:DEBUG [launcher]: Process PhantomJS exited with code 0
24 05 2018 16:38:59.019:DEBUG [temp-dir]: Cleaning temp dir C:\Users\user\AppData\Local\Temp\karma-37543242
24 05 2018 16:38:59.028:INFO [launcher]: Trying to start PhantomJS again (1/2).
24 05 2018 16:38:59.029:DEBUG [launcher]: Restarting PhantomJS
24 05 2018 16:38:59.030:DEBUG [temp-dir]: Creating temp dir at C:\Users\user\AppData\Local\Temp\karma-37543242
24 05 2018 16:38:59.035:DEBUG [launcher]: C:\Development\SPFX\SPFx\UnitTest\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe C:\Users\user\AppData\Local\Temp\karma-37543242/capture.js C:\Users\user\AppData\Local\Temp\karma-37543242/capture.js
24 05 2018 16:39:01.024:DEBUG [web-server]: serving (cached): c:\Users\user\Downloads\spfx-react-unit-testing-master\node_modules\karma\static/client.html
24 05 2018 16:39:01.039:DEBUG [web-server]: serving (cached): c:\Users\user\Downloads\spfx-react-unit-testing-master\node_modules\karma\static/karma.js
24 05 2018 16:39:01.098:DEBUG [karma]: A browser has connected on socket 6g34SRmPoEGt7e0nAAAB
24 05 2018 16:39:09.044:WARN [launcher]: PhantomJS have not captured in 10000 ms, killing.
24 05 2018 16:39:09.066:DEBUG [launcher]: Process PhantomJS exited with code 0
24 05 2018 16:39:09.067:DEBUG [temp-dir]: Cleaning temp dir C:\Users\user\AppData\Local\Temp\karma-37543242
24 05 2018 16:39:09.072:INFO [launcher]: Trying to start PhantomJS again (2/2).
24 05 2018 16:39:09.073:DEBUG [launcher]: Restarting PhantomJS
24 05 2018 16:39:09.074:DEBUG [temp-dir]: Creating temp dir at C:\Users\user\AppData\Local\Temp\karma-37543242
24 05 2018 16:39:09.078:DEBUG [launcher]: C:\Development\SPFX\SPFx\UnitTest\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe C:\Users\user\AppData\Local\Temp\karma-37543242/capture.js C:\Users\user\AppData\Local\Temp\karma-37543242/capture.js C:\Users\user\AppData\Local\Temp\karma-37543242/capture.js
24 05 2018 16:39:11.062:DEBUG [web-server]: serving (cached): c:\Users\user\Downloads\spfx-react-unit-testing-master\node_modules\karma\static/client.html
24 05 2018 16:39:11.062:DEBUG [web-server]: serving (cached): c:\Users\user\Downloads\spfx-react-unit-testing-master\node_modules\karma\static/karma.js
24 05 2018 16:39:11.133:DEBUG [karma]: A browser has connected on socket Wac_xgX-0Y6QiJLlAAAC
24 05 2018 16:39:19.083:WARN [launcher]: PhantomJS have not captured in 10000 ms, killing.
24 05 2018 16:39:19.105:DEBUG [launcher]: Process PhantomJS exited with code 0
24 05 2018 16:39:19.106:DEBUG [temp-dir]: Cleaning temp dir C:\Users\user\AppData\Local\Temp\karma-37543242
24 05 2018 16:39:19.110:ERROR [launcher]: PhantomJS failed 2 times (timeout). Giving up.

Recommend Projects

velingeorgiev / spfx-react-unit-testing Goto Github PK