jest enzyme and scss all working

README.md

@@ -15,6 +15,7 @@ STACK:
 - 🚀 SCSS, GSAP, Bulma, FontAwesome
 
   - SCSS (css modules, variables and nested style rules)
+    App.tsx imports global.scss, imports main.scss, imports all other rules.
 
   - GSAP (animations)
 
@@ -50,4 +51,13 @@ Each Page Layout / Setup:
     </main>
 
 </div>
-```
+```
+
+Known Bugs / Issues To Circle Back And Fix:
+
+- NextJS issue with SCSS modules. If you attempt to `@use` & access variables that way, eg `background-color: colors.$my_color` you will get "invalid expression" errors. This is also def true of @use'ing mixins.
+
+- SCSS files not being imported into Jest unit tests. Behaviour is that media queries responsive behav is not happening in Unit Test env.
+
+
+

__mocks__/styleMock.js

@@ -1,8 +1 @@
-// const styles = {
-//     footer: "footer",
-//     footerSocialsContainer: "footerSocialsContainer",
-// }
-
-// module.exports = styles;
-
 module.exports = {};

components/footer/__snapshots__/footer.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Footer /> should match snapshot 1`] = `ReactWrapper {}`;

components/footer/footer.module.scss

@@ -1,4 +1,5 @@
-@import '../../scss/variables.scss';
+
+@import "../../scss/main";
 
 .footer {
 	background-color: #d4d0d2;
@@ -11,11 +12,18 @@
 	border-width: 60%;
 	border: 4px solid black;
 	height: auto;
+	transition: .2s;
+	opacity: 1;
+	@include bounce(rotate(-1deg));
 
-	.p {
+	p {
 		color: $text-colour;
 		border: 1px solid $border-dark;
 		font-size: 9px;
+		display: none;
+		@include sm {
+			display: inline;
+		}
 	}
 	.footerSocialsContainer {
 		width: 100%;
@@ -29,6 +37,7 @@
 			max-width: 30px;
 			min-height: 30px;
 			max-height: 30px;
+
 		}
 	}
 }

__tests__/footer.test.tsx → components/footer/footer.test.tsx

@@ -1,16 +1,28 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import Footer from '../components/footer';
+import { mount, shallow } from 'enzyme';
+import Footer from './index';
 
 describe('<Footer />', (): void => {
-	let shallowWrapper: any;
+	let wrapper: any;
 
 	beforeAll((): void => {
-		shallowWrapper = mount(<Footer />);
+		wrapper = mount(<Footer />);
+	});
+
+	it('should match snapshot', () => {
+		expect(wrapper).toMatchSnapshot();
 	});
 
 	it('should render footer without exploding', (): void => {
-		expect(shallowWrapper.find('footer').exists()).toBe(true);
+		expect(wrapper.find('footer').exists()).toBe(true);
+	});
+
+	it('should show copyright information', () => {
+		const renderedText: string = wrapper.find('p').text();
+
+		const expectedText: string =
+			'Funk-27 by Aid Thompson. The source code is licensedMIT. The website content is licensed CC BY NC SA 4.0.';
+		expect(renderedText).toBe(expectedText);
 	});
 
 	describe('Social Icons', (): void => {
@@ -73,12 +85,4 @@ describe('<Footer />', (): void => {
 			);
 		});
 	});
-	describe('Responsiveness', (): void => {
-		it('should show all icons if width > 1024', () => {
-
-		})
-	})
 });
-
-// let someValue: any = "this is a string";
-// let strLength: number = (someValue as string).length;

components/navbar/index.tsx

@@ -79,10 +79,10 @@ function Navbar({}: Props): ReactElement {
 					<div className="navbar-end">
 						<div className="navbar-item">
 							<div className="buttons">
-								<a className="button is-primary">
+								<a className="button is-warning">
 									<strong>Sign up</strong>
 								</a>
-								<a className="button is-light">Log in</a>
+								<a className="button is-warning is-light">Log in</a>
 							</div>
 						</div>
 					</div>

jest.config.js

@@ -9,8 +9,8 @@ module.exports = {
     "^.+\\.(ts|tsx)$": "ts-jest",
     "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub" // anything style related is ignored and mapped to jest-transform-stub module
   },
-  testMatch: ["**/__tests__/*.(ts|tsx)"],
-  setupFiles: ["./jest.setup.js"],
+  testMatch: ["**/components/**/*.test.(ts|tsx)"],
+  setupFiles: ["./jest.setup.ts"],
   testPathIgnorePatterns: ["./.next/", "./node_modules/"],
   globals: {
     "ts-jest": {