Ensuring Export Consistency: A Unit Testing Approach

In today's fast-paced development environment, maintaining consistency and reliability is crucial. When creating and distributing a library of React components, it becomes essential to ensure that all components are exported correctly. In this article, I will discuss how I developed a unit test to validate the export consistency of my React components before deploying them to NPM.

The Challenge

During the installation of the package in other projects, we encountered issues where some components were not being exported properly. This led to unexpected behavior and caused frustration for users. To address this problem, I decided to develop a robust solution that would verify if all components with .tsx extensions were correctly exported in the src/index.tsx file.

/** Theme */
export { Colos } = "./Theme/Colors";
export { Icon } from "./Theme/Icon";

/** Typography */
export { Typography } from "./Typography";

/** Form */
export { Button } from "./Form/Button";
export { Filters } from "./Form/Filters";        

The Approach

To tackle this challenge, I created a unit test that leverages TypeScript and the Jest testing framework. Here's an overview of the steps I took:

File Discovery:

• I used the getFilesRecursively function, which I implemented separately, to obtain a list of all .tsx files in the src directory.
• I specified a set of file extensions to include and a list of extensions to ignore, such as test files, stories, and specific components that should not be exported.

const fs = require("fs");
const path = require("path");

export function getFilesRecursively(directory, fileExtensions, ignoreExtensions) {
? let files = [];

? function traverseDirectory(currentPath, isRootDirectory = false) {
? ? const entries = fs.readdirSync(currentPath, { withFileTypes: true });

? ? for (const entry of entries) {
? ? ? const fullPath = path.join(currentPath, entry.name);

? ? ? if (
? ? ? ? entry.isFile() &&
? ? ? ? fileExtensions.includes(path.extname(entry.name)) &&
? ? ? ? !ignoreExtensions.some(ext => entry.name.endsWith(ext))
? ? ? ) {
? ? ? ? files.push(fullPath);
? ? ? } else if (entry.isDirectory()) {
? ? ? ? const shouldIgnore = ignoreExtensions.some(ignorePath => {
? ? ? ? ? return (
? ? ? ? ? ? ignorePath === fullPath ||
? ? ? ? ? ? ignorePath === path.dirname(fullPath)
? ? ? ? ? );
? ? ? ? });

? ? ? ? if (!shouldIgnore) {
? ? ? ? ? traverseDirectory(fullPath);
? ? ? ? }
? ? ? }
? ? }

? ? if (isRootDirectory) {
? ? ? const indexFilePath = path.join(currentPath, "index.tsx");
? ? ? const indexFileIndex = files.indexOf(indexFilePath);
? ? ? if (indexFileIndex !== -1) {
? ? ? ? files.splice(indexFileIndex, 1);
? ? ? }
? ? }
? }

? traverseDirectory(directory, true);

? return files;
}        

Export Verification:

• I iterated through each discovered file path.
• For each file, I extracted the module name by manipulating the file path.
• Using the extracted module name, I attempted to access the corresponding component from the components object.

Assertion:

• I created an assertion to ensure that the component object is defined.
• If a component is not exported correctly, the test will fail, indicating that the export consistency is compromised.

import { getFilesRecursively } from "../listPaths"
import * as components from ".";

const directoryPath = "./src";
const fileExtensions = [".tsx"];
const ignoreExtensions = [
? ".stories.tsx",
? ".test.tsx",
? "routerDecorator.tsx",
? "src/Components/BoxProduct",
];

const files = getFilesRecursively(
? directoryPath,
? fileExtensions,
? ignoreExtensions
);

describe("Exports", () => {
? files.forEach((file) => {
? ? const ModuleName = file
? ? ? .replace("/index", "")
? ? ? .replace(".tsx", "")
? ? ? .split("/")
? ? ? .pop();

? ? const component = components[ModuleName as keyof typeof components];

? ? it(`Should export ${ModuleName} - ${file}`, () => {
? ? ? expect(component).toBeDefined();
? ? });
? });
});        

Conclusion

Creating a unit test to verify the export consistency of React components has proven to be an effective solution for maintaining reliability in my development process. By ensuring that all components are correctly exported, I can avoid the frustrations caused by missing or inaccessible components when distributing my package. Incorporating such tests in your own development workflow can help you achieve the same level of confidence and consistency.