如何在 React 中进行快照测试时模拟 react-bootstrap 组件？

Question

我正在开发一个使用

react-bootstrap

UI 构建的 React 项目。虽然编写测试用例有很多选择，但我选择了

Snapshot testing

使用

Jest

.

---

我有一个包裹在

bootstrap

Modal 中的组件，并且在生成的快照中始终使用

null

值呈现。如果删除

Modal

包装器并直接返回表单，那么它生成的输出就好了。

我想模拟引导程序

Modal

以便返回一个简单的实现（同时保持库的其余部分未被触及）并减少传递

react-boostrap

库所需的所有各种道具的复杂性。

成分：

function MyComponent(){
  return (
    <div>
      <Modal
        show={props.showReviewModal}
        onHide={handleClose}
        className="well-connection-review"
      >
        <Modal.Header closeButton>
          <Modal.Title className="m-auto p-auto">
            Modal Title
          </Modal.Title>
        </Modal.Header>
        <Form
          noValidate
          validated={validated}
          onSubmit={(e) => handleValidation(e)}
        >
          <Modal.Body>
            <Form.Row className="m-2 d-flex align-items-center">
              <Form.Group as={Col} controlId="formPowerCompany" className="m-1">
                <Form.Label className="label">Power Company</Form.Label>
                <Select
                  isClearable={true}
                  name="PowerCompany"
                  options={ELECTRIC_PROVIDERS}
                  className="basic-multi-select well-connection-report-filters"
                  onChange={PowerCompanyChange}
                  value={powerCompany}
                  isSearchable={false}
                  placeholder="Power Company"
                />
              </Form.Group>
            </Form.Row>
            <Form.Row className="m-2 d-flex align-items-center">
              <Form.Group as={Col} controlId="formMeterID" className="m-1">
                <Form.Label className="label">Meter ID</Form.Label>
                <Form.Control
                  type="text"
                  value={meterId}
                  name="meterId"
                  onChange={handleChange}
                  autoComplete="off"
                />
                <Form.Control.Feedback type="invalid">
                  Please enter an ID
                </Form.Control.Feedback>
              </Form.Group>
            </Form.Row>
          </Modal.Body>

          <Modal.Footer className="mr-3">
            <Button
              variant="primary"
              onClick={() => handleClose()}
              type="submit"
            >
              Close
            </Button>
          </Modal.Footer>
        </Form>
      </Modal>
    </div>
  );
}

export default MyComponent;

组件的测试用例：

import React from "react"; 
import MyComponent from "../MyComponent"; 
import renderer from "react-test-renderer"; 

describe("Snapshot testing of MyComponent", () => { 
    it("MyComponent snapshot", () => { 
        const MyComponent = renderer.
        create(<MyComponent message={"message"} />).toJSON(); 
        expect(MyComponent).toMatchSnapshot(); 
    }); 
});

组件的快照输出：

// Jest Snapshot v1, [link to jest docs]

exports[`Snapshot testing of MyComponent`] = `null`;

Answer 1

在这里发布一个解决方案，以便将来帮助任何偶然发现它的人。消除传递所需道具和模拟

react-boostrap

库组件的各种方法的复杂性的最简单方法是模拟库的各个组件并为其返回自定义实现。

这里的想法是NOT测试外部库组件的结构，而只是测试你自己的结构

components

.

解决方案：

// MyComponents.test.js

import React from "react"; 
import MyComponent from "../MyComponent"; 
import renderer from "react-test-renderer"; 

// this code will be auto hoisted by Jest
jest.mock("react-bootstrap", () => { 
    // get the original boostrap library
    const orgBootstrap = jest.requireActual("react-bootstrap"); 
    // mock the Modal component
    const mockModal = ({ children }) => { return <div>{children}</div>; }; 

    // mock the sub-components of the Modal
    mockModal.Header = (props) => <div>{props.children}</div>; 
    mockModal.Body = (props) => <div>{props.children}</div>; 
    mockModal.Footer = (props) => <div>{props.children}</div>; 
    
    // return your modified boostrap library instance with mocked Modal
    const mockBoostrap = { __esModule: true, ...orgBootstrap, Modal: mockModal }; 
    return mockBoostrap; 
});

describe("Snapshot testing of MyComponent", () => { 
    it("MyComponent snapshot", () => { 
        const MyComponent = renderer.
        create(<MyComponent />).toJSON(); 
        expect(MyComponent).toMatchSnapshot(); 
    }); 
});