CopyCat test in React Test Library Final Project

Web Development Full-Stack
1

I’m on the final project for Learn React Testing the CopyCat project from the unit test POV.
I’m stuck on step 3 of all things. I entered in the data given and I get a syntax error as soon as I put in either (or both) empty arrow functions. I’ve tried to redo it a couple of times and I get snagged here each time. I know it will be something small and stupid but I just can’t see what’s wrong.

Thank you!

import { CopyCat } from "../CopyCat"; // Make all the imports below import React from "react"; import { render, screen } from "@testing-library/react"; import "@testing-library/jest-dom"; test("Should display name", () => { // Write your solution to tasks 3-4 within this test render( <CopyCat name={"Mack"} value={""} isCopying={true} handleChange={()=>} toggleTape={()=>} /> ); }); test("Should display input text in paragraph when isCopying is set to true", () => { // Write your solution to tasks 5-6 within this test }); test("Should not display input text in paragraph when isCopying is set to false", () => { // Write your solution to task 7 within this test });
2

I think it’s just because they are empty. If you haven’t gotten past this already, just keep going until you fill those parts in and then see if it works afterwards.

3

Thank you for this-I got past it by adding console.log(name) to each-It worked and I’m not going to question why :rofl: Actually, someone at work explained it when I told them I was baffled why my half joking attempt to fix it worked.

1 Like
4

I know you’re past this already and it’s been a while, but I feel it’s helpful to know that the full content of a callback function is

() => {}

which means including the final object. That may be the piece it was looking for.

1 Like
5

Hey! Did you manage to complete this project? I’m on step 4 and when I run npm test, I get this error:

FAIL components/tests/CopyCat.test.js

● Test suite failed to run

Cannot find module 'react-dom/client' from 'pure.js'

Require stack:
  node_modules/@testing-library/react/dist/pure.js
  node_modules/@testing-library/react/dist/index.js
  components/__tests__/CopyCat.test.js

  at Resolver.resolveModule (../../node_modules/jest-resolve/build/index.js:299:11)
  at Object.<anonymous> (node_modules/@testing-library/react/dist/pure.js:31:46)

Did anyone else run into this issue? :sweat_smile:

6

Oh gosh, yeah I finished that course a while ago. My first instinct is that the node modules need to be deleted and reinstalled but I don’t believe it’s an option here. Without seeing the code I can’t really determine anything. Maybe post the code or contact Codecademy?

7

Thanks for coming back to me! Did it work when you first did it? I agree that I think some of the nodes are outdated now :laughing:

My package.json looks like this:

{
  "name": "copy-cat-test",
  "version": "1.0.0",
  "description": "",
  "main": "AddThoughtForm.js",
  "directories": {
    "test": "__tests__/"
  },
  "scripts": {
    "test": "jest --coverage"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^12.0.4"
  }
}

I then found the file pure.js (node_modules / @testing-library / react / dist) and the code inside is:

// makes it so people can import from '@testing-library/react/pure'
module.exports = require('./dist/pure')

If anyone has any idea as to what should be happening then that would be super helpful! :smile:

8

Okay thanks to this helpful Stack Overflow post I copied out my code and then reset the exercise using:

npm install --save-dev @testing-library/react@12

Apparently the current version of RTL (Version 14) is incompatible with this and now my tests are running since copying back in my code :+1: Yey!

2 Likes
9

Awesome! So glad that worked!

1 Like
10

Perfect solution! We at Factor Dedicates Teams work differently. But your choice is good too.