Gain insights into Test-driven Development with React. Learn unit and integration testing using Jest and Enzyme, and explore tools like ESlint, Prettier, Babel, Webpack, and Travis CI.

react.tar.gz

intro

intro-copy

ch3-something

generic

ch3-1

ch3-2

ch4-1

ch2-1

ch2-2

ch2-3

ch5-copy

intro-copy-wmhr0i

ch3-1-copy

ch4-1-copy

ch4-1-copy-2

generic-copy

ch4-copy

This course is a deep dive into testing in React. You will learn unit testing and integration testing using tools such as Jest and Enzyme. You will also learn about other tools such as ESlint, Prettier, Babel, Webpack, and Travis CI that add convenience for coding and testing.

Test-driven Development with React

# User settings

A code editor is only as good as a developer’s ability to tailor it to their needs. The VS Code team, knowing this, designed for customizability. All user-level customizations live in a single, editable JSON file. The exception is keyboard shortcuts, which have their own dedicated customization file.

Recent versions of VS Code added a friendly, graphical settings interface. However, it’s useful to see what lurks underneath. From the Command Palette, run “Preferences: Open Settings (JSON).” This opens up a JSON file with all of your personal setting overrides. This view doesn’t show you the default setting, though, it’s not very useful by itself. You can remedy that by adding this setting:

 ```JSON
  "workbench.settings.useSplitJSON": true
 ````

  Save the file and reopen the settings file. Now you’ll be taken to a split view, with VS Code’s default settings on the left and your user-level overrides on the right, as shown in the first screenshot below.


If you chose “Always” at the Git commit prompt in the last section, then there will be one other override here: `git.enableSmartCommit` is set to `true`. Hovering over the rule’s name gives you a description of its meaning:

````text
Commit all changes when there are no staged changes.
`````

If you’d like to change the look and feel of the editor, now’s your chance. Let’s say you want to change the font. Type “font” in the search bar, and you’ll see several matching settings. Hover over any of the matches and click the pencil icon to copy that setting over to your User Settings, where you can do with it what you like. For example, if 12px is a bit squint-inducing for you, you might copy `editor.fontSize` to your User Settings and change the value to 14. As soon as you save, the change will take effect, as shown in the second screenshot below.



Learn how to use the settings.json file in VS code.


User Settings on VS Code

Before We Begin

Test-Driven Development with Jest

Integrated Tooling with VS Code

Testing React with Enzyme

Styling in JavaScript with Styled-Components

Refactoring with Higher-Order Components

Continuous Integration and Collaboration

Conclusion

User Settings on VS Code

User settings