Alright, first things first — this post is for me. I’m just promoting a note from my Notion to a post.
Maybe someone finds it useful, who knows 🤷♂️.
But don’t get me wrong, the real reason is just to have it handy in case I can’t log into my Notion account.
Context: I'm preparing the resources for my next React course and we're to talk about unit testing (Jest).
We have already npm create vite@latest, and created the well-known <Button />
We want this to work: button.test.tsx
import { render, screen } from "@testing-library/react";
import { Button } from "./button";
describe("<Button />", () => {
it("renders: match snapshot", () => {
render(<Button onClick={jest.fn()} />);
const button = screen.getByRole("button");
expect(button).toMatchSnapshot();
});
});
STEPS
npm i --save-dev jest
npm init jest@latest
Dependencies (ts)
npm i -D @types/jest
npm i -D @testing-library/react
npm i -D ts-jest
npm i -D jest-environment-jsdom
npm i -D jest-transform-stub
/**
* For a detailed explanation regarding each configuration property, visit:
* https://jestjs.io/docs/configuration
*/
/** @type {import('jest').Config} */
const config = {
clearMocks: true,
collectCoverage: true,
collectCoverageFrom: ["src/**"],
coverageDirectory: "coverage",
coverageProvider: "v8",
moduleDirectories: ["node_modules", "src"], // @see https://stackoverflow.com/a/51174924/1614677
preset: "ts-jest",
resetMocks: true,
restoreMocks: true,
roots: ["<rootDir>/src"],
testEnvironment: "jsdom",
testMatch: ["**/?(*.)+(spec|test).[tj]s?(x)"],
transform: {
"^.+\\.(js|ts|tsx)$": "ts-jest",
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
};
export default config;
Won't work cause of the default tsconfig (2x tsconfigs by default)... this is my tsconfig.json
{
"compilerOptions": {
/* type checking */
"strict": true, // turn on strict mode family
"noFallthroughCasesInSwitch": true, // every switch case should break or return
/* modules */
"baseUrl": "src", // base path for imports
"module": "ESNext", // ESModules & allows «import.meta»
"moduleResolution": "Node", // recommended: ts mimic node resolution
"resolveJsonModule": true, // allows .json files
/* language */
"target": "ES2016",
"jsx": "react-jsx",
"lib": [
"DOM",
"DOM.Iterable",
"ESNext"
],
/* js support */
"allowJs": true, // allows .js files
/* Interop Constraints */
"esModuleInterop": true, // recommended: compatibility with libraries using CommonJS
"allowSyntheticDefaultImports": true, // allows «import Foo from 'foo'»
"forceConsistentCasingInFileNames": true, // checks for case sensitivity file names
"isolatedModules": true, // force all files to import/export (no global scripts)
/* completeness */
"skipLibCheck": true, // skip checking node_modules/*.d.ts files
/* emit */
"noEmit": true // checks for errors only
},
"include": [
"src"
]
}
==> output
PASS src/components/button.test.tsx
<Button />
✓ renders: match snapshot (35 ms)
› 1 snapshot written.
--
nice.
SOCIAL SHARE CARD GENERATOR