时间戳

首页 > 解决方案 > 如何将测试用例写入反应js中UseEffect中的if Condition

reactjs - 如何将测试用例写入反应js中UseEffect中的if Condition

问题描述

我是单元测试的新手，我尝试编写这个简单的测试用例但无法做到。有人可以帮我为useEffect中的if条件编写测试用例吗？

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
    
const Greet = () => {
      const dispatch = useDispatch();
      //I am getting data from redux file
      const stateData = useSelector((state) => state.stateDatalist);
      const countryData = useSelector((state) => state.CountryDatalist);
      useEffect(() => {
        if (stateData.length === 0 && countryData.length === 0) {
          // calling another API data
          dispatch(getDetails());
        }
      }, []);
    
      return (
        <div>
          <h1>Hello</h1>
        </div>
      );
};
    
export default Greet;

标签： reactjsreact-reduxjestjsreact-hooksenzyme

解决方案

使用redux-mock-store创建具有模拟状态的模拟存储。每个测试用例提供不同的模拟状态来测试不同的代码分支。

例如

Greet.tsx：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const getDetails = () => ({ type: 'GET_DETAIL' });

const Greet = () => {
  const dispatch = useDispatch();
  const stateData = useSelector((state: any) => state.stateDatalist);
  const countryData = useSelector((state: any) => state.CountryDatalist);
  useEffect(() => {
    if (stateData.length === 0 && countryData.length === 0) {
      dispatch(getDetails());
    }
  }, []);

  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
};

export default Greet;

Greet.test.tsx：

import Greet from './Greet';
import createMockStore from 'redux-mock-store';
import { mount } from 'enzyme';
import React from 'react';
import { Provider } from 'react-redux';

const mockStore = createMockStore([]);

describe('68904328', () => {
  test('should dispatch action for getting details', () => {
    const state = {
      stateDatalist: [],
      CountryDatalist: [],
    };
    const store = mockStore(state);
    mount(
      <Provider store={store}>
        <Greet />
      </Provider>
    );
    expect(store.getActions()).toEqual([{ type: 'GET_DETAIL' }]);
  });

  test('should do nothing', () => {
    const state = {
      stateDatalist: [1],
      CountryDatalist: [1],
    };
    const store = mockStore(state);
    mount(
      <Provider store={store}>
        <Greet />
      </Provider>
    );
    expect(store.getActions()).toEqual([]);
  });
});

测试结果：

 PASS  examples/68904328/Greet.test.tsx (11.289 s)
  68904328
    ✓ should dispatch action for getting details (44 ms)
    ✓ should do nothing (4 ms)

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

包版本：

"react": "^16.14.0",
"jest": "^26.6.3",
"jest-enzyme": "^7.1.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"redux-mock-store": "^1.5.4",

推荐阅读