CopyCat test in React Test Library Final Project

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 });

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.

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

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

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:

  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:

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?

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:

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/[email protected]

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!


Awesome! So glad that worked!

1 Like

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