1
Reactとmaterial uiでコンポーネントを構築しました。私はReactとReduxを使用しています。TextFieldマテリアルのUI要素をテストする方法React Jest？
私index.jsxは次のようになります。
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酵素と冗談を使用しています：
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は次のようになります。 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
誰も私がチェックするための正しい方法を達するのを助けることができますマテリアルの値はTextFieldですか？
こんにちは@Farhaan Bukhsh、それは良い先端 "デバッグ"機能です。しかし、私のTextFieldコンポーネントは "value"プロパティを持たず、 "defaultValue"プロパティしか持っていません。新しい値を渡して「変更」イベントをシミュレートしてテストするにはどうすればよいですか？ –
あなたが持っている '' prop''であれば、 '' value''を '' defaultValue''に置き換えることができます。また、私はあなたに ''材料-ui''を更新することを提案します。現在、「変更」イベントを「シミュレート」することは非常に簡単です。 '' Farhaan''を '' Farhaan''に置き換えます。 '' Farhaan''は '' Farhaan''を '' Farhaan''に置き換えます。 '' TextField''の中で、値を簡単に確認することができます。 –