Sp-dev-fx-webparts: Debug tests in React

[lipalath-ms]

Category

• [x] Question
• [ ] Bug
• [ ] Enhancement

How do I debug tests? I tried putting breakpoints and they never hit. Please let me know if there is a way.

[VelinGeorgiev]

What testing framework are you using?

[lipalath-ms]

enzyme

[VelinGeorgiev]

Enzyme, mocha, sinon? or Jest, enzyme, sinon?

[lipalath-ms]

Jest, enzyme, sinon

[VelinGeorgiev]

You can visit my blog. There is a short 15 min video recorded by the PnP community on it. I hope that can give you more information: https://blog.velingeorgiev.com/unit-test-your-sharepoint-framework-solution-with-jest

[lipalath-ms]

Thank you @VelinGeorgiev

[VelinGeorgiev]

Are you using that sample https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-jest-testing?

If yes, bear in mind there is setup you should do. It is in the readme file, but I can add it here as well

Important: The dedug configurations should be placed in the .vscode -> launch.json file to make the debugging work
The sample has folder named vscode where the launch.json configuration for debuggind jest is stored. The configurations should be copied to your .vscode folder -> launch.json file. Once copied into your launch.json, then they will appear in your visual studio code debugging tab.

[lipalath-ms]

Yes, I am using that sample. Thanks!

[lipalath-ms]

@VelinGeorgiev Could you please share some links on writing tests using Jest, enzyme, sinon framework?

[VelinGeorgiev]

• The best resource on Jest for me would be the Jest API documentation -Jest API
• Good resource for Enzyme is
• Enzyme API
• Good resource for Sinonjs is
• Sinonjs API

Blogs that use both:

• @estruyf blogs on how to test SPFx using Enzyme and Mocha
• @estruyf blogs on how to test SPFx using Enzyme and Jest
• @VelinGeorgiev - how to test SPFx using Enzyme and Jest

Projects with unit tests:

• The sp-dev-fx-controls-react - Enzyme and Sinon
• The sp-dev-fx-property-controls - Sinon
• The Office 365 CLI that has over 5K Tests atm for Sinon

Samples with tests:

• https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-jest-testing
• https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-rxjs-event-emitter
• https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-yammer-api
• https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-events-aggregator
• https://github.com/estruyf/spfx-testing-wp

In general, there aren't any jump start tutorials, you will have to dig into samples and learn how the rest did it. I can try help you and answer as much as I can. My plan is to create GitHub readme document with basics, but it is at the bottom of my todo list :(

PS: Mocha and Jest are similar so the samples that use Mocha instead of Jest can also help you do Jest tests better so please do not ignore that piece of content.

[lipalath-ms]

@VelinGeorgiev Thank you so much!