React ramblings for self

react-remembersheet.md

React cheatsheet

Testing

Enzyme testing useEffect()

const fancyAct = async (component, assertions) => {
  await act(async () => {
    await Promise.resolve(component);
    await new Promise(resolve => setImmediate(resolve));
    component.update();
    assertions(component)
  });
}
// Usage -v

  await fancyAct(
    mount(<SomeComponent onChange={onChange}/>),
    wrapper => {
      expect(wrapper.find('#someId').first()).toHaveLength(0)
    })

Misc

Remove image-tag on http/404 (not found)

# css
.display_default { display: initial }
.display_none { display: none }
# react component
const [brandingStyle, setBrandingStyle] = useState("display_none");
..
<img
  className={brandingStyle} 
  src={`https://where.ever/api/v1/something/logo/${whatever}`}
  onLoad={() => setBrandingStyle("display_default")}
  />
..