Я тестирую подключенные компоненты с помощью Enzyme.
Я использую повторно используемый компонент Root
, в котором я инициализирую хранилище redux, промежуточное ПО и redux-persist
. Это выглядит так (упрощенно):
// Root.jsx
const Root = () => {
// some logic.
return <PersistGate loading={null} persistor={persistor}>
<Provider store={store}>{children}</Provider>
</PersistGate>;
}
Затем я пишу свои тесты следующим образом:
describe("Unit Test Login", () => {
beforeEach(() => {
wrapper = mount(
<Root>
<MemoryRouter>
<ConnectedAuth {...props} type="login" />
</MemoryRouter>
</Root>,
)
});
it("renders email & password fields", () => {
console.log(wrapper.debug());
expect(wrapper.find(Input).length).toBe(2);
});
});
Проблема
Тесты сбой, и я не могу найти элементы, глубоко вложенные в <Root />
. Например, не удается найти простой Input
.
Console.loging wrapper.debug()
возвращает следующее:
<Root>
<PersistGate loading={{...}} persistor={{...}} />
</Root>
Как я могу глубже изучить дерево вложенных компонентов и включить тесты для "поиска" элементов?
То, что я пробовал
- .dive () не работает с
mount
- Добавление
wrapper.update()
внутри каждого теста, кажется, решает эту проблему, но это не изящно и wrapper.update()
внутри beforeEach()
не работает.