Merge pull request SharePoint#4727 from baywet/bugfix/ci-cd-reporter

fixes SharePoint#4217 : cicd updated junit configuration and sample unit test

Author: andrewconnell

docs/images/azure-devops-spfx-04b.png

@@ -60,7 +60,7 @@ The SharePoint Framework does not provide a testing framework by default (since
 By default SharePoint Framework projects does not include a testing Framework. We will leverage Jest in this sample.
 
 ```shell
-npm i [email protected] jest jest-junit @voitanos/jest-preset-spfx-react16 -D
+npm i jest jest-junit @voitanos/jest-preset-spfx-react16 -D
 ```
 
 > [!NOTE] 
@@ -81,7 +81,11 @@ You also need to configure Jest, to do so create a file `config/jest.config.json
   ],
   "reporters": [
     "default",
-    "jest-junit"
+    ["jest-junit", {
+      "suiteName": "jest tests",
+      "outputDirectory": "temp/test/junit",
+      "outputName": "junit.xml"
+    }]
   ]
 }
 ```
@@ -90,40 +94,28 @@ You also need to configure your project to leverage jest when typing commands. T
     "test": "./node_modules/.bin/jest --config ./config/jest.config.json",
     "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
 ```
-Finally you need to modify the `package.json` to configure the reporter. Reporters are plugins that provide new export formats for test results to test runners. To do so edit `package.json` and add these lines after the `scripts` property.
-
-```JSON
-  "jest-junit": {
-    "output": "temp/test/junit/junit.xml",
-    "usePathForSuiteName": "true"
-  }
-```
 #### Writing a unit test
 To write your first unit test, create a new file `src/webparts/webPartName/tests/webPartName.spec.ts` and add the following content:
 ```TS
-/// <reference types="mocha" />
-import {assert, expect} from 'chai';
+import 'jest'
 
 describe("webPartName", () => {
-  it("should do something", () => {
-    assert.ok(true, 'should be true');
-  });
-  it("should add numbers Sync fluent", () => {
-    const result:number = 1 + 3;
-    expect(result).to.eq(4); // fluent API
+  test("should add numbers Sync fluent", () => {
+    const result = 1 + 3;
+    expect(result).toBe(4); // fluent API
   });
 });
 ```
 > [!NOTE] 
-> You can learn more about writing unit tests using Jest and Chai [here](https://jestjs.io/docs/en/getting-started.html).
+> You can learn more about writing unit tests using Jest [here](https://jestjs.io/docs/en/getting-started.html). You can learn more about testing react applications with Jest and Enzyme [here](https://jestjs.io/docs/en/tutorial-react) (you can ignore the setup part). 
 
 ### Importing test results
-In order to get test results information attached with the build results, you need to import these test results from the test runner into Azure DevOps. To do so, add a new `Publish Test Results` task. Set the `Test results files` field to `temp/test/junit/junit.xml` and the `Search folder` to `$(Build.SourcesDirectory)`.  
+In order to get test results information attached with the build results, you need to import these test results from the test runner into Azure DevOps. To do so, add a new `Publish Test Results` task. Set the `Test results files` field to `**/junit.xml` and the `Search folder` to `$(Build.SourcesDirectory)`.  
 ![importing test results](../../images/azure-devops-spfx-04b.png)
 
 ### Importing code coverage information
 
-In order to get code coverage reported with the build status you need to add a task to import that information. To configure the code coverage information, add the `publish code coverage results` tasks. Make sure you set the tool to `Cobertura`, `Summary files` to `$(Build.SourcesDirectory)/temp/test/cobertura-coverage.xml` and `Report Directory` to `$(Build.SourcesDirectory)/temp/test`.
+In order to get code coverage reported with the build status you need to add a task to import that information. To configure the code coverage information, add the `publish code coverage results` tasks. Make sure you set the tool to `Cobertura`, `Summary files` to `$(Build.SourcesDirectory)/**/*-coverage.xml`.
 
 ![importing coverage information](../../images/azure-devops-spfx-05.png)