Material-ui: [test] Improve the guide documentation page

[liogate]

Hello,

I've an issue while reading the documentation of material-ui:

https://material-ui.com/guides/testing/#createmount-options-mount

I can't fully understand how to write my tests with custom styles and with this exemple:

import { createMount } from '@material-ui/core/test-utils';
import { MuiThemeProvider } from '@material-ui/core/styles';

describe('<MyComponent />', () => {
  let mount;

  function MySuccessButton({ children }) {
    return (
      <MuiThemeProvider theme={{ success: { main: '#fff' } }}>
        {children}
      </MuiThemeProvider>
    );
  }

  before(() => {
    mount = createMount();
  });

  after(() => {
    mount.cleanUp();
  });

  it('should work', () => {
    const wrapper = mount(<MockedTheme><MySuccessButton /></MockedTheme>);
  });
});

Here is some questions:

• What is MockedTheme, how and where is it ?
• Where MyComponent should be mounted ?
• Did you plan for a TypeScript version of your tests ?

While testing, I ran into this issue:

Error: Uncaught [TypeError: theme.spacing is not a function]

Thank you for your help !

[oliviertassinari]

@liogate Thanks for raising this issue, the test story is an important aspect of the components. I think that we need to revamp this part:

• Deprecate the test helpers in v4
• Remove the test helpers in v5
• Migrate all the core components tests from enzyme to react-testing-library

The changes we can actually make to the guide:

• Encourage the usage of @testing-library/react. Provide a few examples.
• Remove all references to the enzyme test helps from the documentation.
• We don't support snapshot tests. Explain why.
• Internal. Should we document what internal tests we run? Maybe, but I think that it can come after, at the bottom of the guide.

[oliviertassinari]

@liogate Regarding your questions, you can ask them on StackOverflow. Tip: ignore the current page. We are misleading users.

[relwell]

@liogate Not having adequate guidance for now is blocking some important testing initiatives in several projects I'm working on. Would it be possible to provide links to tests in the project code, or some examples inline in this issue, that we can reference for the use case that you would normally use createMount for?

[eps1lon]

We should just remove the guide and link to older versions of the docs. You should never need to have a special setup for a component library in your tests. If you do then you should reconsider your testing strategy. We've been burnt by enzyme testing as well. This will hit snapshot tests but I think those were a mistep when figuring out testing of react components.

For now I would recommend @testing-library/react. It does not require any special setup for Material-UI, has a growing community and news tests we write use this library as well.

[oliviertassinari]

@eps1lon If we remove the guide, how can we encourage @testing-library/react? 👼 We might also want to have a note on snapshot tests (https://github.com/mui-org/material-ui/issues/17119#issuecomment-524266401)

[eps1lon]

If we remove the guide, how can we encourage @testing-library/react?

It's less about a specific library. The point is to not test our internals. You should consider those a black box. In goes props, out goes DOM. You're not actually doing something with the returned elements anyway but forwarding them to react-dom.

@testing-library/react only has the best API for this approach currently. Linking to some how-to guides testing-library.com should be good enough. And then maybe add an example with rendering components with stable classnames (e.g. by using StylesProvider).

[oliviertassinari]

@eps1lon This sounds like a good plan, I would also mention how to handle match media (a link to the section in the useMediaQuery page) and Jest snapshot tests (regarding refs and class names).