[Tech debt/docs] Unit test updates (#5075)

* Update coverage collection to include more modern filetypes

* Update running test command docs

- no need to specify `yarn run`
- no need for an extra `--` before passing in more flags

* Update test example
- not to use sinon vs standard expect() syntax
- to have spacing that will better match what prettier will lint to

scripts/jest/config.json

@@ -6,12 +6,12 @@
     "<rootDir>/packages/eslint-plugin"
   ],
   "collectCoverageFrom": [
-    "src/components/**/*.js",
-    "!src/components/index.js",
-    "!src/components/**/*/index.js",
-    "src/services/**/*.js",
-    "!src/services/index.js",
-    "!src/services/**/*/index.js"
+    "src/components/**/*.{ts,tsx,js,jsx}",
+    "!src/components/index.ts",
+    "!src/components/**/*/index.ts",
+    "src/services/**/*.{ts,tsx,js,jsx}",
+    "!src/services/index.ts",
+    "!src/services/**/*/index.ts"
   ],
   "moduleNameMapper": {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/scripts/jest/mocks/file_mock.js",

wiki/component-development.md

@@ -33,18 +33,18 @@ You can do this using Yeoman, or you can do it manually if you prefer.
 
 ### Running tests
 
-`yarn run test-unit` runs the Jest unit tests once.
+`yarn test-unit` runs the Jest unit tests once.
 
-`yarn run test-unit button` will run tests with "button" in the spec name.
+`yarn test-unit button` will run tests with "button" in the spec name.
 
-You can pass other [Jest CLI arguments](https://jestjs.io/docs/cli). To pass flags or other options, you'll need to follow the format of `yarn run test-unit -- [arguments]`. For example:
+You can pass other [Jest CLI arguments](https://jestjs.io/docs/cli). For example:
 
-`yarn run test-unit -- -u` will update your snapshots. 
-Note: if you are experiencing failed builds in Jenkins related to snapshots, then try clearing the cache first `yarn run test-unit -- --clearCache`.
+`yarn test-unit -u` will update your snapshots. 
+Note: if you are experiencing failed builds in Jenkins related to snapshots, then try clearing the cache first `yarn test-unit --clearCache`.
 
-`yarn run test-unit -- --watch` watches for changes and runs the tests as you code.
+`yarn test-unit --watch` watches for changes and runs the tests as you code.
 
-`yarn run test-unit -- --coverage` generates a code coverage report showing you how
+`yarn test-unit --coverage` generates a code coverage report showing you how
 fully-tested the code is, located at `reports/jest-coverage`.
 
 ### Writing tests

wiki/testing.md

@@ -7,7 +7,7 @@ contains `{component name}.js`.
 
 ## Updating snapshots
 
-When you change a component in a way that affects the markup, you will need to update the snapshot in order for the tests to succeed. To do so, run `yarn run test-unit -u`. This will update all snapshots in the repo. You can also add any string to the end of the command to run the tests only on directories that contain that string. For example, `yarn run test-unit -u button` will only update the tests for directories that **contain** `button`.
+When you change a component in a way that affects the markup, you will need to update the snapshot in order for the tests to succeed. To do so, run `yarn test-unit -u`. This will update all snapshots in the repo. You can also add any string to the end of the command to run the tests only on directories that contain that string. For example, `yarn test-unit -u button` will only update the tests for directories that **contain** `button`.
 
 ## Test helpers
 
@@ -44,8 +44,7 @@ describe('YourComponent', () => {
       </YourComponent>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   describe('props', () => {
@@ -55,8 +54,7 @@ describe('YourComponent', () => {
           <YourComponent color="blue" />
         );
 
-        expect(component)
-          .toMatchSnapshot();
+        expect(component).toMatchSnapshot();
       });
     });
 
@@ -68,7 +66,7 @@ describe('YourComponent', () => {
           <YourComponent onClick={onClickHandler} />
         );
 
-        sinon.assert.notCalled(onClickHandler);
+        expect(onClickHandler).not.toHaveBeenCalled();
       });
 
       test('is called when the button is clicked', () => {
@@ -81,7 +79,7 @@ describe('YourComponent', () => {
         // NOTE: This is the only way to find this button.
         component.find('button').simulate('click');
 
-        sinon.assert.calledOnce(onClickHandler);
+        expect(onClickHandler).toHaveBeenCalledTimes(1);
       });
     });
   });