反应- 单位- 测试- 使用

用于维护工具的库,以允许简单的单位测试 React apps.

这个库的目的是支持针对反应应用的测试模式,这些应用侧重于孤立的单位测试和组件快照. 它提供了一种与Enzyme的相类似浅浅的渲染器,由Ezyme所建 react-test-renderer,以及一些公用事业,重点是为反应单位测试生态系统提供支持

公用事业

shallow - 浅色渲染器

提供特定反应成分的浅度渲染.

使用量

导入渲染器

import { shallow } from '@edx/react-unit-test-utils';

模拟局部组件以进行浅渲染

jest.mock('./LocalComponent', () => 'LocalComponent');

使用 paragon 的模拟组件库 mockComponents 函数(见下文).

生成渲染元素

const el = shallow(<MyComponent {...props} />);

验证快照

expect(el.snapshot).toMatchSnapshot();
expect(el.instance.findByType(LocalComponent)[0].snapshot).toMatchSnapshot();

检查了组件道具和儿童.

const localChild = el.instance.findByType(LocalComponent)[0];
const localDiv = el.instance.findByType('div')[0];
const localTestEl = el.instance.findByType('my-test-id')[0];
// returned object is of the shape { props, type, children }
expect(localChild.props.label).toEqual(myLabel);
expect(localDiv.children[0].type).toEqual('h1');
expect(localDiv.children[0].matches(<h1>My Header</h1>)).toEqual(true);

mockComponents - 组件库模拟工具

组件库用于模拟许多复杂组件的进口图书馆.

使用量

jest.mock('@openedx/paragon', () => jest.requireActual('@edx/react-unit-test-utils').mockComponents({
  Button: 'Button',
  Icon: 'Icon',
  Form: {
    Group: 'Form.Group',
    Control: 'Form.Control',
  },
}));

// Provides mocks for <Button>, <Icon>, <Form>, <Form.Group>, and <Form.Control> with appropriate mocks to appear legibly in the snapshot.

useKeyedState 财务报告和审定财务报表 mockUseKeyedState - 反应状态钩包装和测试工具

这是测试使用状态钩子反应的一对方法,否则直接测试会有些问题.

使用量

定义用于检查状态密钥的密钥;

import { useKeyedState, StrictDict } from '@edx/react-unit-test-utils';
const state = StrictDict({
  field1: 'field1',
  field2: 'field2',
  field3: 'field3',
]);
// when initializing, use a state key as the first argument to make the calls uniquely identifiable.
const useMyComponentData = () => {
  const [field1, setField1] = useKeyedState(stateKeys.field1, initialValue);
};

测试时, 在测试之外初始化模拟状态工具

import { mockUseKeyedState } from '@edx/react-unit-test-utils';
import * as hooks from './hooks';
const state = mockUseState(hooks.stateKeys);

对于使用这些状态钩子的钩子,首先为该测试而嘲笑状态对象,再测试初始化参数.

state.mock();
const out = myHook();
state.expectInitializedWith(state.keys.field1, initialValue);

set State 对象包含每个状态密钥的拼接函数. 访问设置状态对象以验证更改和跟踪效果/调用 .

state.mock();
const out = myHook();
expect(out.setField1).toEqual(state.setState.field1);
out.handleClick(); // out.handleClick = () => { setField2(null); }
expect(state.setField.field2).toHaveBeenCalledWith(null);

getEffect - 反应使用效钩测试方法.

基于一个先决条件值列表的简单工具来抓取使用效果调用 .

使用量

import React from 'react';
import { getEffects } from '@edx/react-unit-test-utils';

jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useEffect: jest.fn(),
}));

const useMyHook = ({ val0, val1, method1 }) => {
  useEffect(() => {
    method1(val0);
  }, []);
  useEffect(() => {
    method1(val1);
  }, [val1, method1]);
};

describe('useMyHook', () => {
  describe('behavior', () => {
    const val0 = 'initial-value';
    const val1 = 'test-value';
    const method1 = jest.fn();
    beforeEach(() => { jest.clearAllMocks(); });
    it('calls method1 with val0 on initial load', () => {
      useMyHook({ val0, val1, method1 });
      const cb = getEffect([], React)[0];
      cb();
      expect(method1).toHaveBeenCalledWith(val0);
    });
    it('calls method1 with val1 when either changes', () => {
      useMyHook({ val0, val1, method1 });
      const cb = getEffect([val1, method1], React)[0];
      cb();
      expect(method1).toHaveBeenCalledWith(val1);
    });
  });
});

formatMessage - i18n 嘲弄方法

I18n 库的简单模拟工具.

使用量

模拟反应- intl 或 @ edx/ frontend- platform/ i18n (最好在 setupTest.js中)

jest.mock('@edx/frontend-platform/i18n', () => ({
  formatMessage: jest.requireActual('@edx/react-unit-test-utils').formatMessage,
}));

导入以校验浅度.

import { shallow, formatMessage } from '@edx/react-unit-test-utils';
...
expect(el.children[0]).toEqual(formatMessage(myMessage));

StrictDict 财务报告和审定财务报表 keyStore - 键盘参考的严格词典

定义使用无效密钥调用时的投诉对象 。 用于在使用定义模块时,将无效的密钥作为错误行为处理(例如使用对象作为密钥存储)。 主要是这种方法可以避免在javascript代码和测试中使用"魔法弦".

使用量

将对象装入严格命令中, 如果调用无效的密钥, 则会引发错误 .

const selectors = StrictDict({
  validSelector1: () => ({}),
  validSelector2: () => ({}),
});
const selector = selectors.invalidSelector; // raises an error

使用情况 keyStore 从对象或严格命令中快速抓取密钥作为严格命令本身.

const selectorKeys = keyStore(selectors);
selectorKeys.validSelector1; // 'validSelector1';
selectorKeys.invalidSelector; // raises an error;