How would you unit test a WebPart that extends BaseClientSideWebPart?

Question

I want to unit test that webpart, but I am not sure how to go about it. I have around 30 properties and 50 private variables. How do I mock them? I use PnP to fetch values for the private values, but I am not sure how to mock the properties. Do you have any example? Because it's not a React component and I don't pass props, I am not sure how to go about mocking. Also, we don't use a store or anything of the sort.

Answer 1

You can refer to the below sample JSON to perform the mock testing.

"scripts": {
    ...
    "test": "jest" // instead of gulp test
  },
  ...
 "devDependencies": {
   ...
    "@types/jest": "22.2.3",
    "jest": "22.4.3",
    "ts-jest": "22.4.5",
    "identity-obj-proxy": "3.0.0",
    "react-test-renderer": "15.6.2",
   ...
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\.(ts|tsx)$": "ts-jest"
    },
    "testMatch": [
      "**/src/**/*.test.+(ts|tsx|js)"
    ],
    "collectCoverage": true,
    "coverageReporters": [
      "json",
      "lcov",
      "text",
      "cobertura"
    ],
    "coverageDirectory": "<rootDir>/jest",
    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
    "testResultsProcessor": "jest-junit",
    "coverageThreshold": {
      "global": {
        "branches": 100,
        "functions": 100,
        "lines": 100,
        "statements": 100
      }
    }
  }
  ....

You can refer to the below article which has video as well, how we can perform unit testing with mock JSON in SPFx.

Unit Test your SharePoint Framework solution with Jest