Enzyme 在测试 React Component 时会忽略某些 prop 值

Question

任何人都可以为我解释 jest 中的以下测试吗？

StateIdText.jsx

import React, { Component, PropTypes } from 'react';

class StateIdTxt extends Component {
    propTypes: {
        x: PropTypes.number.isRequired,
        y: PropTypes.number.isRequired,
        stateId: PropTypes.number.isRequired
    }

    render() {
        const {x, y, stateId} = this.props;
        return (
                <text x={x} y={y}
                      textAnchor="end"
                      dominantBaseline="text-before-edge"
                      fontSize=".7em" fill="blue">
                    {stateId}
                </text>
        );
    }
}

export default StateIdTxt;

StateIdTxt.test.js

import React from 'react';
import {mount, render, shallow} from 'enzyme';

import StateIdTxt from './StateCoordTxt.jsx';

it('shallow <StateIdTxt />', () => {
    const wrapper = shallow(<StateIdTxt x={1.5} y={2.1} stateId={99} />);
    expect(wrapper.prop('x')).toEqual(1.5);
    expect(wrapper.prop('y')).toEqual(2.1);
    expect(wrapper.prop('stateId')).toBeUndefined();

    expect(wrapper.prop('textAnchor')).toBe('start'); // how come not end?
    expect(wrapper.prop('dominantBaseline')).toBe('text-before-edge');
    expect(wrapper.prop('fontSize')).toBe('.7em');
    expect(wrapper.prop('fill')).toBe('blue');
});

为什么 wrapper.prop('textAnchor') 期望它通过的 'start' 而不是 'end'？我实际上可以将 'end' 更改为其他随机文本，并且测试仍然通过。

Answer 1

根据您在 post 中提到的文件名，我认为您在 StateIdTxt.test.js 中的导入有错别字：

import StateIdTxt from './StateCoordTxt.jsx';

看起来应该是

import StateIdTxt from './StateIdTxt.jsx';

Enzyme 在测试 React Component 时会忽略某些 prop 值

Enzyme ignores certain prop values when testing React Component

javascript

reactjs

jestjs

enzyme