Jest.js 无法测试 prop 更改时的useEffect触发器

g6baxovj  于 2023-11-15  发布在  Jest
关注(0)|答案(1)|浏览(150)

我尝试使用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');
  });
});

ugmeyewa

ugmeyewa1#

你可以从RTL使用act()方法。我通常用它来测试任何可能发生在useEffect钩子内部的条件函数调用。我使用render方法的目的如下:

await act(() =>render(<Component/>))

字符串
在此之后,您可以使用xlc-await来waitFor要更改的值或调用useEffect钩子中的函数。希望这有帮助。此外,您可以查看this以获得更多见解。

相关问题