Skip to content

Instantly share code, notes, and snippets.

@damusnet

damusnet/App.jsx

Last active July 7, 2020 03:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save damusnet/f15a3c23162012be66d7f0b36c930734 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save damusnet/f15a3c23162012be66d7f0b36c930734 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. damusnet revised this gist Jul 7, 2020. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion App.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ const App = () => {

    return (
    <div>
    You clicked me {counter}!
    You clicked me {counter} times!
    <ClickMe counter={counter} setCounter={setCounter} />
    </div>
    )
    2 changes: 1 addition & 1 deletion ClickMe.test.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@ describe('<ClickMe />', () => {
    expect(component.toJSON()).toMatchSnapshot()

    act(() => {
    component.root.findByProps({ children: 'Click Me!' }).props.onClick();
    component.root.findByProps({ children: 'Click Me!' }).props.onClick()
    })

    expect(mockFn).toHaveBeenCalledWith(1)
  2. damusnet renamed this gist Jul 7, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions ClickMe.test.js → ClickMe.test.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ describe('<ClickMe />', () => {
    const mockFn = jest.fn()

    const component = TestRenderer.create(
    <ClickMe counter={0} setCounter={mockFn}>/>,
    <ClickMe counter={0} setCounter={mockFn} />,
    )

    expect(component.toJSON()).toMatchSnapshot()
    @@ -14,6 +14,6 @@ describe('<ClickMe />', () => {
    component.root.findByProps({ children: 'Click Me!' }).props.onClick();
    })

    expect(mockFn).toHaveBeenCalledWith(2)
    expect(mockFn).toHaveBeenCalledWith(1)
    })
    })
  3. damusnet created this gist Jul 7, 2020.
    10 changes: 10 additions & 0 deletions App.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    const App = () => {
    const [counter, setCounter] = React.useState(0)

    return (
    <div>
    You clicked me {counter}!
    <ClickMe counter={counter} setCounter={setCounter} />
    </div>
    )
    }
    7 changes: 7 additions & 0 deletions ClickMe.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    const ClickMe = ({ counter, setCounter }) => {
    return (
    <button type="button" onClick={() => setCounter(counter + 1)}>
    Click me!
    </button>
    )
    }
    19 changes: 19 additions & 0 deletions ClickMe.test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    import TestRenderer, { act } from 'react-test-renderer';

    describe('<ClickMe />', () => {
    it('should render properly', () => {
    const mockFn = jest.fn()

    const component = TestRenderer.create(
    <ClickMe counter={0} setCounter={mockFn}>/>,
    )

    expect(component.toJSON()).toMatchSnapshot()

    act(() => {
    component.root.findByProps({ children: 'Click Me!' }).props.onClick();
    })

    expect(mockFn).toHaveBeenCalledWith(2)
    })
    })