如何在测试时禁用材质 UI 中的所有过渡答案

【问题标题】：how to disable all transitions in material UI while under test如何在测试时禁用材质 UI 中的所有过渡
【发布时间】：2019-09-22 04:42:22
【问题描述】：

我维护了一个使用 Material UI 和基于硒的 BDD 测试套件的 React 应用程序。我发现我的一些测试在丢失/损坏的 CSS 选择器上间歇性地失败，这些选择器针对的是由于材料 UI 组件在打开时执行转换而没有立即出现的元素。

我只能在测试中使用非常简单的解决方案来禁用转换。你不会相信答案...

【问题讨论】：

标签： reactjs material-ui bdd

【解决方案1】：

可以在 Material UI 主题中应用一个设置，该设置将全局禁用过渡

const theme = {
    transitions: { create: () => 'none' }
}

在 BDD 套件中，我设置了一个特定的用户代理。
在创建 Material UI 主题的文件中，如果用户代理指示这是 BDD 测试，我只需添加禁用行。

因此，将它们放在您定义 Matuerial UI 主题的文件中：

import { createMuiTheme } from '@material-ui/core/styles'

const bddUserAgentString = 'BDD Test'
const isBddRunning = () => global.navigator.userAgent === bddUserAgentString

const theme = createMuiTheme({
  palette: '... omitted ...',
  shadows: '... omitted ...',
  spacing: '... omitted ...',
  typography: '... omitted ...',
  ...(isBddRunning() && { transitions: { create: () => 'none' } }),
})

export default theme

如果 '...' 扩展运算符语法令人困惑，请看这里：ES6 syntax reference: use spread and boolean short circuiting to conditionally add fields to an object during declaration

【讨论】：