Question

我有一些代码将路线参数移动到context provider中，以便使用useReactRouter在<Spamalot />内部进行深入消费。

const App = () => {
  const match = useRouteMatch('/spam/:spamId?');
  const { spamId } = get(match, 'parans', {});
  return (
    <div className={styles.sketchContainer}>
      <SpamContext.Provider value={spamId}>
          <Spamalot />
      </SpamContext>
    </div>
  )
}

我正在使用以下测试代码来测试useRouteMatch和Context之间的相互作用：

let wrapper;
beforeEach( () => {
    wrapper = mount(<MemoryRouter initialEntries={['/spam/1942']}></MemoryRouter>);
});
it('passes spam around', () => {
    expect(wrapper.exists(SpamContext.Provider)).to.equal(true)
    expect(wrapper.find(SpamContext.Provider).prop('value')).to.equal('1942')
});

但是我得到AssertionError: expected false to equal true ...这似乎是我的测试中的第一个期望值，这意味着代码找不到上下文提供者。

如果我将一个好的旧console.log(wrapper.debug());悬吊到测试中，则会得到以下大致概述：

<MemoryRouter initialEntries={[...]}>
    <Router history={{...}}>
        <App>
            <Spamalot />
        </App>
    </Router>
</MemoryRouter>

以前，此测试执行的是shallow而不是mount的渲染，所以我不确定为什么测试不再通过。安装如何使上下文消失？还是将组件包装在</MemoryRouter>中？

在上下文中进行测试，这取决于useRouteMatch

0 个答案: