React-testing-library: Mixing custom render with all other exports gives error

[rovansteen]

Using the custom utils file as described in the README where you re-export everything from react-testing-library and override the render method gives the following error:

TypeError: Cannot set property render of [object Object] which has only a getter

• react-testing-library version: 5.0.1
• react version: 16.5.0
• node version: 10.0.0
• npm (or yarn) version: 1.6.0

Relevant code or config:

// @flow
import * as React from 'react';
import { render } from 'react-testing-library';

const customRender = (node, ...options) => {
  return render(
    <div>{node}</div>,
    ...options,
  );
};

export * from 'react-testing-library';

export { customRender as render };

This is on create-react-app by the way ([email protected])

[kentcdodds]

Hmmm... It seems to be working fine for me here: https://github.com/kentcdodds/jest-cypress-react-babel-webpack/blob/master/test/calculator-test-utils.js

[gnapse]

Hmmm... It seems to be working fine for me here: https://github.com/kentcdodds/jest-cypress-react-babel-webpack/blob/master/test/calculator-test-utils.js

Hmm, but you're not doing exactly the same, so maybe your way is the answer.

You're renaming the lib render as rtlRender at the moment of importing. @rovansteen OTOH is attempting to rename customRender as render at the moment of exporting. Maybe that has something to do with the issue?

[alexkrolick]

Does this work instead? https://github.com/kentcdodds/react-testing-library/pull/170

[chancesmith]

As a temporary fix, similar to the README example, instead of overwriting render I'm exporting customRender() from my test-utils.js and using it like so:

import {customRender} from '../test-utils';

test('<Button/> opens modal', () => {
  const {queryByText} = customRender(
    <Button/>
  )
  // rest of the test...
}

[kentcdodds]

I'm guessing the issue is something to do with versions of babel or something. In any case I don't see anything actionable here. If someone discovers what's going on feel free to open a PR to improve the docs.

[alexkrolick]

I think it has to do with Babel 7 vs. 6. https://github.com/kentcdodds/jest-cypress-react-babel-webpack/blob/master/package.json is using v7. I'm getting the error on v6.

[alexkrolick]

https://github.com/babel/babel-upgrade try running this to upgrade to 7. Not quite working on my project but on a simpler config it should confirm whether or not this is the issue.

[radihuq]

For anyone using TypeScript and running into the error Error: SyntaxError: Cannot use import statement outside a module, I fixed the issue by changing the file test-utils.js to test-utils.tsx:

import React, { ReactElement } from 'react';
import { render, RenderOptions, RenderResult } from '@testing-library/react';

import { MockedProvider } from '@apollo/react-testing'; // Mock Apollo Client
import { ThemeContextProvider } from '../Theme'; // Themeing

type AllTheProvidersProps = {
    children?: ReactElement;
};

const AllTheProviders: React.ComponentType<AllTheProvidersProps> = ({ children }) => {
    return (
        <ThemeContextProvider>
            <MockedProvider>{children}</MockedProvider>
        </ThemeContextProvider>
    );
};

const customRender = (ui: ReactElement, options?: RenderOptions): RenderResult =>
    render(ui, { wrapper: AllTheProviders, ...options });

// re-export everything
export * from '@testing-library/react';

// override render method
export { customRender as render };

Ref: https://testing-library.com/docs/react-testing-library/setup

[nvh95]

I just paste the workaround solution from https://github.com/testing-library/react-testing-library/pull/179/files here in case you are googling by the error message. The root cause is believed caused by Babel version < 7

// test-utils.js
const rtl = require('react-testing-library')
const customRender = (node, ...options) => {
  return rtl.render(<Something>{node}</Something>)
}
module.exports = {
   ...rtl,
   render: customRender,
}