Question

我正在尝试测试一个具有两个props标题和url的组件。

我不确定如何传递模拟数据，我尝试了一次，但是传递了，但是我很确定它没有读取数据object

两个测试都通过了。

Card.js

import React, {Component} from 'react';
const Styles = {
    width: '300px',
    height: '300px'
}
class Card extends React.Component {
    render() {
        return (
            <div>
                {/* Renders title of the GIY  */}
                <h1>{this.props.title}</h1>
                <div >
                    <img alt="" src={this.props.url}/>
                </div>
            </div>
        );
    }
}
export default Card;

Card.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import {shallow} from 'enzyme';
import Card from './Card';

describe('Should render Card Component', ()=> {
    it('should render card component', ()=> {
      const component = shallow(<Card />);

    })

});

describe('Should render title/ url prop', ()=>{
    it('should render title /url prop', ()=>{
        // trying to mock data for the Card component
        const data = {
            title: "owl",
            url:"https://giphy.com/gifs/bird-owl-qISaMW1xwmvNS"
        }

        const component = shallow(<Card title={data.title} url={data.url}/>)

    })
})

Answer 1

您没有提出任何断言。您需要expect才能发生一些结果。

Card.js （如果不需要state，则可以是纯函数）

import React from "react";
import PropTypes from "prop-types";

const styles = {
  width: "300px",
  height: "300px"
};

const Card = ({ title, url }) =>
  title && url ? ( // if a title and url are passed in, return <div>...</div>, else return "null"
    <div className="card">
      <h1>{title}</h1>
      <div>
        <img alt="" src={url} styles={styles} />
      </div>
    </div>
  ) : null;

// PropTypes will throw a warning if either of them is missing
PropTypes.propTypes = {
  title: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired
};

export default Card;

Card.test.js

import React from "react";
import { shallow } from "enzyme";
import Card from "../index";

// we define initial props (empty strings)
const initialProps = {
  title: "",
  url: ""
};

// we shallow wrap the Card while passing in the "initialProps" 
const wrapper = shallow(<Card {...initialProps} />);

// we define some props that will be passed in during our second test
const nextProps = {
  title: "owl",
  url: "https://media.giphy.com/media/qISaMW1xwmvNS/giphy.gif"
};

describe("Card Component", () => {
  afterAll(() => wrapper.unmount());

  it("shouldn't render a card without the required props", () => {
    expect(wrapper.type()).toBeNull();
  });

  it("should render a card if the required props are present", () => {
    wrapper.setProps({ ...nextProps }); // we update the component with "nextProps"

    expect(wrapper.find("div.card")).toHaveLength(1); // expect "div.card" to be present
    expect(wrapper.find("h1").text()).toContain(nextProps.title); // expect the "h1" element to contain "owl"
    expect(wrapper.find("img").prop("src")).toBe(nextProps.url); // expect the "img"'s src to be "https://media.giphy.com/media/qISaMW1xwmvNS/giphy.gif"
  });
});

工作示例：https://codesandbox.io/s/k35zpqwk97

酶单元测试应在失败时通过测试

1 个答案: