babel-plugin-test-to-storybook

babel-plugin-test-to-storybook

Babel plugin to help you make test file converted to storybook file

Example

before

import React from 'react'
import useForm from '../../src/hooks/useForm'

describe("表单能力测试", () => {

  function FormComponent({useForm, onSubmit, onError}) {
    return <p>333333</p>
  }

  it("基础表单能力测试", (done) => {

    const wrapper = mount(<FormComponent useForm={useForm} onSubmit={data => {
      expect(data).to.deep.equal({
        person : {
          name : 'dwy'
        }
      })
      done()
    }} />)

    expect(
      wrapper
        .find(".pname")
        .first()
        .props()
    ).to.have.property("value", "ramroll");

    wrapper
      .find(".pname input")
      .first()
      .simulate("change", { target: { value: "dwy" } });

  })

  it("表单-获取所有值", (done) => {
    const wrapper = mount(
      <FormComponent
        useForm={useForm}
        onSubmit={data => {
          expect(data).to.deep.equal({
            person: {
              name: "ramroll",
              id : 100
            }
          });
          done()
        }}
      />
    );

    wrapper.find('.pid input').first().simulate('change', {
      target : {
        value : 100
      }
    })
  })
})

after

import React from 'react';
import { storiesOf } from "@storybook/react";
import useForm from '../../src/hooks/useForm';

function FormComponent(_ref) {
  var useForm = _ref.useForm,
      onSubmit = _ref.onSubmit,
      onError = _ref.onError;
  return React.createElement("p", null, "333333");
}

storiesOf("表单能力测试", module).add("基础表单能力测试", function (done) {
  return React.createElement(FormComponent, {
    useForm: useForm,
    onSubmit: function onSubmit(data) {
      done();
    }
  });
}).add("表单-获取所有值", function (done) {
  return React.createElement(FormComponent, {
    useForm: useForm,
    onSubmit: function onSubmit(data) {
      done();
    }
  });
}).add('表单-字段验证(验证一个字段)', function (done) {
  return React.createElement(FormComponent, {
    useForm: useForm
  });
}).add('表单-设置所有值', function (done) {
  return React.createElement(FormComponent, {
    useForm: useForm,
    onSubmit: function onSubmit(data) {
      done();
    }
  });
}).add("校验-并获取值", function (done) {
  return React.createElement(FormComponent, {
    useForm: useForm,
    onSubmit: function onSubmit(data) {},
    onError: function onError(errors) {
      console.log(errors);
      done();
    }
  });
});

Use

// webpack
{
    test: /\.test\.js$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          plugins: ['babel-plugin-test-to-storybook']
        }
      }
    ]
  }

// babel.config.js
{
  ...,
  "plugins": [
    [
      "babel-plugin-test-to-storybook",
      {
        "file": /\.test\.js$/
      }
    ]
  ],
  ...
}