Skip to content

Instantly share code, notes, and snippets.

@NaomiKC92

NaomiKC92/React-App-with-jest-testing.md

Created January 14, 2020 17:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save NaomiKC92/3094e2ac0ed5aa1fcdd620d1c50f8d82 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save NaomiKC92/3094e2ac0ed5aa1fcdd620d1c50f8d82 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Jan 7, 2020. No changes.
  2. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Jan 7, 2020. 1 changed file with 58 additions and 0 deletions.
    58 changes: 58 additions & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -231,6 +231,10 @@ expect(wrapper.instance().method).toHaveBeenCalled()
    - pass in a jest.fn()
    - ex: if the props is 'upDateRqatings' : const mockUpdateRatings = jest.fn() then... <Movie updateRatings = {mockUpdateRatings} />

    - **Method on a class component**: wrapper.instance().methodName = jest.fn() (when you want to track if it's invoked)

    -


    ## Network Requests

    @@ -290,6 +294,60 @@ Test the asynchronous functions of the component
    Learn to mock a file
    Learn what to mock and what to test

    ```
    describe('fetchMovies', () => {
    let mockResponse = {
    "movies": [
    {
    id: 1,
    title: "Movie Title",
    poster_path: "someURL",
    backdrop_path: "someURL",
    release_date: "2019-12-04",
    overview: "Some overview",
    average_rating: 6
    }
    ]
    }
    beforeEach(() => {
    window.fetch = jest.fn().mockImplementation(() => {
    return Promise.resolve({
    ok: true,
    json: () => Promise.resolve(mockResponse)
    })
    })
    })
    it('should call fetch with the correct URL', () => {
    fetchMovies()
    expect(window.fetch).toHaveBeenCalledWith('https://rancid-tomatillos.herokuapp.com/api/v1/movies')
    })
    it('should return an array of movies', () => {
    expect(fetchMovies()).resolves.toEqual(mockResponse)
    })
    it('should throw an error if fetch fails', () => {
    window.fetch = jest.fn().mockImplementation(()=> {
    return Promise.resolve({
    ok: false
    })
    })
    expect(fetchMovies()).rejects.toEqual(Error('Error fetching movies'))
    })
    it('should return an error if promise rejects', () => {
    window.fetch = jest.fn().mockImplementation(() => {
    return Promise.reject(Error('fetch failed'))
    })
    expect(fetchMovies()).rejects.toEqual(Error('fetch failed'))
    })
    })
    ```


    #### Input:
  3. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Jan 7, 2020. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -222,6 +222,15 @@ expect(wrapper.state('thing')).toEqual('Thing value') or expect(wrapper.state())
    ```
    expect(wrapper.instance().method).toHaveBeenCalled()
    ```
    - **If imported as a seperate funtion**:
    - test the function in the file where it lives on it's own (unit test)
    - where it is imported, use a jest.fn() to create where the method is called and what it is called with

    - **Method passed as props**:
    - pass function into components shallow copy as a prop
    - pass in a jest.fn()
    - ex: if the props is 'upDateRqatings' : const mockUpdateRatings = jest.fn() then... <Movie updateRatings = {mockUpdateRatings} />


    ## Network Requests

  4. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Jan 3, 2020. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,14 +21,16 @@ Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71
    - a component from react-redux that wraps our App component and allows each child component to be connected to the store
    const store = createStore(rootReducer, composeWithDevTools());

    ```ReactDOM.render(
    ```
    ReactDOM.render(
    <Provider store={store} >
    <BrowserRouter>
    <App />
    </BrowserRouter>
    </Provider>,
    document.getElementById('root')
    );```
    );
    ```


    `import { createStore } from 'redux';`
  5. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Jan 3, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,14 +21,14 @@ Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71
    - a component from react-redux that wraps our App component and allows each child component to be connected to the store
    const store = createStore(rootReducer, composeWithDevTools());

    ReactDOM.render(
    ```ReactDOM.render(
    <Provider store={store} >
    <BrowserRouter>
    <App />
    </BrowserRouter>
    </Provider>,
    document.getElementById('root')
    );
    );```
    `import { createStore } from 'redux';`
  6. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Jan 3, 2020. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,6 +19,17 @@ Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71

    `import { Provider } from 'react-redux';`
    - a component from react-redux that wraps our App component and allows each child component to be connected to the store
    const store = createStore(rootReducer, composeWithDevTools());

    ReactDOM.render(
    <Provider store={store} >
    <BrowserRouter>
    <App />
    </BrowserRouter>
    </Provider>,
    document.getElementById('root')
    );


    `import { createStore } from 'redux';`
    - a function from Redux that uses the rootReducer to create the store
  7. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Dec 11, 2019. 1 changed file with 1 addition and 34 deletions.
    35 changes: 1 addition & 34 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -268,40 +268,7 @@ Test the asynchronous functions of the component
    Learn to mock a file
    Learn what to mock and what to test

    #### Container:

    ```
    const Feed = ({ recipes, deleteRecipe }) => {
    const recipesCards = recipes.map(recipe => {
    return(
    <Card
    title={recipe.title}
    link={recipe.href}
    ingredients={recipe.ingredients}
    img={recipe.thumbnail}
    // deleteRecipe={deleteRecipe}
    />
    )
    })
    ```

    #### Card:
    ```
    const Card = ({ title, link, ingredients, img }) => {
    return(
    <article className='article-card'>
    <h3 className='card-title'>{title}</h3>
    <img src={img} className='card-img' alt='recipe image'/>
    <a href={link}><button className='directions-btn'>Directions</button></a>
    <ul className='card-ul'>
    <li className='card-li'>{ingredients}</li>
    </ul>
    <button className='delete-recipe-btn'>GROSS!</button>
    </article>
    )
    }
    ```


    #### Input:
    - name = 'name', value={this.state.value}
  8. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Dec 11, 2019. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -302,3 +302,6 @@ const Feed = ({ recipes, deleteRecipe }) => {
    )
    }
    ```

    #### Input:
    - name = 'name', value={this.state.value}
  9. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Dec 11, 2019. 1 changed file with 19 additions and 1 deletion.
    20 changes: 19 additions & 1 deletion React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -268,7 +268,7 @@ Test the asynchronous functions of the component
    Learn to mock a file
    Learn what to mock and what to test

    #### Container
    #### Container:

    ```
    const Feed = ({ recipes, deleteRecipe }) => {
    @@ -284,3 +284,21 @@ const Feed = ({ recipes, deleteRecipe }) => {
    )
    })
    ```

    #### Card:
    ```
    const Card = ({ title, link, ingredients, img }) => {
    return(
    <article className='article-card'>
    <h3 className='card-title'>{title}</h3>
    <img src={img} className='card-img' alt='recipe image'/>
    <a href={link}><button className='directions-btn'>Directions</button></a>
    <ul className='card-ul'>
    <li className='card-li'>{ingredients}</li>
    </ul>
    <button className='delete-recipe-btn'>GROSS!</button>
    </article>
    )
    }
    ```
  10. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Dec 11, 2019. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -270,7 +270,8 @@ Learn what to mock and what to test

    #### Container

    ```const Feed = ({ recipes, deleteRecipe }) => {
    ```
    const Feed = ({ recipes, deleteRecipe }) => {
    const recipesCards = recipes.map(recipe => {
    return(
    <Card
    @@ -281,4 +282,5 @@ Learn what to mock and what to test
    // deleteRecipe={deleteRecipe}
    />
    )
    })```
    })
    ```
  11. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Dec 11, 2019. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -267,3 +267,18 @@ Learn how to figure out what needs to be tested
    Test the asynchronous functions of the component
    Learn to mock a file
    Learn what to mock and what to test

    #### Container

    ```const Feed = ({ recipes, deleteRecipe }) => {
    const recipesCards = recipes.map(recipe => {
    return(
    <Card
    title={recipe.title}
    link={recipe.href}
    ingredients={recipe.ingredients}
    img={recipe.thumbnail}
    // deleteRecipe={deleteRecipe}
    />
    )
    })```
  12. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Dec 11, 2019. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -251,6 +251,12 @@ const options = {
    });
    ```

    #### Top of page:

    - `import React, { Component } from 'react';`
    - `import RecipieContainer from './RecipieContainer.js'`
    - `import './App.css';`

    #### Testing async:
    - Move fetches into their own file
    Discuss why
  13. @Garrett-Iannuzzi Garrett-Iannuzzi revised this gist Dec 10, 2019. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -250,3 +250,14 @@ const options = {
    throw Error(error.message)
    });
    ```

    #### Testing async:
    - Move fetches into their own file
    Discuss why
    Import fetches into the React component they originally belonged in
    Make sure component tests still pass
    Test each fetch in isolation
    Learn how to figure out what needs to be tested
    Test the asynchronous functions of the component
    Learn to mock a file
    Learn what to mock and what to test
  14. @KVeitch KVeitch revised this gist Nov 5, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -105,6 +105,7 @@ import ClassName from './ClassName';
    1. ESLint is already built in with create-react-app. Installing another eslint will likely break things.
    2. Add a script called `"lint": "eslint src/" in your package.json` (in the scripts object)
    3. In your terminal, run: `npm run lint`
    4. Turing [Mod3 Linter](https://github.com/turingschool-examples/javascript/blob/master/linters/module-3/linter-setup.md)

    ### Install SCSS/Sass

  15. @KVeitch KVeitch revised this gist Oct 31, 2019. 1 changed file with 199 additions and 66 deletions.
    265 changes: 199 additions & 66 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,74 @@
    Edited and formatted by ericwm76
    Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71

    **Creating a React App**
    # Creating a React App

    1. In the terminal run `npx create-react-app NAMEOFYOURAPP`
    2. Cd into the new directory: `cd NAMEOFYOURAPP`
    3. Run `npm install`.
    1. In the terminal run: `npx create-react-app NAME-OF-APP`
    2. Cd into the new directory: `cd NAME-OF-APP`
    3. Run: `npm install`.
    4. You can run `npm start` to see if the app was set up correctly.

    **Setting Up Testing**
    1. Install enzyme: `npm i enzyme -D`
    2. Install enzyme-adapter-react-16: `npm install enzyme-adapter-react-16 -D`
    ## Setup Redux

    1. `npm i redux react-redux redux-devtools-extension -S`
    - redux - Allows us to have access to using Redux in our app.
    - react-redux - Allows us to connect our react components to our Redux store.
    - redux-devtools-extension - Useful for debugging in our devtools

    2. In src/index.js

    `import { Provider } from 'react-redux';`
    - a component from react-redux that wraps our App component and allows each child component to be connected to the store

    `import { createStore } from 'redux';`
    - a function from Redux that uses the rootReducer to create the store

    `import { composeWithDevTools } from 'redux-devtools-extension';`
    - a method we brought in and can pass as an argument with createStore so that we have access to our devtools and can view our store.

    `import { rootReducer } from './reducers';`
    - our combined reducers to create our store

    (order matters here)
    ```const store = createStore(rootReducer, composeWithDevTools())
    ReactDOM.render(
    <Provider store={store}>
    <App />
    </Provider>,
    document.getElementById('root')
    );
    ```
    3. In actions/index.js
    -


    4. In src/reducers/index.js
    ```
    import { combineReducers } from 'redux';
    import { todos } from './todos';
    export const rootReducer = combineReducers({
    todos: todos
    });
    ```
    **Where we define the properties that will exsits in our global store

    5. `npm i redux-thunk -S`

    ## Setup Backend
    1. Clone repo, not nested in project directory
    2. Globally install nodemon. Runs the server.
    3. `npm install nodemon -g`
    4. cd into repo
    5. Run `npm install`
    6. Run `npm start`
    7. Use Postman to checkout the data

    ## Setting Up Testing

    1. Install Enzyme: `npm i enzyme -D`
    2. Install Enzyme Adapter: `npm install enzyme-adapter-react-16 -D`
    3. Inside of /src create setupTests.js: `touch src/setupTests.js`
    4. Put the following 3 lines of code in setupTests.js
    ```
    @@ -19,16 +77,16 @@ import Adapter from 'enzyme-adapter-react-16';
    configure({ adapter: new Adapter() });
    ```
    5. For snapshot testing, install enzyme-to-json `npm install enzyme-to-json -D`
    6. In package.json, add the following lines of code:
    5. For snapshot testing, install Enzyme Wrappers: `npm install enzyme-to-json -D`
    6. Add serializer to package.json:
    ```
    "jest": {
    "snapshotSerializers": [
    "enzyme-to-json/serializer"
    ]
    }
    ```
    Don't forget the comma!
    ***Don't forget the comma!***

    7. Add an extra line in App.js (just so there's a change in the file) and save. Then run `npm test` to check that the files are connected correctly.
    8. Include the following lines as headers for all test files:
    @@ -38,81 +96,156 @@ import { shallow } from 'enzyme';
    import ClassName from './ClassName';
    ```

    ### Check Testing Coverage

    # React Router quick start

    #### Install into React project by running
    `npm install --save react-router-dom`
    ```npm test -- --coverage --watchAll=false```

    #### in App, import:
    import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'
    ### Setting Up ESLint

    you can rename longer import by the example of 'BrowserRouter' above.
    1. ESLint is already built in with create-react-app. Installing another eslint will likely break things.
    2. Add a script called `"lint": "eslint src/" in your package.json` (in the scripts object)
    3. In your terminal, run: `npm run lint`

    Rather than placing components directly into App, they are established as routes.
    ### Install SCSS/Sass

    1. Run: `npm install node-sass --save`
    2. Add variable file: `touch src/variables.scss`
    3. Change all `.css` file extentions to `.scss`
    - `index.css App.css` => `index.scss App.scss`
    4. Remeber to update the file paths anywhere the style files are being imported
    5. Add: `@import './src/variables.scss';` To any .scss files you want to uses variables
    6. Format for creating variables: `$var-name: var-value;`

    ### Example:
    The entire return JSX for App will be wrapped in `<Router></Router> tags`
    ```js
    function App() {
    return (
    <Router>
    <div className="App">
    <Nav />
    <Switch>
    <Route path="/" component={Home}/>
    <Route path="/about" component={About} />
    <Route path="/shop" component={Shop} />
    </Switch>
    </div>
    </Router>
    );
    ## propTypes
    ```npm install prop-types -S```
    ```import PropTypes from 'prop-types'```
    ```
    Component.propTypes = {
    prop1: PropTypes.array.isRequired,
    prop2: PropTypes.any,
    prop3: PropTypes.func.isRequired,
    prop4: PropTypes.bool
    prop5: PropTypes.string.isRequired,
    prop6: PropTypes.number
    }
    ```

    Decide which component is on each route by adding `component={yourComponentName}`
    ## Router

    Also, establish which path it is set at from the root URL by `path="/yourComponent"`
    1. `npm i react-router-dom -S`
    2. In index.js
    ```
    import { BrowserRouter } from 'react-router-dom'
    The above code has an issue to check to see if path has a / for the first item. This causes issues with Routes becoming combined due to the `path="/"`
    const router = (
    <BrowserRouter>
    <App />
    </BrowserRouter>
    )
    ### How to remedy this issue:
    ReactDOM.render(router, document.getElementById('root'));
    ```
    3. Import what is needed in components
    `import { Route, NavLink, Link, Redirect, Switch} from 'react-router-dom'`

    Enclose the Routes in `<Switch></Switch>`
    Now the routes wont be combined but it will stop at the first component that fulfills any part of its search criteria.

    By adding `exact` into the component properties, it will only go to Routes that exactly match the URL directory name.
    ` <Route path="/" exact component={Home}/>
    `
    ## TESTING
    ```
    import { shallow } from 'enzyme';
    ```
    ```
    wrapper = shallow (<Component prop='string' prop2={2} method={jest.fn()} />
    ```
    ```
    expect(wrapper).toMatchSnapshot()
    ```

    ### How to switch between routes
    To be able to click between routes rather than having to enter the path into the browser, go to your navigation component and `import { Link } from 'react-router-dom'`
    **Execution**
    ```
    wrapper.instance().methodName('optionalArgument')
    ```
    ```
    wrapper.instance().forceUpdate()
    ```
    ```
    wrapper.find('button').simulate('click', optionalEvent)
    ```
    ```
    wrapper.instance().setState({ prop: 'value', prop2: 'value2' })
    ```
    ```
    wrapper.find('[name='thing']').simulate('change', mockThingEvent)
    ```
    ```
    wrapper.find('button').at(3).simulate('click')
    expect(mockWhatEverEvent).toHaveBeenCalledWith('argument/value')
    ```

    Then, in the Nav component, we wrap the li's where the links would go in <Link> tags.
    **Mock Date.now()**
    ```
    global.Date.now = jest.spyOn(global.Date, 'now').mockImplementation(() => 123)
    ```
    Can assert that the value of Date.now() will be 123 or whatever is set as the return value.

    To direct these Links to the proper page, we would give them the property `to="/myComponent"`
    **Mock e.preventDefault()**
    Can be passed as arugments of event in other methods
    ```
    const mockEvent = { preventDefault: jest.fn() }
    ```

    Ex:
    **Mock Event**
    ```
    const mockThingEvent = { target: { name: 'thing', value: 'Thing value' } }
    ```

    ```js
    function Nav() {
    return (
    <nav>
    <h3>Logo</h3>
    <ul className="nav-links">
    <Link to='/about'>
    <li>About</li>
    </Link>
    <Link to='/shop'>
    <li>Shop</li>
    </Link>
    </ul>
    </nav>
    );
    }
    **Expectation**
    ```
    expect(wrapper.instance().handleChange).toHaveBeenCalledWith(mockThingEvent)
    ```
    ```
    expect(wrapper.state('thing')).toEqual('Thing value') or expect(wrapper.state()).toEqual(expected)
    ```
    ```
    expect(wrapper.instance().method).toHaveBeenCalled()
    ```
    ### Install prop-types for testing

    ```npm install prop-types -S```
    ## Network Requests

    **POST**
    ``` const options = {
    method: 'POST',
    body: JSON.stringify({
    id: value,
    prop: value,
    }),
    headers: {
    'Content-Type': 'application/json'
    }
    }
    return fetch('url', options)
    .then(res => {
    if(!res.ok) {
    throw Error('Something is not right, try again later')
    }
    return res.json()})
    ```
    **DELETE**
    ```
    const options = {
    method: 'DELETE',
    headers: {
    'Content-Type': 'application/json'
    }
    }
    return fetch(`url/${id}`, options)
    .then(res => {
    if(!res.ok) {
    throw Error('Something is not right, try again later')
    }
    return getFetch();
    }).catch(error => {
    throw Error(error.message)
    });
    ```
  16. @KVeitch KVeitch revised this gist Oct 9, 2019. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -112,5 +112,7 @@ function Nav() {
    );
    }
    ```
    ### Install prop-types for testing

    ```npm install prop-types -S```

  17. @KVeitch KVeitch revised this gist Oct 9, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -42,7 +42,7 @@ import ClassName from './ClassName';
    # React Router quick start

    #### Install into React project by running
    `npm install react-router-DOM`
    `npm install --save react-router-dom`

    #### in App, import:
    import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'
  18. @KVeitch KVeitch revised this gist Oct 9, 2019. 1 changed file with 78 additions and 1 deletion.
    79 changes: 78 additions & 1 deletion React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -36,4 +36,81 @@ Don't forget the comma!
    import React from 'react';
    import { shallow } from 'enzyme';
    import ClassName from './ClassName';
    ```
    ```


    # React Router quick start

    #### Install into React project by running
    `npm install react-router-DOM`

    #### in App, import:
    import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'

    you can rename longer import by the example of 'BrowserRouter' above.

    Rather than placing components directly into App, they are established as routes.


    ### Example:
    The entire return JSX for App will be wrapped in `<Router></Router> tags`
    ```js
    function App() {
    return (
    <Router>
    <div className="App">
    <Nav />
    <Switch>
    <Route path="/" component={Home}/>
    <Route path="/about" component={About} />
    <Route path="/shop" component={Shop} />
    </Switch>
    </div>
    </Router>
    );
    }
    ```

    Decide which component is on each route by adding `component={yourComponentName}`

    Also, establish which path it is set at from the root URL by `path="/yourComponent"`

    The above code has an issue to check to see if path has a / for the first item. This causes issues with Routes becoming combined due to the `path="/"`

    ### How to remedy this issue:

    Enclose the Routes in `<Switch></Switch>`
    Now the routes wont be combined but it will stop at the first component that fulfills any part of its search criteria.

    By adding `exact` into the component properties, it will only go to Routes that exactly match the URL directory name.
    ` <Route path="/" exact component={Home}/>
    `

    ### How to switch between routes
    To be able to click between routes rather than having to enter the path into the browser, go to your navigation component and `import { Link } from 'react-router-dom'`

    Then, in the Nav component, we wrap the li's where the links would go in <Link> tags.

    To direct these Links to the proper page, we would give them the property `to="/myComponent"`

    Ex:

    ```js
    function Nav() {
    return (
    <nav>
    <h3>Logo</h3>
    <ul className="nav-links">
    <Link to='/about'>
    <li>About</li>
    </Link>
    <Link to='/shop'>
    <li>Shop</li>
    </Link>
    </ul>
    </nav>
    );
    }
    ```


  19. @KVeitch KVeitch revised this gist Oct 3, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    Editied and formatted by ericwm76
    Edited and formatted by ericwm76
    Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71

    **Creating a React App**
  20. @KVeitch KVeitch revised this gist Oct 3, 2019. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    Editied and formatted by ericwm76
    Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71

    **Creating a React App**

    1. In the terminal run `npx create-react-app NAMEOFYOURAPP`
  21. @KVeitch KVeitch revised this gist Oct 3, 2019. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    Editied and formatted by ericwm76
    Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71.js

    Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71
    **Creating a React App**

    1. In the terminal run `npx create-react-app NAMEOFYOURAPP`
  22. @KVeitch KVeitch revised this gist Oct 3, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    Editied and formatted by ericwm76
    Editied and formatted by ericwm76
    Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71.js

    **Creating a React App**
  23. @KVeitch KVeitch revised this gist Oct 3, 2019. 1 changed file with 17 additions and 49 deletions.
    66 changes: 17 additions & 49 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,69 +1,37 @@
    Creating a React App
    Editied and formatted by ericwm76
    Eric's gist https://gist.github.com/ericwm76/e1204fc03f14af4429add8225ff55f71.js

    In the terminal run:
    ```
    npx create-react-app NAMEOFYOURAPP
    ```

    ```
    cd NAMEOFYOURAPP
    ```

    You can run
    ```
    npm start
    ```
    to see if the app was set up correctly

    Install enzyme

    ```
    npm i enzyme -D
    ```

    Install enzyme-adapter-react-16
    ```
    npm install enzyme-adapter-react-16 -D
    ```
    **Creating a React App**

    Inside of /src create setupTests.js
    ```
    src/setupTests.js
    ```
    1. In the terminal run `npx create-react-app NAMEOFYOURAPP`
    2. Cd into the new directory: `cd NAMEOFYOURAPP`
    3. Run `npm install`.
    4. You can run `npm start` to see if the app was set up correctly.

    Put the following 3 lines of code in setupTests.js
    **Setting Up Testing**
    1. Install enzyme: `npm i enzyme -D`
    2. Install enzyme-adapter-react-16: `npm install enzyme-adapter-react-16 -D`
    3. Inside of /src create setupTests.js: `touch src/setupTests.js`
    4. Put the following 3 lines of code in setupTests.js
    ```
    import { configure } from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';
    configure({ adapter: new Adapter() });
    ```

    For snapshot testing install enzyme-to-json
    ```
    npm install enzyme-to-json -D
    ```

    In package.json add the following lines of code
    5. For snapshot testing, install enzyme-to-json `npm install enzyme-to-json -D`
    6. In package.json, add the following lines of code:
    ```
    "jest": {
    "snapshotSerializers": [
    "enzyme-to-json/serializer"
    ]
    }
    ```
    Don't forget the comma!

    don't forget the comma!

    Add an extra line in App.js and save.
    run
    ```
    npm test
    ```

    to check that the files are connected correctly

    headers for test files:
    7. Add an extra line in App.js (just so there's a change in the file) and save. Then run `npm test` to check that the files are connected correctly.
    8. Include the following lines as headers for all test files:
    ```
    import React from 'react';
    import { shallow } from 'enzyme';
  24. @KVeitch KVeitch revised this gist Oct 3, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@ Install enzyme-adapter-react-16
    npm install enzyme-adapter-react-16 -D
    ```

    Inside of /src create the setupTests.js
    Inside of /src create setupTests.js
    ```
    src/setupTests.js
    ```
  25. @KVeitch KVeitch revised this gist Oct 3, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    Creating an App
    Creating a React App

    In the terminal run:
    ```
  26. @KVeitch KVeitch revised this gist Oct 3, 2019. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,9 @@ npm install enzyme-adapter-react-16 -D
    ```

    Inside of /src create the setupTests.js
    src/setupTests.js
    ```
    src/setupTests.js
    ```

    Put the following 3 lines of code in setupTests.js
    ```
  27. @KVeitch KVeitch revised this gist Oct 3, 2019. 1 changed file with 24 additions and 13 deletions.
    37 changes: 24 additions & 13 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,58 +1,69 @@
    Creating an App

    In the terminal run:
    ```
    npx create-react-app NAMEOFYOURAPP
    ```

    npx create-react-app NAMEOFYOURAPP

    ```
    cd NAMEOFYOURAPP
    ```

    You can run

    npm start

    ```
    npm start
    ```
    to see if the app was set up correctly

    Install enzyme

    npm i enzyme -D
    ```
    npm i enzyme -D
    ```

    Install enzyme-adapter-react-16
    npm install enzyme-adapter-react-16 -D
    ```
    npm install enzyme-adapter-react-16 -D
    ```

    Inside of /src create the setupTests.js
    src/setupTests.js

    Put the following 3 lines of code in setupTests.js

    ```
    import { configure } from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';
    configure({ adapter: new Adapter() });

    ```

    For snapshot testing install enzyme-to-json
    ```
    npm install enzyme-to-json -D

    ```

    In package.json add the following lines of code

    ```
    "jest": {
    "snapshotSerializers": [
    "enzyme-to-json/serializer"
    ]
    }
    ```

    don't forget the comma!

    Add an extra line in App.js and save.
    run
    ```
    npm test
    ```

    to check that the files are connected correctly

    headers for test files:

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

    ```
  28. @KVeitch KVeitch created this gist Oct 3, 2019.
    58 changes: 58 additions & 0 deletions React-App-with-jest-testing.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    Creating an App

    In the terminal run:

    npx create-react-app NAMEOFYOURAPP

    cd NAMEOFYOURAPP

    You can run

    npm start

    to see if the app was set up correctly

    Install enzyme

    npm i enzyme -D

    Install enzyme-adapter-react-16
    npm install enzyme-adapter-react-16 -D

    Inside of /src create the setupTests.js
    src/setupTests.js

    Put the following 3 lines of code in setupTests.js

    import { configure } from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';

    configure({ adapter: new Adapter() });


    For snapshot testing install enzyme-to-json
    npm install enzyme-to-json -D


    In package.json add the following lines of code

    "jest": {
    "snapshotSerializers": [
    "enzyme-to-json/serializer"
    ]
    }

    don't forget the comma!

    Add an extra line in App.js and save.
    run
    npm test

    to check that the files are connected correctly

    headers for test files:

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