React tests fail when tested component renders a nested connected component, cannot find nested component

Question

I'm using a create-react-app project with Typescript and Enzyme (I've also tried react-testing-library and ran into the same issue)

I'm new to React testing and trying to get basic tests working. In this case, I'm trying to test the App component which renders the Ping component. This error only occurs when trying to render a connected component, it does not occur when trying to render a stateless functional component.

When I try to make a simple render test on my App component, I get the error:

Cannot find module 'src/components/Ping' from 'index.tsx' where index.tsx is the App component.

App.test.tsx

import { shallow } from 'enzyme'
import * as React from 'react'
import App from '..'
it('renders without crashing', () => {
    shallow(<App/>)
});

App.tsx

import * as React from 'react';
import Ping from "src/components/Ping";
import './App.css';

class App extends React.Component {
  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Ping/>
      </div>
    );
  }
}

export default App;

this error also occurred when I tried using react-testing-library with the render function.

Is this just a matter of needing to import Ping from "./src/components/Ping", or have you set up the paths configuration so that import Ping from "src/components/Ping" should work? — Matt McCutchen
– Matt McCutchen, Commented Oct 7, 2018 at 4:01

Jacob Gillespie · Accepted Answer · 2018-10-07 04:38:50Z

1

If you've set the paths configuration in your tsconfig.json, that allows TypeScript to understand the import of src/components/Ping for the purposes of resolving the type checking, but it does not allow the Webpack bundler inside Create React App to resolve the path. TypeScript doesn't actually rewrite imports.

If you are using Create React App 1.x (the react-scripts-ts version) then you won't be able to use paths without ejecting and manually modifying the Webpack configuration. There is a Webpack plugin called tsconfig-paths-webpack-plugin that would allow Webpack to resolve those imports. You'd also need to configure Jest module resolution as well.

If you are using Create React App 2.x, you can use @babel/preset-typescript to enable TypeScript support, and since you're using Babel, you'd also have access to babel-plugin-module-resolver, where you could configure Babel to rewrite those path aliases to match what TypeScript expected. As an added benefit, this would configure both Jest and Webpack since both use Babel.

You could also just use relative imports:

import Ping from "../src/components/Ping"

answered Oct 7, 2018 at 4:38

Jacob Gillespie

4,0813 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brooklin Myers Over a year ago

Relative imports solved the problem! I'd like to be able to use absolute imports without ejecting so thank you for the pointer to using Create React App 2.x!

Collectives™ on Stack Overflow

React tests fail when tested component renders a nested connected component, cannot find nested component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related