我尝试使用jest和enzyme测试react组件,当prop更改时会有useEffect触发器,无法正确测试。由于未定义值,Assert失败。
这是我的简化组件
export function SongDataModal(props) {
const [name, setName] = useState('');
useEffect(() => {
if (props.songData.songName ?? false) {
setName(props.songData.songName);
}
}, [props.songData.songName]);
return (
<Input
type="search"
id="song-name-input"
disabled={true}
value={name}
/>
);
}
SongDataModal.propTypes = {
songData: PropTypes.object,
};
const mapStateToProps = (state) => ({
songData: state.songDataReducer
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
//removed the actions since they are not related
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(SongDataModal);
字符串
这是我的测试文件
describe('SongDataModal', () => {
let wrapper;
const songData = { songName: 'Avicii - Levels' };
beforeEach(() => {
wrapper = shallow(
<SongDataModal
songData={songData}
/>
);
});
it('shows the song name on initial loading', () => {
expect(wrapper.find('#song-name-input').prop('value')).toBe('Avicii - Levels');
});
});
型
1条答案
按热度按时间ugmeyewa1#
你可以从RTL使用
act()
方法。我通常用它来测试任何可能发生在useEffect
钩子内部的条件函数调用。我使用render
方法的目的如下:字符串
在此之后,您可以使用xlc-await来
waitFor
要更改的值或调用useEffect
钩子中的函数。希望这有帮助。此外,您可以查看this以获得更多见解。