Question

我有这样的组件：

component.js

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

 const Test = ({ text }) => (
 <div>
  {text.split("\n").map((item, key) => {
  return (
    <span key={key}>
      {item}
      <br />
    </span>
    );
    })}
  </div>
 );

 Test.propTypes = {
 text: PropTypes.string.isRequired
 };

 export default Test;

如何使用酶为该反应组分编写组分测试？我是新的反应和酶。任何帮助都会非常明显。

Answer 1

这可能是使用mocha的测试：

import {shallow} from 'enzyme'
import assert from 'assert'
import Test from './Test'

describe('component Test', () => {
  it('should show a span for each line of "text" prop', () => {
    const text = `foo
    bar
    `
    const wrapper = shallow(<Test text={text} />)
    const spans = wrapper.find('span')
    assert.equal(spans.length, 2)
    assert.equal(spans.at(0).text(), 'foo')
    assert.equal(spans.at(1).text(). 'bar')
  })

  it('should throw if "text" prop is not provided', () => {
    assert.throws(() => {
      shallow(<Text />)
    })
  })
})

Answer 2

使用酶+ jest（来自jest example）测试dom是无耻的web site：

// __tests__/CheckboxWithLabel-test.js

import React from 'react';
import {shallow} from 'enzyme';
import CheckboxWithLabel from '../CheckboxWithLabel';

test('CheckboxWithLabel changes the text after click', () => {
  // Render a checkbox with label in the document
  const checkbox = shallow(
    <CheckboxWithLabel labelOn="On" labelOff="Off" />
  );

  expect(checkbox.text()).toEqual('Off');

  checkbox.find('input').simulate('change');

  expect(checkbox.text()).toEqual('On');
});

我建议您浏览我给出的链接 - 它包含使用Jest + Enzyme测试反应组分的很好的例子。

用酶反应成分测试

2 个答案: