Single-File React Component - Example (idea)

Test.react

<script role="view">
  import { store, view } from 'react-easy-state'

  const counter = store({
    value: 0,
    increment() { counter.value += 1 },
    decrement() { counter.value -= 1 }
  })

  export default view(() => (
    <div className="Test">
      <p>Count: {counter.value}</p>
      <p>
        <button onClick={counter.increment}>+</button>
        <button onClick={counter.decrement}>-</button>
      </p>
    </div>
  ))

</script>

<style>
  .Test {
    font-size: 120%;
  }
</style>

<script role="test">
  import test from 'test'

  test('Test component', it => {
    it("Renders a count", expect => {
      const output = render(<Test/>)

      expect(output).toHaveText("Count: 0")
    })
    
    it("Increments count", async expect => {
      const output = render(<Test/>)
      const btn = find('button', {text:'+'})
      
      await btn.click()
      
      expect(output).toHaveText("Count: 1")
    })
  })
</script>


<script role="story">
  export const Standard = () => (
    <Test />
  )
</script>