Unit Tests

.gitignore

@@ -4,4 +4,5 @@ package-lock.json
 *.lock
 .DS_Store
 dist
-yarn-error.log
+coverage
+yarn-error.log

.husky/pre-commit

@@ -1,7 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# npx --no-install pretty-quick
-# npx pretty-quick --staged
-# yarn lint-staged
 yarn version --no-git-tag-version --patch && git add .

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
+}

jest.config.ts

@@ -0,0 +1,209 @@
+/*
+ * For a detailed explanation regarding each configuration property and type check, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+export default {
+	// All imported modules in your tests should be mocked automatically
+	// automock: false,
+
+	// Stop running tests after `n` failures
+	// bail: 0,
+
+	// The directory where Jest should store its cached dependency information
+	// cacheDirectory: "C:\\Users\\manis\\AppData\\Local\\Temp\\jest",
+
+	// Automatically clear mock calls, instances, contexts and results before every test
+	// clearMocks: false,
+
+	// Indicates whether the coverage information should be collected while executing the test
+	// collectCoverage: true,
+
+	// An array of glob patterns indicating a set of files for which coverage information should be collected
+	// collectCoverageFrom: undefined,
+
+	// The directory where Jest should output its coverage files
+	// coverageDirectory: "coverage",
+
+	// An array of regexp pattern strings used to skip coverage collection
+	// coveragePathIgnorePatterns: [
+	//   "\\\\node_modules\\\\"
+	// ],
+
+	// Indicates which provider should be used to instrument code for coverage
+	// coverageProvider: "babel",
+
+	// A list of reporter names that Jest uses when writing coverage reports
+	// coverageReporters: [
+	//   "json",
+	//   "text",
+	//   "lcov",
+	//   "clover"
+	// ],
+
+	// An object that configures minimum threshold enforcement for coverage results
+	// coverageThreshold: undefined,
+
+	// A path to a custom dependency extractor
+	// dependencyExtractor: undefined,
+
+	// Make calling deprecated APIs throw helpful error messages
+	// errorOnDeprecated: false,
+
+	// The default configuration for fake timers
+	// fakeTimers: {
+	//   "enableGlobally": false
+	// },
+
+	// Force coverage collection from ignored files using an array of glob patterns
+	// forceCoverageMatch: [],
+
+	// A path to a module which exports an async function that is triggered once before all test suites
+	// globalSetup: undefined,
+
+	// A path to a module which exports an async function that is triggered once after all test suites
+	// globalTeardown: undefined,
+
+	// A set of global variables that need to be available in all test environments
+	// globals: {},
+
+	// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+	// maxWorkers: "50%",
+
+	// An array of directory names to be searched recursively up from the requiring module's location
+	// moduleDirectories: [
+	//   "node_modules"
+	// ],
+
+	// An array of file extensions your modules use
+	// moduleFileExtensions: [
+	//   "js",
+	//   "mjs",
+	//   "cjs",
+	//   "jsx",
+	//   "ts",
+	//   "tsx",
+	//   "json",
+	//   "node"
+	// ],
+
+	// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+	// moduleNameMapper: {},
+
+	// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+	// modulePathIgnorePatterns: [],
+
+	// Activates notifications for test results
+	// notify: false,
+
+	// An enum that specifies notification mode. Requires { notify: true }
+	// notifyMode: "failure-change",
+
+	// A preset that is used as a base for Jest's configuration
+	// preset: undefined,
+
+	// Run tests from one or more projects
+	// projects: undefined,
+
+	// Use this configuration option to add custom reporters to Jest
+	// reporters: undefined,
+
+	// Automatically reset mock state before every test
+	// resetMocks: false,
+
+	// Reset the module registry before running each individual test
+	// resetModules: false,
+
+	// A path to a custom resolver
+	// resolver: undefined,
+
+	// Automatically restore mock state and implementation before every test
+	// restoreMocks: false,
+
+	// The root directory that Jest should scan for tests and modules within
+	// rootDir: undefined,
+
+	// A list of paths to directories that Jest should use to search for files in
+	// roots: [
+	//   "<rootDir>"
+	// ],
+
+	// Allows you to use a custom runner instead of Jest's default test runner
+	// runner: "jest-runner",
+
+	// The paths to modules that run some code to configure or set up the testing environment before each test
+	// setupFiles: [],
+
+	// A list of paths to modules that run some code to configure or set up the testing framework before each test
+	// setupFilesAfterEnv: [],
+
+	// The number of seconds after which a test is considered as slow and reported as such in the results.
+	// slowTestThreshold: 5,
+
+	// A list of paths to snapshot serializer modules Jest should use for snapshot testing
+	// snapshotSerializers: [],
+
+	// The test environment that will be used for testing
+	// testEnvironment: "jest-environment-node",
+
+	// Options that will be passed to the testEnvironment
+	// testEnvironmentOptions: {},
+
+	// Adds a location field to test results
+	// testLocationInResults: false,
+
+	// The glob patterns Jest uses to detect test files
+	// testMatch: [
+	//   "**/__tests__/**/*.[jt]s?(x)",
+	//   "**/?(*.)+(spec|test).[tj]s?(x)"
+	// ],
+
+	// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+	// testPathIgnorePatterns: [
+	//   "\\\\node_modules\\\\"
+	// ],
+
+	// The regexp pattern or array of patterns that Jest uses to detect test files
+	// testRegex: [],
+
+	// This option allows the use of a custom results processor
+	// testResultsProcessor: undefined,
+
+	// This option allows use of a custom test runner
+	// testRunner: "jest-circus/runner",
+
+	// A map from regular expressions to paths to transformers
+	// transform: undefined,
+
+	// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+	// transformIgnorePatterns: [
+	//   "\\\\node_modules\\\\",
+	//   "\\.pnp\\.[^\\\\]+$"
+	// ],
+
+	// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+	// unmockedModulePathPatterns: undefined,
+
+	// Indicates whether each individual test should be reported during the run
+	// verbose: undefined,
+
+	// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+	// watchPathIgnorePatterns: [],
+
+	// Whether to use watchman for file crawling
+	// watchman: true,
+	preset: 'ts-jest',
+	testEnvironment: 'jsdom',
+	testMatch: ['**/__tests__/**/*.+(ts|js|tsx|jsx)', '**/?(*.)+(spec|test).+(ts|js|tsx|jsx)'],
+	transform: {
+		'^.+\\.(ts|tsx)$': 'ts-jest',
+		'^.+\\.(js|ts)$': 'babel-jest',
+	},
+	moduleNameMapper: {
+		'\\.svg': '<rootDir>/src/__test__/__mocks__/svg.js',
+		'\\.(css|scss)$': 'identity-obj-proxy',
+	},
+	moduleFileExtensions: ['ts', 'tsx', 'js'],
+	setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+	// roots: ['./src/__test__/'],
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@aftershootco/unicorn-design-system",
-	"version": "1.0.46",
+	"version": "1.0.48",
 	"description": "",
 	"repository": {
 		"url": "https://github.com/aftershootco/Unicorn-Design-System",
@@ -9,7 +9,9 @@
 	"scripts": {
 		"build": "rollup -c",
 		"storybook": "start-storybook -p 6006",
-		"build-storybook": "build-storybook"
+		"build-storybook": "build-storybook",
+		"test": "jest",
+		"prepare": "husky install"
 	},
 	"author": "",
 	"license": "ISC",
@@ -18,8 +20,11 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.19.1",
-		"@rollup/plugin-commonjs": "^22.0.2",
+		"@babel/core": "^7.19.3",
+		"@babel/preset-env": "^7.19.3",
+		"@babel/preset-react": "^7.18.6",
+		"@babel/preset-typescript": "^7.18.6",
+		"@rollup/plugin-commonjs": "^23.0.0",
 		"@rollup/plugin-node-resolve": "^14.1.0",
 		"@rollup/plugin-typescript": "^8.5.0",
 		"@rollup/plugin-url": "^7.0.0",
@@ -31,31 +36,45 @@
 		"@storybook/preset-scss": "^1.0.3",
 		"@storybook/react": "^6.5.12",
 		"@storybook/testing-library": "^0.0.13",
-		"@svgr/rollup": "^6.3.1",
-		"@types/react": "^18.0.20",
+		"@svgr/rollup": "^6.4.0",
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/jest": "^29.1.2",
+		"@types/react": "^18.0.21",
 		"@types/react-dom": "^18.0.6",
-		"autoprefixer": "^10.4.11",
+		"autoprefixer": "^10.4.12",
+		"babel-jest": "^29.1.2",
 		"babel-loader": "^8.2.5",
 		"css-loader": "^6.7.1",
 		"husky": "^8.0.1",
+		"identity-obj-proxy": "^3.0.0",
+		"jest": "^29.1.2",
+		"jest-environment-jsdom": "^29.1.2",
+		"jest-svg-transformer": "^1.0.0",
 		"node-sass": "^7.0.3",
-		"postcss": "^8.4.16",
+		"postcss": "^8.4.17",
 		"postcss-flexbugs-fixes": "^5.0.2",
 		"postcss-url": "^10.1.3",
-		"rollup": "^2.79.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-test-renderer": "^18.2.0",
+		"rollup": "^2.79.1",
 		"rollup-plugin-babel": "^4.4.0",
-		"rollup-plugin-dts": "^4.2.2",
+		"rollup-plugin-dts": "^4.2.3",
 		"rollup-plugin-images": "^1.0.0",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.2",
 		"rollup-plugin-scss": "^3.0.0",
 		"rollup-plugin-svg": "^2.0.0",
 		"rollup-plugin-svg-import": "^1.6.0",
 		"rollup-plugin-terser": "^7.0.2",
-		"sass-loader": "^13.0.2",
+		"sass-loader": "^13.1.0",
 		"style-loader": "^3.3.1",
+		"ts-jest": "^29.0.3",
+		"ts-node": "^10.9.1",
 		"tslib": "^2.4.0",
-		"typescript": "^4.8.3",
+		"typescript": "^4.8.4",
 		"webpack": "^5.74.0"
 	},
 	"main": "dist/index.cjs.js",

rollup.config.js

@@ -1,15 +1,15 @@
-import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
 import typescript from '@rollup/plugin-typescript'
-import dts from 'rollup-plugin-dts'
-import { terser } from 'rollup-plugin-terser'
-import peerDepsExternal from 'rollup-plugin-peer-deps-external'
-import svg from 'rollup-plugin-svg'
-import postcss from 'rollup-plugin-postcss'
 import url from '@rollup/plugin-url'
-import postcssUrl from 'postcss-url'
 import svgr from '@svgr/rollup'
+import postcssUrl from 'postcss-url'
 import babel from 'rollup-plugin-babel'
+import dts from 'rollup-plugin-dts'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss'
+import svg from 'rollup-plugin-svg'
+import { terser } from 'rollup-plugin-terser'
 
 const packageJson = require('./package.json')
 

setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'