1const myComponent = () => (
2  <div>Hello World!</div>
3)
4
5function lessonTitle(title) {
6  return document.createElement('span').setAttribute('text', title)
7}
8
9const fib = (n) => {
10  if (n === 0 || n === 1) {
11      return n
12  }
13  return fib(n-1) + fib(n-2)
14}

1const fib = (n) => {
2    if (n === 0 || n === 1) {
3        return n
4    }
5    return fib(n-1) + fib(n-2)
6}
7export default { fib }
8
9test('should calculate fibonacci numbers', () => {
10  expect(fib(5)).toBe(8)
11})

1const fibR = (n, memo) => {
2  if (memo[n]) {
3    return memo[n]
4  }
5  memo[n] = fib(n-1, memo) + fib(n-2, memo)
6  return memo[n]
7}
8
9const fib = (n) => {
10    return fibR(n, [0,1])
11}
12export default { fib }
13
14test('should calculate fibonacci numbers', () => {
15  expect(fib(5)).toBe(8)
16})
17
18test('should test with mocks', () => {
19  const fibRSpy = jest.spyOn(fibR)
20  fib(5)
21    
22  expect(fibRSpy).toHaveBeenCalled()
23})

1import { makeAdder, makeSubtracter } from './func-utils'
2
3// const makeAdder = (x) => (n) => n + x
4// const makeSubtracter = (x) => (n) => n - x 
5
6const fib = (n) => {
7  if (n === 0 || n === 1) {
8    return n
9  }
10  return makeAdder(fib(makeSubtracter(1)(n)))(fib(makeSubtracter(2)(n)))
11}
12export default { fib }
13
14test('should calculate fibonacci numbers', () => {
15  expect(fib(5)).toBe(8)
16})
17
18test('should calculate fibonacci numbers', () => {
19  const mockAdder = jest.spyOn(makeAdder)
20  const mockSubtracter = jest.spyOn(makeSubtracter)
21
22  fib(5)
23
24  expect(mockAdder).toBeCalledWith(3)
25})

1<template>
2<div>
3  <p>{{ value }}</p>
4  <button @click="increment">Increment</p>
5</div>
6</template>
7
8<script>
9export default {
10  name: 'Counter',
11  methods: {
12      increment() {
13          this.value++
14      }
15  },
16}
17</script>
18
19test('increments correctly', () => {
20  const incrementSpy = jest.spyOn(Counter.methods, 'increment')
21  const wrapper = mount(Counter)
22  wrapper.find('button').trigger('click')
23
24  expect(incrementSpy).toHaveBeenCalled()
25})

1<template>
2<div>
3  <p>{{ value }}</p>
4  <button @click="increment">Increment</p>
5</div>
6</template>
7
8<script>
9export default {
10  name: 'Counter',
11  methods: {
12      increment() {
13          this.value++
14      }
15  },
16}
17</script>
18
19test('increments correctly', () => {
20  const wrapper = mount(Counter)
21  wrapper.find('button').trigger('click')
22
23  expect(wrapper.text()).toBe('1')
24})

1<template>
2<div>
3  <button class="button__primary" @click="clickHandler">Click Me!</p>
4</div>
5</template>
6
7<script>
8export default {
9  name: 'PrimaryButton',
10  props: {
11    onclick: {
12        type: Object
13    }
14  },
15  methods: {
16      clickHandler() {
17          this.onclick()
18      }
19  },
20}
21</script>
22
23test('increments correctly', () => {
24  const clickSpy = jest.spy()
25  const wrapper = mount(PrimaryButton, { onclick: clickSpy })
26  wrapper.find('button').trigger('click')
27
28  expect(clickSpy).toHaveBeenCalled()
29})

1<template>
2<div>
3  <p>{{ value }}</p>
4  <button class="button__primary" @click="clickHandler">Click Me!</p>
5</div>
6</template>
7
8<script>
9import ApiService from '../../js/services/ApiService';
10export default {
11  name: 'PrimaryButton',
12  methods: {
13      click() {
14          ApiService.recordClick().then(resp => this.value = resp)
15      }
16  },
17  data() {
18      return {
19        value: 0
20      }
21  }
22}
23</script>
24
25test('increments correctly', () => {
26  const returnValue = 42
27  const recordClickSpy = jest.spyOn(ApiService.methods, 'recordClick').mockReturnValue(returnValue)
28  const wrapper = mount(PrimaryButton)
29  wrapper.find('button').trigger('click')
30
31  expect(recordClickSpy).toHaveBeenCalled()
32  expect(wrapped.find('p').text()).toBe(returnValue)
33})

1import { makeAdder, makeSubtracter } from './func-utils'
2
3// const makeAdder = (x) => (n) => n + x
4// const makeSubtracter = (x) => (n) => n - x 
5
6const fib = (n) => {
7  if (n === 0 || n === 1) {
8    return n
9  }
10  return makeAdder(fib(makeSubtracter(1)(n)))(fib(makeSubtracter(2)(n)))
11}
12export default { fib }
13
14test('should calculate fibonacci numbers', () => {
15  expect(fib(5)).toBe(8)
16})
17
18test('should calculate fibonacci numbers', () => {
19  const mockAdder = jest.spyOn(makeAdder)
20  const mockSubtracter = jest.spyOn(makeSubtracter)
21
22  fib(5)
23
24  expect(mockAdder).toBeCalledWith(3)
25})

1<template>
2<div>
3  <child-component msg="I'm a child" />
4  <p>I'm a parent</p>
5</div>
6</template>
7
8<script>
9import ChildComponent from './ChildComponent'
10
11export default {
12  name: 'ParentComponent',
13  components: { ChildComponent },
14}
15</script>
16
17test('renders correctly', () => {
18  //const wrapper = mount(ParentComponent) ???
19  //const wrapper = shallowMount(ParentComponent) ???
20
21  expect(wrapper.text()).toContain("I'm a parent")
22  //expect(wrapper.text()).toContain("I'm a child") this fails
23})

1<template>
2  <div>
3    <sj-datatable attribute="value" />
4  </div>
5</template>
6
7<script>
8  export default {
9    components: {
10      'sj-datatable': () => import('@/components/Datatable/Datatable')
11    }
12  }
13</script>
14
15test('it instantiates a datatable', () => {
16  const component = mount(MyComponent, {
17    stubs: {
18      'sj-datatable': {
19          template: '<span class="datatable-stub" />'
20        }
21      }
22    }
23  });
24  
25  expect(component.find('.datatable-stub').attribute('prop')).toBe('value');
26});

1<template>
2  <h1>{example}</h1>
3</template>
4
5<script>
6  export default {
7    props: { example: { type: String } }
8  }
9</script>
10
11test('it sets the prop', () => {
12  const component = mount(MyComponent, { propData: { example: 'foo' }})
13  expect(component.vm.example).toBe('foo')
14})
15
16test('it sets the prop', () => {
17  const component = mount(MyComponent, { propData: { example: 'foo' }})
18  expect(component.find('div').text()).toContain('foo')
19})

1<template>
2  <button class="button__primary" @click="clickHandler">Click me!</button>
3</template>
4
5<script>
6export default {
7  name: 'PrimaryButton',
8
9  methods: { 
10    clickHandler() {
11      this.$emit('click', 'value-one', 'value-two')
12    }
13  }
14}
15</script>
16
17test('increments correctly', () => {
18  const wrapper = mount(PrimaryButton)
19  wrapper.find('button').trigger('click')
20
21  const { click } = wrapper.emitted()
22  // wrapper.vm.emitEvent() ???
23
24  expect(click[0]).toBe('value-one')
25  expect(click[1]).toBe('value-two')
26})

1import Bar from '@components/Bar'
2
3test('selects ', () => {
4const component = mountMyComponent()
5
6const foo = component.find('#foo') // if you must
7const bar = component.findComponent(Bar) // preferred
8})