svgr
Transform SVGs into React components 🦁 [Moved to: https://github.com/gregberge/svgr] (by smooth-code)
DISCONTINUED
jest-dom
:owl: Custom jest matchers to test the state of the DOM (by testing-library)
Our great sponsors
svgr | jest-dom | |
---|---|---|
1 | 22 | |
8,526 | 4,270 | |
- | 1.2% | |
8.7 | 7.1 | |
about 2 years ago | 5 days ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
svgr
Posts with mentions or reviews of svgr.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2022-03-14.
-
Setup Jest to React Typescript Vite project, also SWC (part 1)
// config/jest/fileTransform.js "use strict"; const path = require("path"); const camelcase = require("camelcase"); // This is a custom Jest transformer turning file imports into filenames. // http://facebook.github.io/jest/docs/en/webpack.html module.exports = { process(src, filename) { const assetFilename = JSON.stringify(path.basename(filename)); if (filename.match(/\.svg$/)) { // Based on how SVGR generates a component name: // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6 const pascalCaseFilename = camelcase(path.parse(filename).name, { pascalCase: true, }); const componentName = `Svg${pascalCaseFilename}`; return `const React = require('react'); module.exports = { __esModule: true, default: ${assetFilename}, ReactComponent: React.forwardRef(function ${componentName}(props, ref) { return { $$typeof: Symbol.for('react.element'), type: 'svg', ref: ref, key: null, props: Object.assign({}, props, { children: ${assetFilename} }) }; }), };`; } return `module.exports = ${assetFilename};`; }, };
jest-dom
Posts with mentions or reviews of jest-dom.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2023-12-15.
-
Mastering Jest Configuration for React TypeScript Projects with Vite: A Step-by-Step Guide
//config/jest/setupTests.ts // jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom';
-
Anyone have setup instructions for Vitest + Typescript + React testing library? My setup is failing to extend matchers on Vitest Types
Update: Just got it working. Following the instructions on this github issue and using `shamefully-hoist=true` with pnpm I got it working. The issue I was facing was with pnpm.
-
Setting Up a Modern Preact Application With Typescript, Vite and Vitest
vitest-dom extends the standard Jest matchers with convenient methods like .toBeDisabled. Now you can write tests that assert on the state of the DOM. The package is a fork of @testing-library/jest-dom.
-
Superset: Testing and Enzyme to RTL conversion
jest-dom matchers
-
Migrating from Jest to Vitest
At the time of writing this article, it still seems to be an open issue. However, a workaround I found is to add "skipLibCheck": true, to your tsconfig.json file.
- Buenas prácticas con Angular Testing Library
-
Unable to test React-Redux Toolkit app
// jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom'; import { server } from './mocks/server'; beforeAll( () => server.listen( { onUnhandledRequest: 'error' } ) ); afterEach( () => server.resetHandlers() ); afterAll( () => server.close() );
-
Setup Jest to React Typescript Vite project, also SWC (part 1)
Everything you want to do to your test environment such as extends the jest matchers with @testing-library/jest-dom, mock some APIs that’s not implemented in jdom, you can put to config/jest/setupTests.js:
-
Build your own component library with Svelte
We will also use an additional plugin with Testing Library called user-event, which allows us to mimic user events, like typing inside an input or clicking on a button. We will also use a plugin called jest-dom, which extends the DOM-related matching capabilities of Jest, which we require because we are dealing with web components.
What are some alternatives?
When comparing svgr and jest-dom you can also consider the following projects:
jest - Delightful JavaScript Testing.
msw - Seamless REST/GraphQL API mocking library for browser and Node.js.
swc - Rust-based platform for the Web
ts-jest - A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.
vitest - Next generation testing framework powered by Vite.
Cypress - Fast, easy and reliable testing for anything that runs in a browser.
user-event - 🐕 Simulate user events
jest-cheat-sheet - Jest cheat sheet
husky - Git hooks made easy 🐶 woof!
jest-axe - Custom Jest matcher for aXe for testing accessibility ♿️🃏
svelte-material-ui - Svelte Material UI Components
jsdom - A JavaScript implementation of various web standards, for use with Node.js