Шутка насмешливая служба variable.asObservable return - PullRequest
Новая
       4

Шутка насмешливая служба variable.asObservable return

0 голосов
/ 20 января 2020

Я младший разработчик, работающий над приложением React, использующим Jest в качестве основы для модульных тестов

Мне нужно проверить мой файл privateRoute: 

export const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      const currentUser = authenticationService.currentUser;
      if (!currentUser) {
        // not logged in so redirect to login page with the return url
        return (
          <Redirect to={{ pathname: "/", state: { from: props.location } }} />
        );
      }

      // authorized so return component
      return <Component {...props} />;
    }}
  />
);

Я не могу проверить условие if (!currentUser) { до возвращения

Есть ли у вас какие-либо советы о том, как проверить эту линию?

Я попытался смоделировать authenticationService.currentUser, используя jest.fn, но безуспешно

Вот фрагмент кода службы аутентификации: 

const currentUserSubject = new BehaviorSubject(
  JSON.parse(localStorage.getItem("currentUser"))
);

export const authenticationService = {
  // ...
  currentUser: currentUserSubject.asObservable(),
  // ...
};

1 Ответ

1 голос
/ 21 января 2020

Решение для модульного тестирования для PrivateRoute компонента с использованием модуля enzyme.

privateRoute.tsx: 

import React from 'react';
import { Route, Redirect } from 'react-router';
import { authenticationService } from './authenticationService';

export const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      const currentUser = authenticationService.currentUser;
      if (!currentUser) {
        return <Redirect to={{ pathname: '/', state: { from: props.location } }} />;
      }
      return <Component {...props} />;
    }}
  />
);

authenticationService.ts: 

export const authenticationService = {
  currentUser: {},
};

privateRoute.test.ts: 

import React from 'react';
import { PrivateRoute } from './privateRoute';
import { mount, shallow } from 'enzyme';
import { MemoryRouter, Redirect, Router } from 'react-router';
import { authenticationService } from './authenticationService';

describe('59825407', () => {
  it('should render component if current user exists', () => {
    const mProps = { component: jest.fn().mockReturnValueOnce(null) };
    const wrapper = mount(
      <MemoryRouter>
        <PrivateRoute {...mProps}></PrivateRoute>
      </MemoryRouter>,
    );
    expect(wrapper.find(mProps.component).props()).toEqual(
      expect.objectContaining({
        history: expect.any(Object),
        location: expect.any(Object),
        match: expect.any(Object),
      }),
    );
  });

  it('should redirect if current user does not exist ', () => {
    authenticationService.currentUser = undefined as any;
    const mProps = { component: jest.fn().mockReturnValueOnce(null), path: '/user' };
    const wrapper = mount(
      <MemoryRouter initialEntries={['/user']}>
        <PrivateRoute {...mProps}></PrivateRoute>
      </MemoryRouter>,
    );
    const history = wrapper.find('Router').prop('history') as any;
    expect(history.location.state.from.pathname).toBe('/user');
    expect(history.location.pathname).toBe('/');
  });
});

Результаты модульных испытаний со 100% покрытием: 

 PASS  src/stackoverflow/59825407/privateRoute.test.tsx (16.491s)
  59825407
    ✓ should render component if current user exists (74ms)
    ✓ should redirect if current user does not exist  (12ms)

--------------------------|----------|----------|----------|----------|-------------------|
File                      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------------------|----------|----------|----------|----------|-------------------|
All files                 |      100 |      100 |      100 |      100 |                   |
 authenticationService.ts |      100 |      100 |      100 |      100 |                   |
 privateRoute.tsx         |      100 |      100 |      100 |      100 |                   |
--------------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        18.683s

Исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59825407

...