在react jest中使用钩子进行条件渲染的测试用例

Question

我对React世界还很陌生。以下是我在react hook中的内容。

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/Ezyme作为测试框架，并希望用模拟数据测试场景，这样我就可以测试DOM中不存在LoadingComponent。这就是我正在尝试的，但似乎没有返回模拟值。

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')); 

我看到"装载"运行良好，但似乎没有返回模拟值，因此存在LoadingComponent。

Answer 1

这是单元测试解决方案：

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