{"id":15412,"library":"yhtml5-test","title":"Frontend Test Framework","description":"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.","status":"maintenance","version":"1.2.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","react","cli","spa"],"install":[{"cmd":"npm install yhtml5-test","lang":"bash","label":"npm"},{"cmd":"yarn add yhtml5-test","lang":"bash","label":"yarn"},{"cmd":"pnpm add yhtml5-test","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a wrapper around 2dfire-scripts, which provides the core CLI commands and test runner functionality.","package":"@2dfire/2dfire-scripts","optional":false},{"reason":"Required for snapshot testing and rendering React components into plain JavaScript objects, specifically older React versions.","package":"react-test-renderer","optional":false},{"reason":"Required for mounting and interacting with React components in tests, specifically older React versions.","package":"enzyme","optional":false},{"reason":"Provides Jest matchers for Enzyme wrappers, enhancing assertion capabilities for React components.","package":"jest-enzyme","optional":false}],"imports":[{"note":"This package is a CLI test runner; direct interaction is via npm scripts that invoke '2dfire-scripts'.","wrong":"import { test } from 'yhtml5-test'","symbol":"CLI Test Commands","correct":"npm test\nnpm run test:c\nnpm run test:u"},{"note":"Configuration files are loaded using Node.js CommonJS `require()`, not ES module `export` syntax.","wrong":"// .config.js\nexport default config;","symbol":"Configuration Object","correct":"// .config.js\nconst path = require('path');\nmodule.exports = config;"},{"note":"Inside test files, modern ES module `import` syntax is expected for importing source code and testing utilities.","wrong":"const MyComponent = require('./MyComponent');","symbol":"Test File Imports","correct":"import { shallow } from 'enzyme';\nimport MyComponent from './MyComponent';"}],"quickstart":{"code":"{\n  \"name\": \"my-react-app\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"test\": \"2dfire-scripts test --env=jsdom\",\n    \"test:c\": \"npm test -- --coverage\",\n    \"test:u\": \"npm i @2dfire/2dfire-scripts@latest -D\"\n  },\n  \"devDependencies\": {\n    \"@2dfire/2dfire-scripts\": \"latest\",\n    \"react-test-renderer\": \"15.6.x\",\n    \"enzyme\": \"2.9.x\",\n    \"jest-enzyme\": \"3.8.x\"\n  }\n}\n\n// Create .config.js in your project root\n// This configures webpack aliases and Jest transformers\n// .config.js\nconst path = require('path');\nconst webpackConfigAlias = {\n  '^src(.*)$': path.resolve(__dirname, 'src$1'),\n};\n\nconst config = {\n  test: {\n    testMatch: ['<rootDir>/src/**/__tests__/**/*.js?(x)', '<rootDir>/src/**/?(*.)(spec|test).js?(x)'],\n    transformIgnorePatterns: [\"node_modules/(?!(yhtml5-test|react-redux|react-native-button)/)\"],\n    moduleNameMapper: webpackConfigAlias,\n    collectCoverageFrom: ['src/**/*.{js,jsx}'],\n  }\n};\n\nmodule.exports = config;\n\n// Example test file: src/components/__tests__/MyComponent.test.js\nimport React from 'react';\nimport { shallow } from 'enzyme';\nimport MyComponent from '../MyComponent';\n\ndescribe('MyComponent', () => {\n  it('renders correctly', () => {\n    const wrapper = shallow(<MyComponent />);\n    expect(wrapper).toMatchSnapshot();\n  });\n\n  it('displays the correct text', () => {\n    const wrapper = shallow(<MyComponent text=\"Hello Test\" />);\n    expect(wrapper.find('h1').text()).toEqual('Hello Test');\n  });\n});\n","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"The 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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure your `.config.js` file correctly uses `module.exports = config` to expose its configuration object.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Modify the `transformIgnorePatterns` regex in your `.config.js` to explicitly include specific `node_modules` packages that need Babel processing.","message":"The `transformIgnorePatterns` in `.config.js` might prevent necessary transpilation for some `node_modules` packages, especially modern libraries published as ES modules, leading to `SyntaxError`s.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Test 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`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always ensure `@2dfire/2dfire-scripts` is installed as a `devDependency` and refer to its documentation for deeper configuration or troubleshooting.","message":"This 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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`.","cause":"Modern JavaScript features like `async/await` require polyfills, which might be missing or incorrectly configured in the test environment.","error":"ReferenceError: regeneratorRuntime is not defined"},{"fix":"Modify the `transformIgnorePatterns` array in your `.config.js` to explicitly include the problematic `node_modules` package for Babel transformation.","cause":"A dependency within `node_modules` is using ES module syntax which Jest's default transformer, configured by `yhtml5-test`, is ignoring.","error":"SyntaxError: Unexpected token 'export' (when running tests for a node_modules package)"},{"fix":"Verify that your `moduleNameMapper` in `.config.js` accurately reflects your Webpack aliases, mapping them to the correct absolute paths.","cause":"Webpack aliases defined for the application are not being resolved correctly by Jest's module loader.","error":"Cannot find module 'src/path/to/module'"},{"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`.","cause":"Incompatible major versions of React, `react-test-renderer`, or `enzyme` are being used. The quickstart specifies older versions (React 15.x, Enzyme 2.x).","error":"console.error: Warning: React.render is no longer supported in React 16+"}],"ecosystem":"npm"}