Skip to content

[test] Improve the guide documentation page #17070

@liogate

Description

@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 !

Activity

added this to the v5 milestone on Aug 20, 2019
oliviertassinari

oliviertassinari commented on Aug 20, 2019

@oliviertassinari
Member

@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.
changed the title [-]Documentation for testing incomplete ?[/-] [+][test] Improve the guide documentation page[/+] on Aug 20, 2019
oliviertassinari

oliviertassinari commented on Aug 20, 2019

@oliviertassinari
Member

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

relwell

relwell commented on Sep 14, 2019

@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

eps1lon commented on Sep 14, 2019

@eps1lon
Member

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

oliviertassinari commented on Sep 14, 2019

@oliviertassinari
Member

@eps1lon If we remove the guide, how can we encourage @testing-library/react? 👼 We might also want to have a note on snapshot tests (#17119 (comment))

eps1lon

eps1lon commented on Oct 7, 2019

@eps1lon
Member

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

oliviertassinari commented on Oct 8, 2019

@oliviertassinari
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    breaking changedocsImprovements or additions to the documentationtest

    Projects

    No projects

    Relationships

    None yet

      Development

      Participants

      @relwell@oliviertassinari@eps1lon@liogate

      Issue actions

        [test] Improve the guide documentation page · Issue #17070 · mui/material-ui