🚀

Richard Munoz scottgamer

🚀

Software developer and Javascript enthusiast

scottgamer / PostItem.test.tsx

Created March 31, 2022 15:07

Post item without mocked fetch

	import { render, screen, waitFor } from "@testing-library/react";
	import userEvent from "@testing-library/user-event";
	import { rest } from "msw";
	import CONSTANTS from "../../constants";
	import IPost from "../../interfaces/Post";
	import server from "../../mocks/server";
	import PostItem from "./PostItem";

	const post: IPost = {
	id: 1,

scottgamer / handlers.ts

Created March 31, 2022 15:06

get comments request hanlder

	function getComments() {
	return rest.get(`${CONSTANTS.API_URL}/comments`, (req, res, ctx) => {
	return res(
	ctx.status(200),
	ctx.json([
	{
	id: 1,
	name: "Comment name 1",
	email: "richosojason@msn.com",
	body: "Comment body 2",

scottgamer / Posts.test.tsx

Created March 31, 2022 15:01

Tests without mocked fetch

	import React from "react";
	import { render, screen } from "@testing-library/react";
	import Posts from "./Posts";
	import server from "../../mocks/server";
	import { rest } from "msw";
	import CONSTANTS from "../../constants";

	describe("Posts test suite", () => {
	test("Renders the component with loading state", async () => {
	render(<Posts />);

scottgamer / setupTests.ts

Created March 31, 2022 14:18

set up tests with mock server

	import server from "./mocks/server";

	beforeAll(() => server.listen());
	afterEach(() => server.resetHandlers());
	afterAll(() => server.close());

scottgamer / server.ts

Created March 31, 2022 14:16

mock server

	import { setupServer } from "msw/node";
	import { handlers } from "./handlers";

	const server = setupServer(...handlers);

	export default server;

scottgamer / handlers.ts

Last active March 31, 2022 14:12

msw initial handler

	import { rest } from "msw";
	import CONSTANTS from "../constants";

	function getPosts() {
	return rest.get(`${CONSTANTS.API_URL}/posts`, (req, res, ctx) => {
	return res(
	ctx.status(200),
	ctx.json([
	{
	userId: 1,

scottgamer / Post.test.tsx

Last active March 31, 2022 14:05

mocking modules

	const mockedFetch = jest.fn(() =>
	Promise.resolve({
	json: () => Promise.resolve({}),
	})
	) as jest.Mock;

	global.fetch = mockedFetch;

	test("Renders the component with posts", async () => {
	render(<Posts />);

scottgamer / classes-inheritance.ts

Last active June 22, 2021 17:33

classes

	import { Helicopter } from "./mixins";

	class Vehicle {
	constructor(public color: string) {}

	protected honk(): void {
	console.log("beep");
	}
	}

scottgamer / index.tsx

Last active March 16, 2021 03:24

form with error messages

	<Formik
	initialValues={initialValues}
	onSubmit={onSubmit}
	validationSchema={validationSchema}
	>
	<Form className="form">
	<label htmlFor="firstName" className="form__label">
	First Name
	</label>
	<Field

scottgamer / validationSchema.ts

Created March 16, 2021 03:18

initial validation schema

	import * as yup from "yup";

	const isRequiredMessage = "This field is required";

	export default yup.object().shape({
	firstName: yup.string().required(isRequiredMessage).max(10),
	lastName: yup.string().optional().max(10),
	email: yup.string().required(isRequiredMessage).email(),
	});