RichardBray

import * as Store from "./AppContext";
// ...

describe('App', () => {

  // ...

  describe('Question', () => {
    // - context spy
    const contextValues = { chosenAnswers: [], setChosenAnswers: () => {} };

RichardBray

// ...

describe("App", () => {
  const wrapper = mount(<App />);

  // ...

  test("Contains a Start and a Finish page", () => {
    // - when
    const startComp = wrapper.find("Start");

RichardBray

// AppContext.js
import { createContext, useContext } from "react";

export const Store = createContext();
export const useAppContext = () => useContext(Store);

RichardBray

// App.jsx
import React, { Fragment } from "react";

// Context
import { Store, useAppContext } from "./AppContext";

// - Data
import data from "./data.json";

export default function App() {

RichardBray

// App.jsx
import React, { Fragment } from "react";

// - Data
import data from "./data.json";

export default function App() {

  function renderQuestions() {
    return data.results.map((result, index) => (

RichardBray

// App.jsx
import React, { Fragment } from "react";

// - Data
import data from "./data.json";

export default function App() {

  function renderQuestions() {
    return data.results.map((result, index) => (

RichardBray

// App.test.js
import React from "react";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

import data from "./data.json";
import App from "./App";

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

RichardBray

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

• constructor
• render

RichardBray

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "./build/",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,

RichardBray

What each file is actually doing

• /node_modules where your downloaded node module files go

• /public things in here are not compiled or minified by webpack (https://medium.com/@jenniferdobak/the-public-folder-and-favicons-in-create-react-app-8dc2cc1d492b)

  • favicon the icon that will appear in the tab of the browser

  • index.html this is our html template and react will inject the html code into the div with the id of root