yhtml5-test

library1.2.2jsnpmunverified

yhtml5-test is a front-end test framework designed to simplify unit testing in JavaScript projects, primarily by wrapping and pre-configuring Jest. It aims to reduce the boilerplate and configuration overhead typically associated with setting up a modern testing environment, abstracting away direct interactions with tools like Babel, Node, and Jest itself. The framework includes built-in polyfills, sophisticated file transformers for JavaScript, CSS, and other assets, and a pre-configured environment to simulate browser APIs. It supports testing React components through its integration with Enzyme and `react-test-renderer` (specifically v15.6.x and v2.9.x respectively, as shown in the quickstart). Key features include robust coverage reporting, snapshot testing capabilities, and an opinionated structure for test case organization. Currently at version 1.2.2, its release cadence is not explicitly stated but relies on updates to the underlying `@2dfire/2dfire-scripts` package. It differentiates itself by providing a batteries-included setup focused on immediate productivity for detecting bugs, identifying unused code, and ensuring code quality.

testing

npm install yhtml5-test

package ↗

INSTALL

IMPORT

SIG · YHTML5-TEST

yhtml5-test

testingjavascriptv1.2.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CLI Test Commands

✓ npm test npm run test:c npm run test:u

✗ import { test } from 'yhtml5-test'

This package is a CLI test runner; direct interaction is via npm scripts that invoke '2dfire-scripts'.

Configuration Object

✓ // .config.js const path = require('path'); module.exports = config;

✗ // .config.js export default config;

Configuration files are loaded using Node.js CommonJS `require()`, not ES module `export` syntax.

Test File Imports

✓ import { shallow } from 'enzyme'; import MyComponent from './MyComponent';

✗ const MyComponent = require('./MyComponent');

Inside test files, modern ES module `import` syntax is expected for importing source code and testing utilities.

This quickstart guides you through setting up `yhtml5-test` by adding required scripts to `package.json`, installing development dependencies, configuring `.config.js` for Jest and Webpack aliases, and writing a basic React component test using Enzyme and snapshot testing.

{ "name": "my-react-app", "version": "1.0.0", "scripts": { "test": "2dfire-scripts test --env=jsdom", "test:c": "npm test -- --coverage", "test:u": "npm i @2dfire/2dfire-scripts@latest -D" }, "devDependencies": { "@2dfire/2dfire-scripts": "latest", "react-test-renderer": "15.6.x", "enzyme": "2.9.x", "jest-enzyme": "3.8.x" } } // Create .config.js in your project root // This configures webpack aliases and Jest transformers // .config.js const path = require('path'); const webpackConfigAlias = { '^src(.*)$': path.resolve(__dirname, 'src$1'), }; const config = { test: { testMatch: ['<rootDir>/src/**/__tests__/**/*.js?(x)', '<rootDir>/src/**/?(*.)(spec|test).js?(x)'], transformIgnorePatterns: ["node_modules/(?!(yhtml5-test|react-redux|react-native-button)/)"], moduleNameMapper: webpackConfigAlias, collectCoverageFrom: ['src/**/*.{js,jsx}'], } }; module.exports = config; // Example test file: src/components/__tests__/MyComponent.test.js import React from 'react'; import { shallow } from 'enzyme'; import MyComponent from '../MyComponent'; describe('MyComponent', () => { it('renders correctly', () => { const wrapper = shallow(<MyComponent />); expect(wrapper).toMatchSnapshot(); }); it('displays the correct text', () => { const wrapper = shallow(<MyComponent text="Hello Test" />); expect(wrapper.find('h1').text()).toEqual('Hello Test'); }); });

yhtml5-test --version

Debug

Known issues

breakingThe quickstart dependencies explicitly list older versions of `react-test-renderer@15.6.x` and `enzyme@2.9.x`. These versions are incompatible with React 16+ and will require significant updates.

fix

For React 16+ projects, upgrade `enzyme` to v3.x and install a compatible React adapter (e.g., `enzyme-adapter-react-16`). You may also need to update `@2dfire/2dfire-scripts`.

affects: >=1.0.0

gotchaThe framework's configuration (`.config.js`) must use CommonJS `module.exports` syntax. Attempting to use ES module `export default` will result in a configuration loading error.

fix

Ensure your `.config.js` file correctly uses `module.exports = config` to expose its configuration object.

affects: >=1.0.0

gotchaThe `transformIgnorePatterns` in `.config.js` might prevent necessary transpilation for some `node_modules` packages, especially modern libraries published as ES modules, leading to `SyntaxError`s.

fix

Modify the `transformIgnorePatterns` regex in your `.config.js` to explicitly include specific `node_modules` packages that need Babel processing.

affects: >=1.0.0

gotchaTest files may not be discovered if their naming conventions or locations do not align with the default or custom `testMatch` patterns configured in `.config.js`.

fix

Adhere to standard Jest conventions (`__tests__/**/*.js?(x)`, `*.test.js`, `*.spec.js`), or adjust the `testMatch` array in your `.config.js` to match your project's structure.

affects: >=1.0.0

gotchaThis package is a wrapper for `@2dfire/2dfire-scripts`. Direct `npm install yhtml5-test` does not install the primary CLI executable. Users must install `@2dfire/2dfire-scripts` as a dev dependency to run tests.

fix

Always ensure `@2dfire/2dfire-scripts` is installed as a `devDependency` and refer to its documentation for deeper configuration or troubleshooting.

affects: >=1.0.0

Errors

Common errors & fixes

ReferenceError: regeneratorRuntime is not defined

Modern JavaScript features like `async/await` require polyfills, which might be missing or incorrectly configured in the test environment.

fix

Ensure `regenerator-runtime` is installed (`npm i regenerator-runtime -D`) and imported in your Jest `setupFiles` (e.g., `import 'regenerator-runtime/runtime';`) or configure Babel to include `@babel/plugin-transform-runtime`.

SyntaxError: Unexpected token 'export' (when running tests for a node_modules package)

A dependency within `node_modules` is using ES module syntax which Jest's default transformer, configured by `yhtml5-test`, is ignoring.

fix

Modify the `transformIgnorePatterns` array in your `.config.js` to explicitly include the problematic `node_modules` package for Babel transformation.

Cannot find module 'src/path/to/module'

Webpack aliases defined for the application are not being resolved correctly by Jest's module loader.

fix

Verify that your `moduleNameMapper` in `.config.js` accurately reflects your Webpack aliases, mapping them to the correct absolute paths.

console.error: Warning: React.render is no longer supported in React 16+

Incompatible major versions of React, `react-test-renderer`, or `enzyme` are being used. The quickstart specifies older versions (React 15.x, Enzyme 2.x).

fix

Update `react-test-renderer` and `enzyme` to versions compatible with your project's React major version (e.g., `enzyme@3.x` with `enzyme-adapter-react-16` for React 16+), and ensure the adapter is configured in `setupTestFrameworkScriptFile`.

Upgrade

Version history

1.2.2latest on npm

Audit

Dependencies

@2dfire/2dfire-scriptsrequiredThis package is a wrapper around 2dfire-scripts, which provides the core CLI commands and test runner functionality.

react-test-rendererrequiredRequired for snapshot testing and rendering React components into plain JavaScript objects, specifically older React versions.

enzymerequiredRequired for mounting and interacting with React components in tests, specifically older React versions.

jest-enzymerequiredProvides Jest matchers for Enzyme wrappers, enhancing assertion capabilities for React components.

Agent activity

37 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/yhtml5-test ↗