Question

我是React和Enzyme的新手，正在编写用于渲染按钮的测试用例。谁能告诉我如何在Route的渲染道具中搜索按钮？这是我的组件：

            export default class App extends React.Component {
                render() {
                    return (
                        <div className='class1'>
                        .....
                            <Route id='Route-Home' render={({history}) => (
                                <Button id='Home-Button' onClick={() => {
                                    history.push(Constants.PATHS.HOME);
                                }}
                                text='Home' variant='emphasis'/>
                            )} />
                        .....
                        </div>
                    );
                }
            }

我在测试用例中最接近的是：

            describe('App', () => {
                let wrapper;
                beforeAll(()=>{
                    wrapper = shallow(<App />);
                }
                it('should render Home Button', () => {
                expect(wrapper.find('#Route-Home').prop('render').length).toBe(1);

                });

            });

找不到有关如何测试按钮是否呈现的有效解决方案。欢迎任何建议！

Answer 1

提取您传递给Route的render道具的函数，并分别进行测试。这是一些示例代码：

export const routeRenderFn = ({history}) => (
  <Button id='Home-Button' onClick={() => {
    history.push(Constants.PATHS.HOME);
  }}
  text='Home' variant='emphasis'/>
);

...

<Route id='Route-Home' render={routeRenderFn} />

酶如何在路线渲染道具中搜索按钮

1 个答案: