Jest Unexpected Token in Create-React-App

Question

I'm implementing jest for testing in a create-react-app. There seems to be an issue whenever I'm trying to test/render a component. I have seen a few solutions on the github page of jest but based on what I know, it seems those solutions require the app to be ejected? I would like to avoid this. Here is a snippet of my problem:

import React from "react"
import Player from "..player.js"
import {render} from "@testing-library/react"

test('renders', () => {
    render(<Player/>)
})

This is the file where I'm encounter this error:

$ npm t

> copyify@0.1.0 test C:\Users\username\Desktop\ReactProjects\copyify
> jest

 FAIL  src/components/__tests__/player.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    SyntaxError: C:\Users\username\Desktop\ReactProjects\copyify\src\components\__tests__\player.js: Unexpected token (6:11)

      4 | 
      5 | test('renders', () => {
    > 6 |     render(<Player/>)
        |            ^
      7 | })
      8 | 

      at Parser._raise (node_modules/@babel/parser/src/parser/error.js:60:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:55:17)
      at Parser.raise (node_modules/@babel/parser/src/parser/error.js:39:17)
      at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:149:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1174:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:541:23)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:521:21)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:312:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:264:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:212:21)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.032s
Ran all test suites.

Here is a view of my package.json

{
    "name": "copyify",
    "jest": {
        "verbose": true,
        "transform": {
            "^.+\\.js$": "babel-jest"
        },
        "moduleFileExtensions": [
            "js",
            "jsx"
        ],
        "moduleDirectories": [
            "node_modules",
            "src"
        ]
    },
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^10.2.1",
        "@testing-library/user-event": "^7.1.2",
        "prop-types": "^15.7.2",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.1",
        "styled-components": "^5.1.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "jest",
        "eject": "react-scripts eject",
        "lint": "eslint . --ignore-path .gitignore .",
        "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json|ts|tsx)\"",
        "format": "npm run prettier -- --write",
        "check-format": "npm run prettier -- --list-different",
        "validate": "npm-run-all --parallel check-format lint test build",
        "setup": "npm install && npm run validate"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@types/jest": "^26.0.0",
        "babel-jest": "^26.0.1",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-react": "^7.20.0",
        "husky": "^4.2.5",
        "lint-staged": "^10.2.10",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.0.5"
    }
}

Any ideas on how I may go about fixing my problem?