Тестовый пример для условного рендеринга с крючками в реактивной шутке - PullRequest
Новая
       11

Тестовый пример для условного рендеринга с крючками в реактивной шутке

0 голосов
/ 29 марта 2020

Я довольно новичок в мире React. Вот что я имею в реагирующих хуках. 

export default function MyComponent() {
 const [data, setData] = useState(null);

 useEffect( () => {
   getData().then(setData)
 }, []);

 return(
   data ? <AnotherComponent /> : <LoadingComponent />
 );
}

getData () находится в другом компоненте с 'fetch'. 

export function getData() {
  return fetch('/api/v2/user').then(response => {
    if(response.status === 200) {
      return response.json()
    } else {
      return {};
    }
  });
}

Я использую Jest / Фермент в качестве среды тестирования и хочет протестировать сценарий с помощью фиктивных данных, чтобы я мог проверить LoadingComponent, которого нет в DOM. Это то, что я пытаюсь, но кажется, что фиктивные значения не возвращаются. 

const mockValues = {
 data: {}
 count: 10
 result: []
};

jest.mock('../DataService');

const mockService = require('../DataService');
mockService.getData = jest.fn().mockResolvedValue(mockValues);

...
const component = mount(<MyComponent />);
expect(component.html()).toEqual(expect.not.stringContaining('LoadingComponent'));

Я вижу, что "mount" работает нормально, но кажется, что фиктивные значения не возвращаются и, следовательно, присутствует LoadingComponent.

1 Ответ

0 голосов
/ 09 апреля 2020

Вот решение для модульного тестирования:

index.tsx: 

import React, { useState, useEffect } from 'react';
import { AnotherComponent } from './AnotherComponent';
import { LoadingComponent } from './LoadingComponent';
import { getData } from './dataService';

export default function MyComponent() {
  const [data, setData] = useState(null);
  useEffect(() => {
    getData().then(setData);
  }, []);
  return data ? <AnotherComponent /> : <LoadingComponent />;
}

AnotherComponent.jsx: 

export const AnotherComponent = () => <div>AnotherComponent</div>;

LoadingComponent.jsx: 

export const LoadingComponent = () => <div>LoadingComponent</div>;

dataService.js: 

export function getData() {
  return fetch('/api/v2/user').then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      return {};
    }
  });
}

index.test.jsx: 

import React from 'react';
import * as DataService from './dataService';
import { mount } from 'enzyme';
import MyComponent from './';
import { act } from 'react-dom/test-utils';

jest.mock('./dataService');

const whenStable = async () => {
  await act(async () => {
    await new Promise((resolve) => setTimeout(resolve, 0));
  });
};

describe('60913717', () => {
  it('should pass', async () => {
    const mockValues = {
      data: {},
      count: 10,
      result: [],
    };
    DataService.getData = jest.fn().mockResolvedValueOnce(mockValues);
    const wrapper = mount(<MyComponent></MyComponent>);
    expect(wrapper.find('LoadingComponent')).toBeTruthy();
    await whenStable();
    expect(wrapper.find('AnotherComponent')).toBeTruthy();
  });
});

Результаты модульного теста с отчетом о покрытии: 

 PASS  stackoverflow/60913717/index.test.jsx (28.041s)
  60913717
    ✓ should pass (48ms)

----------------------|---------|----------|---------|---------|-------------------
File                  | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------------------|---------|----------|---------|---------|-------------------
All files             |      80 |       50 |   66.67 |      75 |                   
 AnotherComponent.jsx |     100 |      100 |     100 |     100 |                   
 LoadingComponent.jsx |     100 |      100 |     100 |     100 |                   
 dataService.js       |      20 |        0 |       0 |      20 | 2-4,6             
 index.jsx            |     100 |      100 |     100 |     100 |                   
----------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        29.721s

исходный код: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60913717

...