Question

这是我试图测试的路线：

class App extends {Component} {
    render() {
        return (
            <div>
                <Nav />
                <Switch>
                    <Route path='/block/:id/' component={Block} />
                </Switch>
            </div>
        )
    }
}

这是我得到的：

test('block route has commons', () => {

    const wrapper = mount(
        <MemoryRouter
            initialEntries={['/block/123']}
        >
            <App />
        </MemoryRouter>
    )

    expect(wrapper.find('Nav')).toHaveLength(1)
})

我明白了：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: symbol.

我想测试一下，如果我去url / block / 123 /我实际上从我的路线获得特定组件。我不想测试/ block /：id /。我想测试一下，如果我去阻止/ 123，阻止/：id被选中。

Answer 1

就我而言，我通过了match作为道具。

import * as renderer from 'react-test-renderer';

const renderWithProps = (props) => {
    const defaultProps = {
        match: { params: { id: 123 } },
    };
    return renderer.create(<App {...defaultProps} {...props} />);
}

test('block route has commons', () => {
    renderWithProps({});
    expect(wrapper.find('Nav')).toHaveLength(1);
})

renderWithProps现在使用App作为组件。您可以将其用作参数。

如何用反应路由器（jest）测试动态路由器？

1 个答案: