@render-with/material-ui NPM

Render decorators 🪆 for Material UI (v4)

GitHub Workflow Status npm (scoped) NPM

Use the withTheme(..) decorator if your component under test requires a Material UI (v4) ThemeProvider:

Example:

import { render, screen, withTheme } from './test-utils'

it('uses padding of custom theme', () => {
  render(<ThemedButton>Submit</ThemedButton>, withTheme(CustomTheme))
  expect(screen.getByRole('button', { name: /submit/i })).toHaveStyle('padding: 42px')
})

Note: Refer to the core library to learn more about how decorators can simplify writing tests for React components with React Testing Library.

Installation

This library is distributed via npm, which is bundled with node and should be installed as one of your project's devDependencies.

First, install the core library with a render function that supports decorators:

npm install --save-dev @render-with/decorators

Next, install the Material UI decorators provided by this library:

npm install --save-dev @render-with/material-ui

for installation via yarn:

yarn add --dev @render-with/decorators
yarn add --dev @render-with/material-ui

This library has the following peerDependencies:

npm peer dependency version

and supports the following node versions:

node-current (scoped)

Setup

In your test-utils file, re-export the render function that supports decorators and the Material UI decorators:

// test-utils.js
// ...
export * from '@testing-library/react'   // makes all React Testing Library's exports available
export * from '@render-with/decorators'  // overrides React Testing Library's render function
export * from '@render-with/material-ui' // makes decorators like withTheme(..) available

Then, create a custom withTheme provider using configureWithTheme:

// test-utils.js
// ...
const CustomTheme = createTheme({ spacing: 42 })

export const withTheme = configureWithTheme(CustomTheme)

And finally, use the Material UI decorators in your tests:

import { render, screen, withTheme } from './test-utils'

it('uses padding of custom theme', () => {
  render(<ThemedButton>Submit</ThemedButton>, withTheme(CustomTheme))
  expect(screen.getByRole('button', { name: /submit/i })).toHaveStyle('padding: 42px')
})

Test Scenarios

Just need a `ThemeProvider`?

If your test does not care about the theme, you can use withTheme(..) without any arguments. The decorator will use the configured default theme:

import { render, screen, withTheme } from './test-utils'

it('uses padding of default theme', () => {
  render(<ThemedButton>Submit</ThemedButton>, withTheme())
  expect(screen.getByRole('button', { name: /submit/i })).toHaveStyle('padding: 8px')
})

Need a specific theme?

If your test does care about the theme, you can use withTheme(..) and pass a theme as argument:

import { render, screen, withTheme } from './test-utils'

const CustomTheme = createTheme({ spacing: 42 })

it('uses padding of custom theme', () => {
  render(<ThemedButton>Submit</ThemedButton>, withTheme(CustomTheme))
  expect(screen.getByRole('button', { name: /submit/i })).toHaveStyle('padding: 42px')
})

API

Note: This API reference uses simplified types. You can find the full type specification here.

function configureWithTheme(defaultTheme?: Theme): typeof withTheme

Creates a withTheme decorator that wraps the component under test in a Material UI ThemeProvider.

function withTheme(theme?: Theme): Decorator

Wraps component under test in a Material UI ThemeProvider. Uses the given theme if provided or the configured default theme if non is provided.

Issues

Looking to contribute? PRs are welcome. Checkout this project's Issues on GitHub for existing issues.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

See Feature Requests

📚 More Libraries

Please file an issue on the core project to suggest additional libraries that would benefit from decorators. Vote on library support adding a 👍. This helps maintainers prioritize what to work on.

See Library Requests