如何使用React Jest测试TextField Material-UI元素?

巴勃罗·达德

我使用React和Material-UI构建了一个组件。我正在使用React和Redux。

我的index.jsx看起来像这样:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import configureStore from '../store/configureStore';
import Routes from '../routes/routes';
import '../styles/main.less';

const store = configureStore();
render(
  <Provider store={store}>
    <MuiThemeProvider>
      <Routes />
    </MuiThemeProvider>
  </Provider>,
  document.getElementById('app'),
);

我的组件InputSearch看起来像这样:

import React, { PropTypes, Component } from 'react';
import TextField from 'material-ui/TextField';

class InputSearch extends Component {
  ...

  render() {
    return (
      ...
      <TextField
        defaultValue={this.props.keyword}
        ref={(input) => { this.input = input; }}
        autoFocus
        hintText='Type a keyword'
        errorText={this.state.errorText}
        floatingLabelText='Search for keyword'
        style={styles.textField}
      />
    );
  }
}

InputSearch.propTypes = {
  keyword: PropTypes.string.isRequired,
  resetSearch: PropTypes.func.isRequired,
  searchBooks: PropTypes.func.isRequired,
  toggleResultsOpacity: PropTypes.func.isRequired,
  firstSearch: PropTypes.bool.isRequired,
};

export default InputSearch;

我正在使用Airbnb酶和Jest进行单元测试。我对该InputSearch组件的测试如下所示:

import React from 'react';
import { shallow, mount } from 'enzyme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import TextField from 'material-ui/TextField';
import InputSearch from '../components/InputSearch/InputSearch';

const resetSearchMock = jest.fn();
const searchBooksMock = jest.fn();
const toggleResultsOpacityMock = jest.fn();

const setup = () => {
  const props = {
    keyword: '',
    resetSearch: resetSearchMock,
    searchBooks: searchBooksMock,
    toggleResultsOpacity: toggleResultsOpacityMock,
    firstSearch: true,
  };

  const wrapper = shallow(<MuiThemeProvider><InputSearch {...props} /></MuiThemeProvider>);

  return {
    props,
    wrapper,
  };
};

describe('Initial test', () => {
  test('Shows error message when input search is empty.', () => {
    const { wrapper, props } = setup();
    expect(wrapper.find(TextField).getValue()).toEqual('');
  });
}

但是,出现以下错误:

TypeError: wrapper.find(...).getValue is not a function

有人可以帮助我找到正确的方法来检查Material UI的值TextField吗?

法哈恩·布克什(Farhaan Bukhsh)

我已经使用摩卡咖啡,酶和彩油写了几天的测试。测试附带的问题material-ui是这些是反作用组件,因此在测试常规html元素时无法对其进行测试

您可以通过打印整个组件来了解哪些属性会发生变化,例如

console.log(wrapper.find('TextField').debug());

这将为您打印整个元素,您会注意到TestField具有valueprop,您应该检查它,因为这prop决定了TextField

因此,代码将如下所示:

describe('Initial test', () => {
  test('Shows error message when input search is empty.', () => {
    const { wrapper, props } = setup();
    expect(wrapper.find(TextField).props().value).to.equal('');
  });
}

这就是我一直在测试TextField组件的方式。

希望对您有所帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Material UI中使TextField无效

如何使用Material-ui @ next TextField错误道具

material-ui表:如何对表元素进行样式更改

React Material ui表无法从行获取元素

Material-ui TextField与react-redux搞混了

使用React Material-UI自动聚焦TextField

如何屏蔽我的Material-UI TextField?

在React中设置Material UI的TextField组件的defultValue

如何从Material UI获取TextField的输入值?

如何使用create-react-app正确配置material-ui以进行测试?

React:如何使用Material-ui在Selects中添加Textfield?

React Material UI更新TextField值

Material-UI:如何使用TextField应用输入属性

React:如何从Material-UI TextField组件获取值

Material-UI:TextField:react-addons-css-transition-group使用多行TextField中断

如何使用Material UI在某些断点处隐藏/显示元素?

如何将Material-UI TextField与react-phone-number-input一起使用

将Material-ui React组件居中于页脚元素中

如何使用Material UI TextField将className添加到子元素

如何基于Material UI的github标签选择器示例删除Material UI芯片元素

如何使用Jest和Enzyme测试UI材质TextField的onChange

如何测试使用Material UI makeStyles()进行的条件样式?

在React Material UI Table内突出显示React Material UI TextField“ Cell”?

React Material UI TextField FormHelperTextProps样式不起作用

React Material UI TextField样式不起作用

如何添加条件来反应 material-ui 元素?

如何使 Material UI 网格元素具有粘性?

React Material UI TextField 悬停鼠标图标

使用 Material Ui 框元素的 DevOps Typescript 构建问题