<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">Eventually this is related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="280241721" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/9433" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/9433/hovercard" href="https://github.com/mui/material-ui/issues/9433">#9433</a> , but i'm not sure.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Snapshots should succeed when nothing was changed.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Whenever introducing a new withStyles() Component or simply updating material-ui to the latest beta our jest test fails due to things like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="-          className=&quot;MuiTypography-root-104 MuiTypography-body1-113&quot;
+          className=&quot;MuiTypography-root-111 MuiTypography-body1-120&quot;
// or
-        className=&quot;MuiExpansionPanelSummary-content-169&quot;
+        className=&quot;MuiExpansionPanelSummary-content-176&quot;"><pre class="notranslate"><code class="notranslate">-          className="MuiTypography-root-104 MuiTypography-body1-113"
+          className="MuiTypography-root-111 MuiTypography-body1-120"
// or
-        className="MuiExpansionPanelSummary-content-169"
+        className="MuiExpansionPanelSummary-content-176"
</code></pre></div>
<p dir="auto">basically the appended number changes.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Sorry I think there is no easy sandbox reproduction possible.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">We switched to material-ui from our existing global-css/deterministic className solution where we were able to easily snapshot components and check if they were altered. Now it seems like we have to adjust our setup, but I don't now how.</p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>basically all the v1 beta branches since we started using it (~8+)</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Tab indicator should dynamically resize its width when the parent container width changes</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Tab indicator doesn't resize when the parent container width changes ~ only when the viewport size does</p>
<p dir="auto"><strong>When parent container size changes:</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13242392/33398796-13bf5954-d548-11e7-8131-9a374e2da060.png"><img src="https://user-images.githubusercontent.com/13242392/33398796-13bf5954-d548-11e7-8131-9a374e2da060.png" alt="image" style="max-width: 100%;"></a><br>
<strong>What it should look like / what it looks like after triggering a re-render:</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13242392/33398801-186efd88-d548-11e7-9174-b2d7f937bee5.png"><img src="https://user-images.githubusercontent.com/13242392/33398801-186efd88-d548-11e7-9174-b2d7f937bee5.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Create a container with a child tab element in it (fullwidth)</li>
<li>Resize the parent container programmatically (not by changing the viewport)</li>
</ol>
<h2 dir="auto">Context</h2>
 
<p dir="auto">I'm using the tabs in a appbar using the persistent drawer layout, opening / closing the menu breaks the tab indicators until a manual re-render</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.20</td>
</tr>
<tr>
<td>React</td>
<td>15.5.4</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 63.0.3239.59</td>
</tr>
</tbody>
</table>