https://github.com/MicheleBertoli/react-fix-it

Automagically generate tests from errors
https://github.com/MicheleBertoli/react-fix-it

Last synced: 12 days ago
JSON representation

Automagically generate tests from errors

• Host: GitHub
• URL: https://github.com/MicheleBertoli/react-fix-it
• Owner: MicheleBertoli
• License: mit
• Created: 2016-12-15T08:59:34.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-24T03:54:20.000Z (about 6 years ago)
• Last Synced: 2024-10-29T00:38:44.048Z (16 days ago)
• Language: JavaScript
• Homepage: https://michelebertoli.github.io/react-fix-it/
• Size: 599 KB
• Stars: 1,911
• Watchers: 28
• Forks: 21
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-fix-it

README

        
# React Fix It [![Build Status](https://travis-ci.org/MicheleBertoli/react-fix-it.svg?branch=master)](https://travis-ci.org/MicheleBertoli/react-fix-it)

Automagically generate tests from errors.

:warning: This package uses [react-component-errors](https://github.com/staxmanade/react-component-errors) to wrap the lifecycle methods into a try...catch block, which affects the performance of your components. Therefore it should **not** be used in production.

## How to use it

- Enhance your components with `fixIt`

- Write some bugs (or wait for your components to fail)

- Open the console and copy the test snippet

- Paste the code to reproduce the error

- Fix the bugs and celebrate

## Demo

[https://michelebertoli.github.io/react-fix-it/](https://michelebertoli.github.io/react-fix-it/)

![Preview](demo/preview.gif)

## Installation

> You can either install it with [npm](https://nodejs.org) or [yarn](https://yarnpkg.com).

```sh

npm install --save-dev react-fix-it

```

or

```sh

yarn add --dev react-fix-it

```

## Example

```jsx

import React, { Component } from 'react'

import fixIt, { options } from 'react-fix-it'

// defaults to console.log

options.log = (test) => {

  console.warn(test)

  doWatheverYouWant(test)

}

class MyComponent extends Component {

  render() {

    return 
Hello ⚛

  }

}


export default fixIt(MyComponent)

```

:bulb: They easiest way to patch automatically all the components in development mode is by using [babel-plugin-react-fix-it](https://github.com/MicheleBertoli/babel-plugin-react-fix-it) with the following configuration:

```json

{

  "env": {

    "development": {

      "plugins": ["react-fix-it"]

    }

  }

}

```

## Test

```sh

npm test

```

or

```sh

yarn test

```