snapguidist - Snapshot testing for React Styleguidist

  •        5

Jest Snapshot Testing for React Styleguidist. In v4, snapshots have been renamed to .sg (as opposed to .snap) to avoid conflicts with Jest, and improve compatibility with create-react-app.

https://github.com/styleguidist/snapguidist

Dependencies:

body-parser : 1.18.3
classnames : 2.2.6
codemirror : 5.39.2
cors : 2.8.4
jest-diff : 23.5.0
jest-snapshot : 23.5.0
react-codemirror2 : 5.1.0
react-test-renderer : 16.4.2
strip-ansi : 4.0.0
unfetch : 3.1.1

Tags
Implementation
License
Platform

   




Related Projects

vue-styleguidist - Created from react styleguidist for Vue Components with a living style guide

  •    Javascript

Project was started when not finding a tool that generates documentation of components with hot reloading, read documentation and have a playground. Created from React Styleguidist, implement additional support to read and compile .vue files. Only supports 2.x. Vue Styleguidist is a style guide generator for Vue components. It lists component and shows live, editable usage examples based on Markdown files. You can use it to generate a static HTML page to share and publish or as a workbench for developing new components using hot reloaded dev server.

react-styleguidist - Isolated React component development environment with a living style guide

  •    Javascript

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files. Check out the demo style guide. The change log can be found on the Releases page.

snapshot-diff - Diffing snapshot utility for Jest

  •    Javascript

Diffing snapshot utility for Jest. Takes two values, and return their difference as a string, ready to be snapshotted with toMatchSnapshot(). Especially helpful when testing the difference between different React component states.

YamUI - Reusable component framework for Yammer.com

  •    TypeScript

This is the UI component framework for Yammer.com.It is built with React on top of Office UI Fabric components. Unit tests are run through Jest, isolated development environment and documentation is provided by Styleguidist, and visual diff regression is done with Puppeteer and pixelmatch. Visual diff tasks run within a Docker container to ensure consistency between local development environments and CI.

jest-styled-components - Jest utilities for Styled Components

  •    Javascript

A set of utilities for testing Styled Components with Jest. This package improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules. Jest snapshot testing is an excellent way to test React components (or any serializable value) and make sure things don't change unexpectedly. It works with Styled Components but there are a few problems that this package addresses and solves.


react-google-maps - React.js Google Maps integration component

  •    Javascript

The changelog is automatically generated via standard-version and can be found in project root as well as npm tarball. Please, be noted, no one, I mean, no one, is obligated to help you in ANY means. Your time is valuable, so does our contributors. Don't waste our time posting questions like “how do I do X with React-Google-Maps” and “my code doesn't work”. This is not the primary purpose of the issue tracker. Don't abuse.

jest-image-snapshot - Jest matcher for image comparisons

  •    Javascript

Jest matcher that performs image comparisons using pixelmatch and behaves just like Jest snapshots do! Very useful for visual regression testing. The failure threshold can be set in percent, in this case if the difference is over 1%.

react-docgen-typescript - A simple parser for react properties defined in typescript instead of propTypes

  •    TypeScript

A simple parser for React properties defined in TypeScript instead of propTypes. It can be used with React Styleguidist.

vue-design-system - An open source tool for building UI Design Systems with Vue.js

  •    Javascript

Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development. The tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

Jest - Delightful JavaScript Testing.

  •    Javascript

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more. It provides instant feedback, fast interactive watch mode runs only test files related to changed files and is optimized to give signal quickly.

expect-jsx - ✅ toEqualJSX for expect assertion library

  •    Javascript

Note from maintainers Since Jest supports snapshot testing, we recommend you to use that instead of expect-jsx. expect-jsx is no more compatible with recent Jest versions (22), it can be made compatible so feel free to open a PR if so.

jest-dom - :owl: Custom jest matchers to test the state of the DOM

  •    Javascript

You want to use jest to write tests that assert various things about the state of a DOM. As part of that goal, you want to avoid all the repetitive patterns that arise in doing so. Checking for an element's attributes, its text content, its css classes, you name it. The @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.

ts-jest - TypeScript preprocessor with sourcemap support for Jest

  •    TypeScript

ts-jest is a TypeScript preprocessor with source map support for Jest that lets you use Jest to test projects written in TypeScript. It supports all features of TypeScript including type-checking. Read more about Babel7 + preset-typescript vs TypeScript (and ts-jest).

react-testing-mocha-jsdom - Unit testing React Components with Mocha + jsdom

  •    Javascript

This is Part 2 of the series "Modular Isomorphic React JS applications". See Part 1 and Part 3 for more. Unit testing React is traditionally done using Jest which dictates the use of the Jasmine testing framework, and enforces mocking of all require calls. For such an unopinionated rendering engine, this is a very opinionated setup, resulting in issues such as overly-verbose unmocking of requires, and being tied into Jasmine's limited framework.

enzyme - JavaScript Testing utilities for React

  •    Javascript

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

majestic - ⚡ Zero config UI for Jest

  •    TypeScript

Majestic is an electron app that provides a UI for running tests with Jest. Jest CLI itself provides one of the best testing experiences available today. But Majestic humbly tries to expand upon it by providing a rich UI to be used during the dev/test loop.Ok, I lied partially about the zero config part.

react-native-view-shot - Snapshot a React Native view and save it to an image

  •    CSharp

Capture a React Native view to an image. Make sure react-native-view-shot is correctly linked in XCode (might require a manual installation, refer to React Native doc).

jest-puppeteer - Run your tests using Jest & Puppeteer 🎪✨

  •    Javascript

Gold Sponsors are those who have pledged $100/month and more to jest-puppeteer. Writing integration test can be done using Puppeteer API but it can be complicated and hard because API is not designed for testing.