Unit testing

Unit testing refers to the testing and verification of the smallest units in software. I understand that unit testing is generally a test of business logic, whether it is a business logic component or a UI library, the purpose of validation is to verify that the specific execution logic is correct.

Jest test

Jest need to single test enzymejs. Making. IO/enzyme/to cooperate to complete, divided into snapshot testing and test two DOM.

A snapshot of the test

The snapshot test generates a snapshot file, and the subsequent results are compared to the previous results at run time. The snapshot component is good for testing UI rendering to prevent big changes in rendering that could cause problems.

Dom test

DOM testing is to run business components through rendering and compare the results with expectations to find problems, suitable for verifying some specific business logic. The running points are as follows: 1. Simulate the user test environment and trigger corresponding events. 2 Check whether the output data meets requirements.

Jest component rendering

1. Shallow rendering, one layer does not involve sub-components, and the virtual DOM rendering speed is fast.
2. Mount deep rendering, involving sub-components, rendering slow.

Shallow is generally preferred instead of shallow for test performance purposes.

Coding details

Events trigger

Events can be triggered in three ways:

1. React the react is their maintenance events mechanism of management, it will only put the event is bound to a specific document node, and then their processing, specific can see zhuanlan.zhihu.com/p/25883536.

So how do you trigger it? To trigger react node events, use the Enzyme simulate function as follows:

/ / 1 component
 <input
    value={value}
    onChange={handleChange}
  />
 // 2 Components inside
  const { onChange } = this.props; 
  const handleChange = (e: Event) = > {
    const val = e.target.value;
    setValue(val);
    if(onChange) { onChange(e, val); }};// 3 Test the code
 it('fires onChange event'.() = > {
    const handleChange = jest.fn();
    const wrapper = mount(<Input onChange={handleChange} />);
    wrapper.find('input').simulate('change', { target: { value: 'test'}}); expect(handleChange).toBeCalled(); expect(wrapper.find('input').props().value).toEqual('test');
  });
Copy the code

2. Dom events

   Suppose the business has met the real dom bind an event, then you need to use the browser’s EventTarget. DispatchEvent trigger in the form of concrete examples are as follows:

test('Test DOM Event'.() = > {
    const ele = ReactDOM.findDOMNode(
      wrapper.find('.xselect').instance(),
    );

    ele.dispatchEvent(new Event('click', { bubbles: true }));
    wrapper.unmount();
  });
Copy the code

3. Normal event If a normal event is passed in, you can try to get the event directly and call it. Example code is as follows:

it('Test edit Form function'.async() = > {await act(async() = > {const wrapper = mount(
        <FieldForm />,);const onChange =
        wrapper.find('FormFieldInput').prop('onChange') || noop;
      onChange({
        target: {
          value: 'Enter test name 1',}}); }); });Copy the code

How to handle requests

Mock requests, because we focus on business logic. There are three mock methods (essentially the same, they are all replacement, but the scope of replacement is different in specific application).

1. Direct mock business functions
2. This is done directly through the jest. SpyOn () mock public function
3. Use third-party toolkits

How do I trigger when I encounter attribute changes

Jest can use the ACT function if it encounters problems with render attributes after assertion. Because the ACT ensures two things, namely that it is in the scope of the Act.

Any state updates will be executed any enqueued effects will be executed quoted from github.com/threepointo…

Coverage problem

Don’t do coverage for coverage’s sake, or you’ll add a lot of maintenance overhead. For example:

/* istanbul ignore next */
export const noop: () = > void = () = > {
  // do nothing.
};
Copy the code

Other problems

1. What if the environment has multiple React instances?

React overrides the resolver property to specify a version instance. Directly refer to the link code, you can output console to observe the specific properties.

www.jestjs.cn/docs/config…