我也尝试使用酶将单元测试添加到我正在从事的项目中。我已经能够设置一个基本测试,但是,当我尝试运行它时,出现以下错误“方法“文本”应在1个节点上运行,而是找到0个。”
我一直在浏览各种在线教程,以及针对类似问题的SO答案,但是我找不到任何有帮助的东西。我也尝试过console.log-ing包装器,它返回:
<Connect(withRouter(WithStyles(SignIn))) >
正在测试的代码;
class SignIn extends Component {
//Removed unnecessary code for expediency
render() {
const { classes, loading } = this.props;
const {
values,
touched,
errors,
isValid,
} = this.state;
const hasError = field => !!(touched[field] && errors[field]);
const { store } = configureStore();
return (
<Provider store={store}>
<div className={classes.root}>
<Grid
className={classes.grid}
container
>
<Grid
className={classes.quoteWrapper}
item
lg={5}
>
<div className={classes.quote}>
<div className={classes.quoteInner}>
<Typography
className={classes.quoteText}
variant="h1"
>
We work with your business to provide a range of innovative
and bespoke software solutions.
</Typography>
</div>
</div>
</Grid>
<Grid
className={classes.content}
item
lg={7}
xs={12}
>
<div className={classes.content}>
<div className={classes.contentBody}>
<form className={classes.form}>
<p>
<Typography
className={classes.title}
variant="h2"
>
Sign in
</Typography>
</p>
<div className={classes.fields}>
<TextField
className={classes.textField}
error={hasError('username')}
helperText={
hasError('username') ? errors.username[0] : null
}
label="User name"
name="username"
onChange={event =>
this.handleFieldChange('username', event.target.value)
}
onKeyPress={this.handleKeyPress}
type="text"
value={values.username}
variant="outlined"
/>
<TextField
className={classes.textField}
error={hasError('password')}
helperText={
hasError('password') ? errors.password[0] : null
}
label="Password"
name="password"
onChange={event =>
this.handleFieldChange('password', event.target.value)
}
onKeyPress={this.handleKeyPress}
type="password"
value={values.password}
variant="outlined"
/>
</div>
{loading ? (
<CircularProgress className={classes.progress}/>
) : (
<Button
className={classes.signInButton}
color="primary"
disabled={!isValid}
onClick={this.handleSignIn}
size="large"
variant="contained"
>
Sign in now
</Button>
)}
<Typography
className={classes.resetPassword}
variant="body1"
>
Have you forgotten your password?{' '}
<Link
className={classes.resetPasswordURL}
to="/reset-password"
>
Reset it
</Link>
</Typography>
</form>
</div>
</div>
</Grid>
</Grid>
</div>
</Provider>
);
}
}
SignIn.propTypes = {
className: PropTypes.string,
classes: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
history: PropTypes.object.isRequired,
loading: PropTypes.bool.isRequired,
user: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
loading: state.authReducer.loadingKeys.includes(dataConstants.loading.main),
user: state.authReducer.user
});
export default connect(mapStateToProps)(compose(
withRouter,
withStyles(styles)
)(SignIn));
这是我的测试:
describe('SignIn component', () => {
it('starts with a count of 0', () => {
const wrapper = shallow(
<Provider store={store}>
<SignIn/>;
</Provider>
).dive();
let wrapperDebug = wrapper.debug();
console.log(wrapperDebug);
const text = wrapper.find('p').text();
expect(text).toEqual('Sign in');
});
});
测试应该找到由p包围的版式(我在代码的两边都保留了几行以突出显示该区域),并将找到的文本与预期值进行比较。预先感谢您的帮助!