react-component-test-library

Enable devtools

To enable devtools add to .env

REACT_APP_DEV_TOOLS=true

Response data

create a response.json in /src/DevTools/fixtures/response.json

{
  "login": {
    "error": {
      "status": 400,
      "response": {
        "message": {
          "userName": "Invalid username"
        }
      }
    }
  }
}

Add login.error in response-key of Request tab

💡 Response key should be path of object

Creating custom-tabs

create a custom-tabs.js in /src/DevTools/tabs/custom-tabs.js

const tabs = [
  {
    name: 'Login',
    path: 'login',
    Component: Login,
  },
];

export default tabs;

Creating form-data

create a form-data.json in /src/DevTools/fixtures/form-data.json

{
  "forms": {
    "/login": {
      "name": "Login",
      "data": {
        "#username": "alpha",
        "#password": "123456"
      }
    }
  }
}

💡 Every key field inside data is a css querySelector