Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to unit test webparts? #243

Closed
artokai opened this issue Oct 18, 2016 · 9 comments

Comments

@artokai
Copy link

commented Oct 18, 2016

Category

  • Question
  • Typo
  • Bug
  • Enhancement / Suggestion
  • Additional article idea

Expected or Desired Behavior

SharePoint Framework tooling has a built-in support for running unit tests and the scaffolded project even contains a sample test-file. This is great as it encourages people to write unit tests, but unfortunately it does not seem to be possible to unit test the webpart-class itself. The unit test seems to always end up in an error, everytime I try to instantiace a new webpart instance inside a unit test.

When writing a unit test, one should be able to instantiate a new instance of the webpart class for example like this:

import {MockWebPartContext} from '@microsoft/sp-client-preview'

describe('HelloWorldWebPart', () => {
  it('should do create an instance of the webpart class', () => {
    let wp = new HelloWorldWebPart(new MockWebPartContext());
    assert.ok(true);
  });
});

Is this the correct way to initialize webpart instances in the unit tests or should they be unit tested in some other way?

Observed Behavior

When a unit test is executed using the command gulp test, it fails with the following error message:

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  Error: Cannot find module "@ms/odsp-utilities-bundle"

I've tried to initialize the webpart by passing both null and new MockWebpartContext() as the constructor parameter, but in both cases the webpart instantiation fails and the webpart cannot be unit tested.

The missing module @ms/odsp-utilities-bundle does not seem to be available through NPM.

Steps to Reproduce

  1. Scaffold a new spfx-webpart project

  2. Change the contents of the HelloWorld.test.ts to:

    import * as assert from 'assert';
    import HelloWorldWebPart from '../HelloWorldWebPart';
    import {MockWebPartContext} from '@microsoft/sp-client-preview'
    
    describe('HelloWorldWebPart', () => {
      it('should do create an instance of the webpart class', () => {
        let wp = new HelloWorldWebPart(new MockWebPartContext());
        assert.ok(true);
      });
    });
  3. Run gulp test

(These steps can reproduce the problem using the Drop 5 -version of the framework)

@chakkaradeep

This comment has been minimized.

Copy link
Contributor

commented Oct 20, 2016

We are working to document how to unit test web parts with a sample. Meanwhile, @nickpape-msft can help with some guidance.

@Rubonix

This comment has been minimized.

Copy link

commented Feb 27, 2017

Is there an update on this ? Has the guidance been produced yet ? I cannot find the guidance information anywhere and SPX is already at RC 0...

@estruyf

This comment has been minimized.

Copy link
Contributor

commented Mar 31, 2017

@artokai & @Rubonix I created a sample webpart with some unit tests which you can find here: https://github.com/estruyf/spfx-testing-wp.

This can give you a good start.

@artokai

This comment has been minimized.

Copy link
Author

commented Mar 31, 2017

Thanks @estruyf for the sample. It nicely demonstrates how you can unit test the different components of your webpart. However it's not actually testing the webpart class itself.

Of course you can (and probably even should) keep your webpart as simple as possible and just write the code that needs to be tested in other classes and/or components. If you for example are writing a Vanilla-JS webpart, you could just implement the render-method in a separate class and unit test that one instead of the actual WebPart.

But it would be nice to be able to write unit tests for the actual webpart-class too.

@estruyf

This comment has been minimized.

Copy link
Contributor

commented Mar 31, 2017

@artokai most of your logic will indeed be in the components itself, so it is better to test these directly. That way you have more control over you test cases.

At the moment there is still an issue with writing unit tests against the actual webpart class. There is a dependency missing, and cannot find it. Might be an internal one.

@petecuttriss

This comment has been minimized.

Copy link

commented Apr 2, 2017

Thanks @estruyf for taking the time to provide this. It's greatly appreciated.

@michel-weber

This comment has been minimized.

Copy link

commented Oct 4, 2017

And this is the blocking issue @estruyf mentioned (still not resolved at the time of writing):

Missing dependency during unit testing #526

@lahuey

This comment has been minimized.

Copy link

commented Mar 19, 2018

Hi,
Thank you for the feedback. Please add a feature request on UserVoice and depending on community interest we may or may not be able to make the fix.

@lahuey lahuey closed this Mar 19, 2018

@piero-b

This comment has been minimized.

Copy link

commented Apr 26, 2018

I have added a UserVoice to prioritise getting this fixed. Please up-vote it if you are interested as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.