Everyone knows writing tests is super important for software development. It enables us to change codes more speedy with less bugs.

When it comes to frontend, React Testing Library is becoming popular because it’s easier to test React hooks compared with enzyme. However, because Material UI (MUI) styled component use HOC (Higher Order Component), setup is bit complicated. So this article explains how to setup React Testing Library for Material UI styled component with TypeScript.

If you would like to know other topics of React Testing Library, please refer the articles below.

• The Practical Guide to Start React Testing Library with TypeScript
• How to Write Tests with React Testing Library and TypeScript: Implement the basic AAA testing pattern today
• Snapshots of Material UI styled component with React Testing Library and TypeScript

MUI styled component

With MUI, you can define your own theme and write CSS in JS. To use it, normally you provide theme in your root component which used React context API.

// Index.tsx

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root'),
);

#react #typescript #web-development