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

Question

我用 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 Enzyme 和 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吗？

Answer 1

我已经用摩卡、酶和柴编写测试几天了。测试带来的问题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 组件的方式。

希望您觉得它有帮助。