When running npm test I get the following error:
Cannot find module '@chakra-ui/utils/context' from 'node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox-context.cjs'
I created the app using create-react-app, with the @chakra-ui/typescript template. I can build and run the app, but when I run the tests it cannot seem to find the chakra components.
My package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "^2.2.4",
"@chakra-ui/react": "^2.10.3",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.1.5",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.119",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"feather-icons": "^4.29.2",
"framer-motion": "^11.11.11",
"next-themes": "^0.4.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-feather": "^2.0.10",
"react-icons": "^5.3.0",
"react-router-dom": "^6.27.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
My test (App.test.tsx)
import { render, screen } from "@testing-library/react";
import App from "./App";
test("renders learn react link", () => {
render(<App />);
const linkElement = screen.getByText("Hello");
expect(linkElement).toBeInTheDocument();
});
App.tsx
import { ReactNode } from "react";
import { Button } from "@chakra-ui/react";
import { ChakraProvider } from "@chakra-ui/react";
...
const App = () => {
return (
<ChakraProvider>
...
<Button size={"sm"} colorScheme="red">
Hello
</Button>
...
</ChakraProvider>
);
};
export default App;
Any suggestions would be greatly appreciated :)