Переосмысливаем
комеонентные
тесты
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8387699/pasted-from-clipboard.png)
Что такое
компонент?
f(props) = UI
f(props, context, route, browserAPI, styles) = UI
Clever component
Dumb
Component
<Button variant="contained">
Default
</Button>
<Route>
<UsersContainer />
</Route>
А как тестировать???
it("Shows user component", () => {
render(
<MockForDataLoader>
<UsersComponent users={[....]} rights={{ ... }} />
</MovkForDataLoader>
)
fireEvent.click(screen.getByText('Load Greeting'))
await waitFor(() => screen.getByRole('heading'))
expect(screen.getByRole('heading')).toHaveTextContent('hello there')
})
Детали
Реализации
Внутри
Теста
Не
Имеет
смысла
it("opens when \"Choose date\" is clicked", () => {
const handleOpen = spy();
render(
<DesktopDatePicker
value={adapterToUse.date("2019-01-01T00:00:00.000")}
onChange={() => {}}
onOpen={handleOpen}
TransitionComponent={FakeTransitionComponent}
renderInput={(params) => <TextField {...params} />}
/>
);
act(() => {
screen.getByLabelText(/Choose date/).click();
});
expect(handleOpen.callCount).to.equal(1);
expect(screen.queryByRole("dialog")).not.to.equal(null);
});
Что отображают тесты?
Requirements
test 1
test 2
test 2
test 4
Testing UI
!== javascript
UI in node.js ?!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8388161/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8389138/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8388558/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8388560/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8388525/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8388156/pasted-from-clipboard.png)
1 👀 > 100👂🏻
S
P
E
E
D
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8388177/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8388198/pasted-from-clipboard.png)
А зачем?
Fast DX
Reliable &
Clear Tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8389188/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8389193/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8389201/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8389202/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/8389204/pasted-from-clipboard.png)
Components tests
By dkovalenko
Components tests
- 626