单元测试

npm i -D @liepin/js-jest4r-fe@beta

npx jest4r setup4project

npx jest4r setup4package

/*
 * For a detailed explanation regarding each configuration property and type check, visit:
 * https://jestjs.io/docs/configuration
 * https://zhuanlan.zhihu.com/p/535048414 详细字段作用说明
 */

module.exports = {
  // 预设配置
  preset: '@liepin/js-jest4r-fe',
  // 生成覆盖率报告所存放的目录，苍穹会根据该目录配置读取覆盖率报告
  coverageDirectory: '<rootDir>/tests/coverage-jest'
}

/*
 * For a detailed explanation regarding each configuration property and type check, visit:
 * https://jestjs.io/docs/configuration
 * https://zhuanlan.zhihu.com/p/535048414 详细字段配置描述
 */

// 默认设置
const compileModules = ['@babel', '@ant-design', '@liepin', 'uuid'];

// 默认设置
const transformIgnorePatterns = [
  // Ignore modules without es dir.
  // Update: @babel/runtime should also be transformed
  // 匹配以 /node_modules/ 开头，后面跟着一个不以 compileModules 开头的目录名，然后再跟着一个不以 es/ 开头的目录名。
  `/node_modules/(?!${compileModules.join('|')})[^/]+?/(?!(es)/)`
];

module.exports = {
  // 必须配置
  preset: '@liepin/js-jest4r-fe',
  // 生成覆盖率报告所存放的目录，苍穹会根据该目录配置读取覆盖率报告
  coverageDirectory: '<rootDir>/tests/coverage-jest',
  
  // 非必须配置
  // transformIgnorePatterns这个配置项配置的是将一些文件忽略，不使用transform的转换器进行转换
  // 如果遇到第三方包报错，可优先确认此配置
  transformIgnorePatterns,
  
};

module.exports = (api) => {
  const isTest = api.env('test');
  if (!isTest) {
    return {
      presets: ['@tools/babel-preset']
    };
  }
  return {
    env: {
      test: {
        presets: [
          ['@babel/preset-env', { targets: { node: 'current' } }],
          '@babel/preset-react',
          '@babel/preset-typescript'
        ],
        plugins: [
          [
            '@babel/plugin-proposal-decorators',
            {
              legacy: true
            }
          ],
          [
            '@babel/plugin-proposal-class-properties',
            {
              loose: true
            }
          ],
          // 移除组件的 <style jsx></style> 标签内容
          [
            '@liepin/js-jest4r-fe/config/babel-plugin-remove-element',
            {
              elements: ['style']
            }
          ]
        ]
      }
    }
  };
};

    "typeRoots": ["node_modules/@types", "其他类型文件位置"]

npm run test

describe("screen.debug", () => {
  test("Print the current DOM Tree in the console", () => {
    render(<SomeComponent />);

    screen.debug(); // debug document
    screen.debug(screen.getByText("test")); // debug single element
    screen.debug(screen.getAllByText("multi-test")) // debug multiple elements
  });
});

describe("screen.logTestingPlaygroundURL", () => {
  test("logTestingPlaygroundURL", () => {
    render(<SomeComponent />);

    // 控制台中会打印出来访问链接
    screen.logTestingPlaygroundURL(); // log entire document to testing-playground
    screen.logTestingPlaygroundURL(screen.getByText('test')); // log a single element
  });
});

  // An array of glob patterns indicating a set of files for which coverage information should be collected
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.{spec,test}.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/stories/**',
    '!src/**/__tests__/**'
  ]

npm run test:coverage

// 假如现在我们有这样的 DOM：
// <button><span>Hello</span> <span>World</span></button>

screen.getByText(/hello world/i)
// ❌ 报错:
// Unable to find an element with the text: /hello world/i. This could be
// because the text is broken up by multiple elements. In this case, you can
// provide a function for your text matcher to make your matcher more flexible.

screen.getByRole('button', {name: /hello world/i})
// ✅ 成功!

import { render, screen } from '@testing-library/react';
import React from 'react';
import '@testing-library/jest-dom';
import FormCard from './index';

describe('预发职位', () => {
  test('预发职位初始化展示', () => {
    const { getByText } = render(<FormCard />);
    
    // 通过screen.debug()查看渲染出来的HTML DOM树是什么样的，在写测试代码前，先通过debug查看当前页面中可见的元素,再开始查询元素,这会有助于编写测试代码.
    screen.debug();

    expect(getByText('发 布')).toBeInTheDocument();
  });
});

import { useState } from "react";

export interface Options {
  min?: number;
  max?: number;
}

export type ValueParam = number | ((c: number) => number);

function getTargetValue(val: number, options: Options = {}) {
  const { min, max } = options;
  let target = val;
  if (typeof max === "number") {
    target = Math.min(max, target);
  }
  if (typeof min === "number") {
    target = Math.max(min, target);
  }
  return target;
}

function useCounter(initialValue = 0, options: Options = {}) {
  const { min, max } = options;

  const [current, setCurrent] = useState(() => {
    return getTargetValue(initialValue, {
      min,
      max,
    });
  });

  const setValue = (value: ValueParam) => {
    setCurrent((c) => {
      const target = typeof value === "number" ? value : value(c);
      return getTargetValue(target, {
        max,
        min,
      });
    });
  };

  const inc = (delta = 1) => {
    setValue((c) => c + delta);
  };

  const dec = (delta = 1) => {
    setValue((c) => c - delta);
  };

  const set = (value: ValueParam) => {
    setValue(value);
  };

  const reset = () => {
    setValue(initialValue);
  };

  return [
    current,
    {
      inc,
      dec,
      set,
      reset,
    },
  ] as const;
}

export default useCounter;

import { renderHook } from "@testing-library/react-hooks";
import useCounter from "@hooks/useCounter";
import { act } from "@testing-library/react";

describe("useCounter", () => {
  test("可以做加法", () => {
    const { result } = renderHook(() => useCounter(0));

    act(() => {
      result.current[1].inc(1);
    });

    expect(result.current[0]).toEqual(1);
  });

  test("可以做减法", () => {
    const { result } = renderHook(() => useCounter(0));

    act(() => {
      result.current[1].dec(1);
    });

    expect(result.current[0]).toEqual(-1);
  });

  test("可以设置值", () => {
    const { result } = renderHook(() => useCounter(0));

    act(() => {
      result.current[1].inc(10);
    });

    expect(result.current[0]).toEqual(10);
  });

  test("可以重置值", () => {
    const { result } = renderHook(() => useCounter(0));

    act(() => {
      result.current[1].inc(1);
      result.current[1].reset();
    });

    expect(result.current[0]).toEqual(0);
  });

  test("可以使用最大值", () => {
    const { result } = renderHook(() => useCounter(100, { max: 10 }));

    expect(result.current[0]).toEqual(10);
  });

  test("可以使用最小值", () => {
    const { result } = renderHook(() => useCounter(0, { min: 10 }));

    expect(result.current[0]).toEqual(10);
  });
});

import { render } from '@testing-library/react';
import React from 'react';
import '@testing-library/jest-dom';
import FormCard from './index';
import { store } from '../../store'

describe('预发职位', () => {
  test('预发职位初始化展示', () => {
    // 模拟store方法，注意这种方法会涉及到代码细节问题，应避免使用，这里只做示意
    jest.spyOn(store, 'handleFormInstance');

    const { getByText } = render(<FormCard />);

    expect(getByText('发 布')).toBeInTheDocument();
    expect(store.handleFormInstance).toBeCalledTimes(1);
  });
});

import { render } from '@testing-library/react';
import React from 'react';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import { saveAgreementLog } from '@common/js/utils/safetyAgreement';
import { asyncThrowError } from '@common/js/utils';
import { store } from '../../store';
import FormPublishBtn from './index';

// 这种mock方式需要团队内评审，因为当store中新增方法时，此处mock也需要同步修改，否则可能导致报错：store下方法找不到
jest.mock('../../store', () => {
  const store = {
    formInstance: {
      validateFields: jest.fn().mockResolvedValue(Promise.resolve({})),
      scrollToField: jest.fn()
    },
    submitFormData: jest.fn()
  };
  return {
    __esModule: true,
    store,
    default: () => store
  };
});

jest.mock('@common/js/utils/safetyAgreement', () => {
  return {
    saveAgreementLog: jest.fn()
  };
});

jest.mock('@common/js/utils', () => ({
  asyncThrowError: jest.fn()
}));

describe('预发职位-发布操作', () => {
  test('展示发布按钮，提交表单', () => {
    const { getByText } = render(<FormPublishBtn />);

    expect(getByText('发 布')).toBeInTheDocument();
  });

  test('点击发布按钮', async () => {
    const user = userEvent.setup();

    const { getByText } = render(<FormPublishBtn />);

    const button = getByText('发 布');

    await user.click(button);

    expect(store.formInstance!.validateFields).toHaveBeenCalled();
    expect(saveAgreementLog).toHaveBeenCalledWith({
      sceneTypeCode: 'S0001',
      confirmMode: 1,
      agreementTypes: ['A0003']
    })
    expect(store.submitFormData).toHaveBeenCalled();
  });

  test('校验失败', async () => {
    const user = userEvent.setup();

    (store.formInstance!.validateFields as jest.Mock).mockRejectedValueOnce({
      errorFields: [{ name: ['errorField'] }]
    });

    const { getByText } = render(<FormPublishBtn />);
    const button = getByText('发 布');

    await user.click(button);

    expect(asyncThrowError).toHaveBeenCalled();
    expect(store.formInstance!.scrollToField).toHaveBeenCalledWith('errorField', {
      behavior: 'smooth'
    });
  });
});

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { Form } from 'antd';
import '@testing-library/jest-dom';
import { renderHook } from '@testing-library/react-hooks';
import userEvent from '@testing-library/user-event';
import moment from 'moment';
import DuomianMobileModal from '../LPTVideoInterview/compontents/DuomianMobileModal';
import * as apis from '../LPTVideoInterview/service';

describe('视频面试弹窗', () => {
  beforeEach(() => {
    // 接口mock参考接口测试一节内容介绍，这里只是快速示意
    jest.spyOn(apis, 'createVideoInterviewAjax').mockResolvedValue({
      flag: 1,
      data: {
        usercName: '招工组',
        compName: '猎聘测测',
        curJobPosition: '测试工程师',
        portrait: '',
        ejobId: '1',
        oppositeImId: '',
      },
    });

    jest.spyOn(apis, 'createInterviewAjax').mockResolvedValue({
      flag: 1,
      data: null,
    });
  });

  test('打开视频面试弹窗', async () => {
    render(<DuomianMobileModal />);

    expect(apis.createVideoInterviewAjax).toHaveBeenCalledTimes(1);
    await waitFor(() => {
      expect(screen.getByText('发送面试邀请')).toBeInTheDocument();
    });
  });

  test('表单提交', async () => {
    const user = userEvent.setup();

    // 创建一个真实的表单数据管理实例，由于 useForm 是一个hook方法，因此这里借助 renderHook 方法，详见React Hook 测试
    const { result } = renderHook(() => Form.useForm());

    jest.spyOn(Form, 'useForm').mockImplementation(() => result.current);

    render(<DuomianMobileModal />);

    let btnEle;
    await waitFor(() => {
      btnEle = screen.getByText('发送面试邀请');
    });

    result.current[0].setFieldsValue({
      job: '1',
      date: moment('2023-09-23'),
      time: moment('2023-09-23 8:30'),
    });

    await user.click(btnEle);

    expect(btnEle).toBeInTheDocument();
    expect(apis.createInterviewAjax).toHaveBeenCalledWith({
      oppositeImId: '',
      inputInfo: JSON.stringify({
        ejobId: '1',
        interviewTime: `${moment('2023-09-23').format('YYYYMMDD')}${moment('2023-09-23 8:30').format('HHmm')}00`,
      }),
    });
  });
});

const Title: FC<Props> = (props) => {
  const { title, type } = props;

  return (
    <Row style={styleMapper[type]}>
      <Col>
        第一个 Col
      </Col>
      <Col>
        <div>{title}</div>
      </Col>
    </Row>
  )
};

describe("Title", () => {
  test("可以正确渲染大字", () => {
    const { getByText } = render(<Title type="large" title="大字" />);
    const content = getByText('大字');
    expect(content).toMatchSnapshot();
  });

  test("可以正确渲染小字", () => {
    const { getByText } = render(<Title type="small" title="小字" />);
    const content = getByText('小字');
    expect(content).toMatchSnapshot();
  });
});

exports[`Title 可以正确渲染大字 1`] = `
<div>
  大字
</div>
`;

exports[`Title 可以正确渲染小字 1`] = `
<div>
  小字
</div>
`;

// after1000ms.ts
type AnyFunction = (...args: any[]) => any;

const after1000ms = (callback?: AnyFunction) => {
  console.log("准备计时");
  setTimeout(() => {
    console.log("午时已到");
    callback && callback();
  }, 1000);
};

export default after1000ms;

import after1000ms from "utils/after1000ms";

describe("after1000ms", () => {
  beforeAll(() => {
    jest.useFakeTimers();
  });

  test("可以在 1000ms 后自动执行函数", () => {
    jest.spyOn(global, "setTimeout");
    const callback = jest.fn();
    
    expect(callback).not.toHaveBeenCalled();

    after1000ms(callback);

    jest.runAllTimers();

    expect(callback).toHaveBeenCalled();
    expect(setTimeout).toHaveBeenCalledTimes(1);
    expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 1000);
  });
});

describe("网页地址的Mock", () => {
  test("可以获取当前网址的查询参数对象", () => {
    // 使用 jest-location-mock (本包配置中已配置)。 这种方法会监听 window.location.assign，通过它来改变网页地址。
    window.location.assign('https://www.baidu.com?a=1&b=2');

    expect(window.location.search).toEqual("?a=1&b=2");
    expect(getSearchObj()).toEqual({
      a: "1",
      b: "2",
    });
  });

  test("空参数返回空", () => {
    window.location.assign('https://www.baidu.com');

    expect(window.location.search).toEqual("");
    expect(getSearchObj()).toEqual({});
  });
});

import axios from 'axios';
import Users from './users';

jest.mock('axios');

test('should fetch users', () => {
  const users = [{name: 'Bob'}];
  const resp = {data: users};
  
  // TS2339: Property 'mockResolveValues' does not exist on type '  >(url: string, config?: AxiosRequestConfig | undefined) => Promise '.
  axios.get.mockResolvedValue(resp);

  // 你也可以使用下面这样的方式：
  // axios.get.mockImplementation(() => Promise.resolve(resp))

  return Users.all().then(data => expect(data).toEqual(users));
});

jest.spyOn(axios, 'get').mockResolvedValue(resp);

// 你也可以使用下面这样的方式：
// jest.spyOn(axios, 'get').mockImplementation(() => Promise.resolve(resp))

import { mocked } from 'jest-mock';

const mockedGet = mocked(axios.get); // 带上 jest 的类型提示
mockedGet.mockResolvedValue(resp); // 含有 jest 的类型提示

console.error node_modules/react-dom/cjs/react-dom.development.js:530
  Warning: An update to UsernameForm inside a test was not wrapped in act(...).

  When testing, code that causes React state updates should be wrapped into act(...):

  act(() => {
    /* fire events that update state */
  });
  /* assert on the output */

  This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
      in UsernameForm

import { render, screen, act } from '@testing-library/react';