Canvas Link

https://learning.flatironschool.com/courses/6199/assignments/229261?module_item_id=536166

Concern

When running npm start, the web application cannot compile because External Link doesn't exist within the path noted in the error.
Compiled with problems:X

ERROR in ./node_modules/@ihollander/workshop-app/dist/components/sandbox.js 14:20-75

Module not found: Error: Can't resolve '@styled-icons/heroicons-outline/ExternalLink' in '/Users/laurenhalpert/Development/code/phase-2/phase-2-hooks-workshop-custom-hooks/node_modules/@ihollander/workshop-app/dist/components'

Additional Context

Got help from a TC and together we determined the lab is broken.

Suggested Changes

modify lab so External Link exists or eliminate External Link

Canvas Link

https://my.learn.co/courses/590/assignments/27694?module_item_id=68851

Concern

In the 01test.js file, whenever I run the code after creating the useDocumentTittle Hook the test fails. Even after using the code from the solution folder it still fails. The problem here is with the test file 01.test.js and how this test is written, after doing some research I found that the issue is with this code snippet

  test("sets the document title", () => {
    renderHook(() => useDocumentTitle());
    act(() => {
      expect(document.title).toBe("Welcome to the home page!");
    });
  });
});

The issue seems to be that the document.title is not being updated synchronously in the test environment. The test is asserting the value immediately after rendering the hook, but the document.title may not have been updated yet.

Additional Context

This test keeps failing and all the code I tried including the solution folder code does not seem to work. I keep getting this error:
here is the code I wrote:

import { useEffect } from "react";
export function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}

export default function Home() {
  useDocumentTitle("testing");
  return (
    <div>
      <h1>Home Page</h1>
      <p>
        To see the title change in the browser tab, click the 'Open in new tab'
        link above
      </p>
    </div>
  );
}

and here is the test results:

` FAIL src/tests/01.test.js
Exercise 01
✓ is exported as a named export (2 ms)
✕ sets the document title (15 ms)

● Exercise 01 › sets the document title

expect(received).toBe(expected) // Object.is equality

Expected: "Welcome to the home page!"
Received: "undefined"

  15 |     renderHook(() => useDocumentTitle());
  16 |     act(() => {
> 17 |       expect(document.title).toBe("Welcome to the home page!");
     |                              ^
  18 |     });
  19 |   });
  20 | });

  at src/__tests__/01.test.js:17:30
  at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
  at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
  at Object.<anonymous> (src/__tests__/01.test.js:16:5)

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 passed, 2 total
Snapshots: 0 total
Time: 0.484 s, estimated 1 s
Ran all test suites matching /src/tests/01.test.js/i.`

Suggested Changes

To address this, we can use a trick with setTimeout and a callback to wait for the title to be updated before asserting its value. Here's how we can re-write it:

  test("sets the document title", () => {
    renderHook(() => useDocumentTitle());
    act(() => {
      setTimeout(() => {
        expect(document.title).toBe("Welcome to the home page!");
      }, 0);
    });
  });

I tested this new code and now all the tests are passing. Hope this helps!

Canvas Link

https://learning.flatironschool.com/courses/6558/assignments/242839?module_item_id=571446

Concern

Forked and cloned the repo, changed into it, and ran npm install which succeeded. But just as the lab stated, on npm start, ran into an error. npm test said there were no tests which I found strange since it is to be submitted to CodeGrade.

Failed to compile.

Module not found: Error: Can't resolve '@styled-icons/heroicons-outline/ExternalLink' in '/home/chrisubuntu/Development/phase2/phase-2-hooks-workshop-custom-hooks/node_modules/@ihollander/workshop-app/dist/components'
ERROR in ./node_modules/@ihollander/workshop-app/dist/components/sandbox.js 14:20-75
Module not found: Error: Can't resolve '@styled-icons/heroicons-outline/ExternalLink' in '/home/chrisubuntu/Development/phase2/phase-2-hooks-workshop-custom-hooks/node_modules/@ihollander/workshop-app/dist/components'

webpack compiled with 1 error

Tried changing the files, but either I don't understand how to modify said file to not require the module at all or for some reason it refused to acknowledge any changes to said file.

Additional Context

On Discord it was suggested that when I installed react-router version 5 after running: "npm install -g npm"
npm install react-router-dom@5

It was suggested that that was the cause of said problem.

Suggested Changes

Do not make this lab required and instead redesign it so it does not use those out of date unsupported libraries and require the new one instead. But no solution to said problem was adequately provided and since it uses the _ExternalLink in not just one, but 3 places, your repo should also remove those.