Question

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

Summary.test.js：

<Modal>

Summary.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.test.js.snap：

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,
}

Answer 1

我想问题是你没有将trigger道具传递到Modal组件。

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

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

if (!trigger) return null

我想这是你问题的根源：）

每次都对Reest jest快照通过测试

1 个答案: