I'm testinng a react component using the RTL, and everytime I ran a test, I get,
"messageParent" can only be used inside a worker
**Here's the code
describe('Header', () => {
it('validates header component is rendered', () => {
const { getByTestId } = render(<Header patientName="Jake Bland" />);
expect(getByTestId('patient-name')).toHaveTextContent(/^Jake Bland$/);
expect(getByTestId('dateRange')).toBe(dateRange);
});
});
Any help on this will be greatly appreciated.
I was having the same issue, and it was caused by calling toBe() or toEqual() on an HTMLElement. So your most likely culprit is here, since getByTestId returns an HTMLElement:
expect(getByTestId('dateRange')).toBe(dateRange);
I fixed my issue by testing against the element's text content instead.
expect(getByTestId('dateRange')).toHaveTextContent('...');
Hi I had the same issue after spending some time googling around i found this: github issues forum
it turned out that this issue is caused by node12 version i downgraded my one to version 10 and everything worked i have also upgraded to version 14 and that also works.
check what is yours node version in ur terminal:
node -v if (version 12) upgrade it!
nvm install v14.8.0 (something like this or the leates one)
nvm use v14.8.0 (or any other version you may wish to install that is above 12)
hopefully this helps
I ran into this error while testing to see if a <select> had the right number of options, when using this:
expect(container.querySelectorAll('option')).toBe(2);
#testing-library/react must be trying to do something strange to get the length of the HTML collection, I have. So I added .length to the query:
expect(container.querySelectorAll('option').length).toBe(2);
All was well.
I had the same bug but I was able to fix it by importing '#testing-library/jest-dom' as follows in my test file:
import '#testing-library/jest-dom'
It turned out that the package above is a peerDependency for '#testing-library/react'. Thus the error.
Related
Strange bug with Jest, create-react-app, and typescript.
Tonight Jest started failing to import my "./ProcessStore" module correctly. This module is a transitive dependency of something that my tests import.
The error I see is that the thing I import is undefined.
When I do import * as what from "./ProcessStore" and log(what), it prints all of the exports, but the values are undefined. Like {default: undefined, ResourceChange: undefined} two classes that are exported. It should be {default: <a class>, ResourceChange: <a class>}.
It's just that one file. Every other file works.
When I use npm start, it works --- this is a Jest only problem.
Also if I rename the broken file to say ./ProcessStore2, it also works.
I tried ./node_modules/jest --clearCache, which didn't help.
In case it's relevant, I'm using craco normally. Switching back to react-scripts temporarily didn't help.
I'm using react-scripts 4.0.3 (latest version).
What is going on? How do I fix this silly problem?
This was caused by a circular dependency in my project.
The circular dependency was causing Jest to return an empty module. I believe the 2nd time a module is entered, it will have undefined contents.
In my case the chain was ProcessStore.ts -> stores.ts -> ProcessStore.ts. So by the time stores.ts loads ProcessStore.ts, the process store has already been loaded, so everything is undefined.
I ran into this when I was importing in one file like this
import { myHook } from 'services/hooks/myHook'
and in another file
import { myHook } from 'services/hooks'
There was an index file
// src/services/hooks/index.ts
export * from './myHook.ts'
Converting them all to use the index path fixed it. I don't think I had a circular dependency anywhere, I never was able to truly understand what was wrong.
I also ran into this issue, due to a circular dependency.
In order to confirm the nature of the bug, I console.log the missing import and executed my test. I could see that the import was in fact undefined when it shouldn't have been.
I ran this command to find circular dependencies at package/project level:
npx madge --circular --extensions ts,tsx .
This only gave me a clue as to what was going on, however.
I then used the debugger at the point where my circular dependency was occurring. Using Chrome DevTools, I inspected the call stack, and found how each import was being imported. This revealed the circular dependency very clearly. For me, this was the most important part of untangling the circular dependency.
I am practicing react on condesanbox.io installed jsx- control-statement dependency. When iam adding any of the control statement it is undefined.
How to configure jsx- control-statements in codesandbox.io.
This question might be couple of month old and its look like the questioner has not find the solution yet,so here is my fix
Solution: Instead of using just jsx syntax inside the return statement wrap the jsx with react fragment,below is the example
return (<>
{user ? <Component1/>:<Component2/>}
</>)
You will not be able to use jsx-control-statements in codesandbox.io in the similar way that you might in a local babel environment.
(i guess strikethrough isn't a thing on stackoverflow?) ~~You will have to import { If } from 'jsx-control-statements' to get access to the If tag, for example.~~
edit:
I've seen people import it in the past (similar to this example https://github.com/PedroBern/react-tiger-transition/issues/2 ) but, as I'm sure you're aware, the jsx-control-statements lib is a babel plugin; the code seen in that example is probably only serving to calm eslint in an older version of control-statements.
If you pull the jsx-control-statements dependency into codesandbox and cast it to a variable via import whatever from 'jsx-control-statements', and look at 'whatever', you'll see that it is a function. (see the link below for the full code.)
You COULD maybe go down the road of hackifying a dumbed-down version of babel-core, and passing it into whatever(babel) but you're better off creating your own If tag that has a condition property and conditionally renders children.
https://github.com/AlexGilleran/jsx-control-statements/blob/master/src/index.js
This is brand new install - I have not put any transitions on the Alert component
To replicate the code it is simple
import React from "react";
import { Alert } from "reactstrap";
export const Index = () => {
return (
<div>
<Alert color='primary'>This is a primary alert — check it out!</Alert>
</div>
);
};
Error Msg: Please update the following components: Transition
How does one go about updating Transition or eliminating it all together?
In the event that someone comes here on after searching the question and is looking for insight this is it.
React strap (at the time of this post) uses the react-transition-group things fade in and out and menus slide up and down. After amalgamating the info on this subject here and on Github they are currently updating the library. I have finished the coding of that component by ignoring the warning.
It did not impede this iteration of that component. Happy Coding.
I have this same warning, and I fixed it changing in the index.js file, the value of <React.StrictMode> to <React.Fragment>.
Since this removes the warning, is not guaranteed that your can be bulletproof.
This issue was reported, and apparently fixed but I received the same error even with the updated source code. It's more than just the error as well - it can cause components to re-render
Here is one github thread from the reactstrap repo about this (but there are a number of them): https://github.com/reactstrap/reactstrap/issues/1340
There are a number of issues related to this warning though.
As best I can tell it has something to do with an item in Transition.js, and I think it may have to do with a this.context call when a component is 'entering'
But, the project I encountered this issue is the first React App I'm building, and I'm not quite ready to learn the Legacy Context API, so that's just my best guess and in the end I just opted for an alternative package.
I don't have the rep to put this in a comment, so the only answers I have are:
Report the issue to the reactstrap team and wait/assist with a fix
Use an alternative package
I'm starting learning React and while I was doing some tests i noticed two warning messages:
Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning.
They don't prevent the tests from running nor from properly validating, but there is always this error.
By looking at the docs, I found this page, even after I included those lines they recommend, the warning message is still showing up.
I'm trying a very simple test to start with, this is my code:
import React from "react";
import toJson from "enzyme-to-json";
import { shallow } from "enzyme";
import { About } from "./About";
describe('Rendering test', () => {
const component = shallow(<About />);
const tree = toJson(component);
it('Should render the About component', () => {
expect(tree).toMatchSnapshot();
})
it('Should not contain an h2 element', () => {
expect( component.contains('h2') ).toBe(false);
})
})
What do I need to do in order to solve this warnings? I already updated all my packaged to the latest versions.
If you are using React 0.14 or React <15.5, in addition to enzyme, you will have to ensure that you also have the following npm modules installed if they were not already:
npm i --save-dev react-addons-test-utils react-dom
If you are using React >=15.5, in addition to enzyme, you will have to ensure that you also have the following npm modules installed if they were not already:
npm i --save-dev react-test-renderer react-dom
I think it's coming from using the shallow render function from enzyme, which has not been updated for v15.5 yet (there is a pull request for it though).
You can try to use one of the other render function (render or mount), but this will change the semantics of your test (and may or may not still produce the warning).
Your other option is to not use enzyme and use react-test-renderer/shallow yourself, but the enzyme API is quite nice for testing components.
My advice is to wait for the version of enzyme and just live with the warning for now.
Update August of 2017
If you install react-test-renderer it will work but all react-* versions should match:
e.g.
react#15.4.2
react-test-renderer#15.4.2
react-dom#15.4.2
react-addons-test-utils#15.4.2
In my environment, only this config worked!
I was still receiving the following warning after trying steps listed above.
Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
Updating the path in \node_modules\react-addons-test-utils\index.js solved this for me.
Old:
lowPriorityWarning(
false,
'ReactTestUtils has been moved to react-dom/test-utils. ' +
'Update references to remove this warning.'
);
module.exports = require('react-dom/lib/ReactTestUtils');
New:
lowPriorityWarning(
false,
'ReactTestUtils has been moved to react-dom/test-utils. ' +
'Update references to remove this warning.'
);
module.exports = require('react-dom/test-utils');
Been struggling with this one for a few hours now. I'm trying to use react-css-transition-group to animate elements in an array. I have:
render: function(){
var dataSections = this.props.sections.map(this.buildDataSection);
return (
<div>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{dataSections}
</ReactCSSTransitionGroup>
</div>
);
}
It compiles fine, but when I run it I get Uncaught Error: Invariant Violation: ReactCSSTransitionGroup.render(): A valid ReactComponent must be returned. in my console. I have no idea why. I've tried rolling back my version of both react and react-css-transition-group to no avail. I'm at a loss for ideas at this point.
dataSections is a valid array of elements and renders fine when I take the animation out.
Any thoughts?
Update
I've since moved on to several other things in this project, and I've realized that it isn't just this package, it's any react package that exports a component. All of them throw this same error: A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
I've updated all my packages including Browserify, and React is already a peer dependency. Not sure what to do :(
Okay, I've figured it out, and I'm a fool.
Before I started using NPM, I was using the react-rails gem, and when I ported everything over to Browserify, I never took out the old gem. Because of that, I didn't notice the several different places that I forgot to require('react') at the top of a component file, because the old gem provided React in the global namespace and it therefor didn't throw an error.
Long story short, I had two conflicting versions of React running at the same time. Removed the gem, fixed the missing includes, and problems went away!