-
-
Notifications
You must be signed in to change notification settings - Fork 32.6k
Closed
Labels
breaking changedocsImprovements or additions to the documentationImprovements or additions to the documentationtest
Milestone
Description
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 and kamok
Metadata
Metadata
Assignees
Labels
breaking changedocsImprovements or additions to the documentationImprovements or additions to the documentationtest
Projects
Relationships
Development
Select code repository
Activity
oliviertassinari commentedon Aug 20, 2019
@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:
The changes we can actually make to the guide:
@testing-library/react
. Provide a few examples.[-]Documentation for testing incomplete ?[/-][+][test] Improve the guide documentation page[/+]oliviertassinari commentedon Aug 20, 2019
@liogate Regarding your questions, you can ask them on StackOverflow. Tip: ignore the current page. We are misleading users.
relwell commentedon Sep 14, 2019
@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 commentedon Sep 14, 2019
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 commentedon Sep 14, 2019
@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 commentedon Oct 7, 2019
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 commentedon Oct 8, 2019
@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).