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.
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