reactjs - 如何使用 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('');
  });
}

但是，我收到以下错误:

类型错误:wrapper.find(...).getValue 不是函数

任何人都可以帮助我找到正确的方法来检查 Material UI TextField 的值吗？

Answer 1

我已经用摩卡、 enzyme 和柴编写测试几天了。测试 material-ui 带来的问题是它们本身是 React 组件，因此无法在测试常规 html 元素时对其进行测试。

您可以通过打印整个组件来找出属性发生了什么变化，例如

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

这将为您打印整个元素，您可以注意到 TestField 有 value 属性，这是您应该检查的内容，因为这个 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 组件的方式。

希望您觉得它有帮助。