Переосмысливаем
комеонентные
тесты

 

Что такое
компонент?

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 ?! 

1 👀
>
100👂🏻

S
P
E
E
D

А зачем?

Fast DX
Reliable &
Clear Tests

Components tests

By dkovalenko

Components tests

  • 336