每次反应 jest 快照通过测试答案

【问题标题】：React jest snapshot pass test every time每次反应 jest 快照通过测试
【发布时间】：2018-03-23 23:25:16
【问题描述】：

我在 Jest 22 中使用 create-react-app 16.2。我开始测试 yarn test。第一次运行的快照测试会创建快照文件，但快照不会覆盖整个组件，只有<Accordion> 组件是输出中的第一个<div>。在<Accordion> 之后是<Modal> 部分，但它不会呈现到快照文件中。我做错了什么？

Summary.test.js：

    /**
 * @jest-environment node
 */

import React from 'react'
import renderer from 'react-test-renderer'
import Summary from './Summary';

it('should match its snapshot without content', () => {
  const tree = renderer
    .create(<Summary />)
    .toJSON();
  expect(tree).toMatchSnapshot();
})

Summary.js：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Segment, Icon, Header, Accordion, Modal, Image, Button, List } from 'semantic-ui-react'

export default class ItemGroup extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        };
    }

    show = dimmer => () => this.setState({ dimmer, open: true })
    close = () => this.setState({ open: false })
    openMail = () => {
        let message = ``
        const { content } = this.props;
        let selectedItems = `Dear Sirs,%0A%0A
        I am interested in following configuration: %0A`
        for(let item in content) {
            selectedItems+=`-> ${content[item].text}%0A`
        }
        window.location.href = `mailto:user@example.com?subject=Request%20for%20offer&body=${selectedItems}%0A%0A`;
    }
  render() {
        const { content } = this.props;
        const { open, dimmer } = this.state;
        let selectedItems = '0 items selected';

        if(content) {
            selectedItems =  Object.keys(content).map( item => 
            <List.Item key={content[item].text}> {content[item].text} </List.Item>
            )
        }

    return (
            <div style={{marginBottom:'-10px'}}>
                <Accordion.Title index={this.props.index} onClick={this.show('blurring')}>
                    <Segment style={{ padding:'0px', display:'flex', backgroundColor:'rgba(217, 103, 103, 0.867)', color:'black' }}>
                        <Header as='h1'size='huge'>
                            <Icon name='ordered list' style={{ fontSize: '2em', padding: '0em 1.3em' }} />
                            <Header.Content> Summary </Header.Content>
                        </Header>
                    </Segment>
                </Accordion.Title>
                <Modal dimmer={dimmer} open={open} onClose={this.close}>
          <Modal.Header>Configuration summary</Modal.Header>
          <Modal.Content image>
            <Image wrapped size='medium' src='/asset/molly.png' />
            <Modal.Description>
              <Header>You have selected following items:</Header>
                            <List celled ordered>
                                {selectedItems} 
                        </List>
            </Modal.Description>
          </Modal.Content>
          <Modal.Actions>
            <Button color='black' onClick={this.close}>
              TEREFERE
            </Button>
            <Button positive icon='mail outline' labelPosition='right' content="Send E-mail" onClick={this.openMail} />
          </Modal.Actions>
        </Modal>
            </div>
        );
  }
}

ItemGroup.propTypes  = {
    index: PropTypes.number,
    content: PropTypes.object,
}

Summary.test.js.snap：

// Jest Snapshot v1, 

exports[`should match its snapshot without content 1`] = `
<div
  style={
    Object {
      "marginBottom": "-10px",
    }
  }
>
  <div
    className="title"
    onClick={[Function]}
  >
    <div
      className="ui segment"
      style={
        Object {
          "backgroundColor": "rgba(217, 103, 103, 0.867)",
          "color": "black",
          "display": "flex",
          "padding": "0px",
        }
      }
    >
      <h1
        className="ui huge header"
      >
        <i
          aria-hidden="true"
          className="ordered list icon"
          style={
            Object {
              "fontSize": "2em",
              "padding": "0em 1.3em",
            }
          }
        />
        <div
          className="content"
        >
           Summary 
        </div>
      </h1>
    </div>
  </div>
</div>
`;

【问题讨论】：

当 Modal 具有 open 属性等于 false 时，它是否渲染任何东西？
好点 :) 无论如何我已经更改为 open: true，所以窗口应该立即打开，但它仍然没有在快照文件中呈现。可能我需要将<Accordion> 和<Modal> 分成两个单独测试的组件。

标签： reactjs jestjs

【解决方案1】：

我猜问题是你没有将trigger prop 传递到你的Modal 组件中。

查看你正在使用的库中组件的来源（semantic-ui-react）：

Modal 组件使用 Portal 组件，该组件具有以下代码：

if (!trigger) return null

我想这是你问题的根源:)

【讨论】：